Sparebeat Map Editorの使い方
Sparebeat Map Editorの取扱説明書的なやつだよ。Fire Foxはパフォーマンス悪いし、Edge(Chromiumじゃないやつ)やIEは動かなかったのでGoogle Chromeブラウザで開くことを強く推奨します
スマホ対応はしてないし、するつもりないのでパソコンからアクセスしてやってくらさい…
1. 音源の準備
音源ファイルはファイルサイズの小さいmp3ファイルだと都合がいいよ
ただmp3ファイルによっては再生タイミングの制御ができないものがあって、タイミングズレズレで譜面制作どころではなくなることがあるからオンラインオーディオコンバータで一度変換することをオススメ
コンバータのリンクはエディタ画面上部の一番右のアイコンにもあるので、適宜飛んでね
オーディオコンバータでの出力はこんな感じに設定しよう
このようにエコノミー(64kbps)でmp3を出力すると読み込みや動作が軽くなることが期待されて、オーディオコンバータで出力したmp3で大きくズレるものは確認されてないからエディタで扱うにはぴったりなんだ
ただ、実際に譜面を公開するときは64kbpsの音源は音質悪くなりがちであんまり良くなさそうなんで、変換前の元音源を使って公開するべき
あくまでこの音源はエディタ用のものだと考えてほしい
2. 音源と譜面の読み込み、譜面の新規作成
音源が準備できたらまずはその音源を読み込むよ
上部と左側のメニュー以外の大部分のところがmp3ファイルのフォームになってるので、ここに準備した音源をドラッグアンドドロップするか、その音源を選択してあげよう
音源を選択するとこんなダイアログが出るよ
既存の譜面ファイルを読み込んで譜面を作る場合は上のファイルフォームからJSONファイルを選択しよう
譜面を新しく作る場合は初期BPMと何拍子で作るかを指定して新規作成しよう。BPMは後から変更できるけど、拍子は変更できないのでご注意
3. エディタを自分好みに設定
譜面を新規作成した場合、初期画面はこんな感じになってるはず
まずは快適に譜面を作るために自分好みにエディタ画面を設定しよう
画面上部の歯車アイコンを押して設定ダイアログを開こう
全般設定ではこんなことが設定できるよ
・ノーツの幅: 表示されるノーツ1つの横のピクセル数
・ノーツの縦横比: ノーツの幅に対する縦のピクセル数の比率
・表示列数: 画面に表示する小節列数の最大値、横にスクロールはできないのでここで画面いっぱいに収まるくらいの列数にすべし
・上下のノーツとの間隔の比率: 大きくすると上下のノーツとの間隔が広くなる
・再生バーの太さ: 譜面内で再生位置を示すバーの太さ
・履歴を残す数: 何個前までの変更まで保持するか、数がでかすぎるといつの間にかメモリいっぱいいっぱいで壊れちゃ～う可能性あるのでご自身の環境と相談してみてください
・クラップのタイミング: 「Start Timeを合わせる」の欄で説明
カラー設定ではこんなことが設定できるよ
・ダークテーマを適用: ダークテーマを適用するよ、黒いとかっこいいね
・Sparebeatテーマ: ノーツの色をSparebeatで用意されているテーマに変更できるよ
・再生バーの色設定: 再生位置を示すバーの色を設定できるよ
カラー設定の設定項目はカラーピッカー横でリアルタイムに変更されるので好きな設定を選びやすくなってるよ
以上の設定項目は設定ダイアログを閉じた段階でサイトデータに保存されるのでサイトデータが保存できる人(Sparebeatのスコアデータが残ってる人)は次回からは設定しなくて大丈夫だよ
この他にもサイトデータを活用してより便利にエディタが使える機能を実装してるのでサイトデータが保存されない人はググってサイトデータが保存できるようにするといいゾイ
4. ノーツを置いたり消したりコピペしたり
画面左側にノーツ編集ツールがあるよ
上に二つ並んでるやつが編集ツールのモード選択で、下のノーツが置いてあるボタンは何のノーツを置くかの選択を表すよ
編集ツールのモードは左から順番に
・編集モード: ノーツをクリック操作で1つずつ編集(左クリックで追加、右クリックで削除)
・選択モード: クリックしっぱなしのドラッグで範囲を選択して、選択したやつをなんやかんやいじる
的な感じ
「編集モード」ではモード選択下の置くノーツの種類選択ができる
・左上: 通常ノーツ
・右上: アタックノーツ
・左下の「S」: ロングノーツの始点
・右下の「E」: ロングノーツの終点
ロングノーツの「S」と「E」は「Start」の「S」と「End」の「E」から頭文字を拝借してるよ
編集ツールのモード選択とか置くノーツの種類選択なんかはショートカットキーを用意してるよ。ショートカットキーの欄で確認してね
ロングノーツの始点と終点の間にあるノーツはこんな感じで表示されなくなって、なんも操作できなくなる
ロングノーツの中にノーツがあったら無理ゲーにも程があるのでできなくなってるんだね
24分のノーツを置きたいときは
編集ツール下の「ビートスナップ変更」を押すと
こんな風に24分のノーツを置くことができるようになるよ
小節のリズムを保つために既に置かれているノーツの部分はビートスナップが変更されないことがあるからちょっとだけ注意。この関係で譜面ファイルを読み込んだ時にこのリズムがズレてるとその後のノーツは読み込むことができないんだ。「()がおかしい」とかなんとか言われるよ
読み込ませたい場合はJSONファイルを直接いじいじしないといけないのでちょっと難しいかもしれない
再び「ビートスナップ変更」を押すと16分のノーツを置けるようになるよ
次に「選択モード」について
選択モードではこんな感じに範囲選択ができて、範囲内にあって選択されたノーツは縁の色が青っぽくなるよ
選択されたノーツがある状態でノーツを右クリックするとこんな感じのメニューが表示されて、好きな操作を選択できがち～
・切り取り: 選択範囲のノーツをコピーして、その後選択内に置かれているノーツは全て削除
・コピー: 選択範囲のノーツをコピーする
・左右反転: 選択範囲のノーツを左右反転する
・貼り付け: コピーしたノーツを貼り付ける
・削除: 選択範囲内に置かれているノーツを全て削除
右クリック以外にもctrl+Cを押すことでコピーを、ctrl+Dを押すことで削除を、ctrl+Rを押すことで左右反転を行うショートカットキーも用意してるよ。ショートカットキーについては下のほうにまとめて置いてあるのでそっちでも確認してくだせえ
貼り付けは貼り付けようと選択したノーツが選択範囲の一番左下のノーツになるように他のノーツが貼り付けられるよ
上の画像でコピーしたところをこのノーツに貼り付けると
上下に同じ配置が貼り付けられる！
ノーツのコピーはそのノーツから次のノーツを数えていって、その順番で記録するみたいな仕様になってるので、少し注意することがあるよ
それがこんな状況
1/4の間隔と1/6の間隔が混ざっているこんなときに1/4の間隔だけのところに貼り付けると
時間的にズレて配置されちゃうんだね
そんなこんなで、コピペするときはなるべくビートスナップ間隔が同じところで行うことをオススメするよ
それとコピペされるのは置いているノーツの状態のみで、後述のBPMやスピード変化といった情報はコピーされないようになってたり
5. BPM変化とかスピード変化その他オプションとか
Sparebeatはソフラン入れたり、BPMを変化させたり、小節線の表示の有無を設定したりバインドゾーンにしてみたり、といったことができるよね
Sparebeat Map Editorもそこにはしっかり対応しているよ
「編集モード」のときに小節列右側にカーソル合わせてクリックするとこんな画面が表示されるよ
左上の入力欄がBPMを、右側の入力欄が譜面の速度を変化させる数値だよ
各チェックボックスについては
・小節線: そのノーツラインから小節が始まるようになる
・小節線を表示: 譜面の中で小節線を表示させるかどうか
・: バインドゾーン: そのノーツラインから先のバインドゾーンの有無
的な感じ
これらの設定はそのノーツラインから先のノーツラインで別の変化があるところまで適用されるよ
「BPM」、「速度」、「小節線を表示」のいずれかが変更された場合はそのノーツラインは必ず「小節線」にチェックが付くよ。Sparebeatの仕様でそれらの変化があるところはそうなるようにしないといけないんだ。「ここにチェック付けた覚えないのになんで小節線にチェック付いてんの？？？」みたいに思うかもしれないけど、仕様だからゆるして
「小節線」にチェックが付いているところには右側に線が表示されるよ。「小節線を表示」にチェックが付いてれば線が濃い目になって、付いてなければ線は薄めになる
BPM変化のあるところ(もしくは一番最初のライン)には変わったBPMの数値が出てきて、速度変化のあったところには「×2.0」みたいにそこからの速度が表示されるよ
BPM変化と速度変化が同時にあるときはBPMの表記が優先される。速度変化は小数点第一位までしか表示されないので、実際の桁はオプションを開いて確認しよう
バインドゾーン内のノーツは縁の色が赤く表示されるよ。バインドゾーンのチェックだけは小節線に影響しないのもSparebeatの仕様や
エディタ画面右下には現在再生時間のときのBPMが出てて、ⓘアイコンにカーソルを合わせるとノーツ数とかの情報が表示されるよ
6. 小節列の編集
小節列上部の̟⊕ボタンと̠×ボタンで小節列の追加と削除ができるよ
追加すると追加ボタンを押した小節列の次のところに新しい小節列が挿入されるよ
削除すると削除ボタンを押した小節列が削除されるよ
設定した表示列数しか表示されないけど、別の小節列を見たいときは小節列の下部にあるやつで遷移できるよ
矢印1つのやつが1つだけの移動、矢印2つのやつが設定した表示列数分の移動、丸で囲まれた矢印がそれぞれ最初と最後に一気に飛ぶやつになってる
7. 元に戻す、やり直し
これもエディタには必須の機能だよね。ということで用意しましたよん
履歴に保存されるのは
・ノーツを置いたり消したり
・BPM変化とかスピード変化とか
・小節線の追加、削除
といった譜面情報だよ
「元に戻す」はctrl+Zで、「やり直し」はctrl+Yでショートカットキーも用意したよ
8. 音楽の再生
音楽再生関連のものは左下のほうにあるよ、これに関しては見たまんまだよ
「▶」が再生/一時停止で「■」が停止して再生位置を0秒にするみたいなやつになってるよ。再生/一時停止に関しては「Eキー」か「Pキー」を押してもできるよ
再生速度を変更すると、再生速度が変わってより細かくタイミングの調整ができるよ。後述の「Start Timeを合わせる」とうまく組み合わせて使っていこう
クラップ音量が0じゃないときは音楽の再生と同時にノーツのある場所でクラップ音が鳴るようになってるよ。ノーツが音楽に合ってるかちゃんと確認していこうね
クラップ音は再生したときにそのときに存在するノーツを見て生成されるよ。だから曲が再生されている最中に追加されたノーツのクラップ音は再生されないし、消したノーツのクラップ音は再生されちゃうのでノーツの編集は音楽が再生されてないときにやったほうがいいと思う
選択モードのときに譜面部分をクリックすると、再生位置のバーがその位置に移動して、再生時間もそれに応じて同期するよ
初回起動時に再生ボタンを押してもなんか反応しないことがあるんだけど、そうなったら「選択モード」で再生位置を動かしたり、再読み込みとかを繰り返したりすれば多分再生できるようになるよ
あと、エディタを起動して最初に再生するときはStart Timeが適用されないんでStart Timeによってはめっちゃ早くクラップ音が鳴っちゃうんだ。再生したら一回停止してまた再生しなおせば適用される。。。その辺はごめんなさい…
9. Start Timeを合わせる
Sparebeatの「Start Time」は音源の再生が始まってから一番最初のノーツラインが降ってくるまでのミリ秒(1/1000秒単位)を表してる。これを音源とうまく合わせることで音を合わせることができるんだね
正直これは自分の感覚でどうにかするしかない。再生されるクラップ音を見てぴったりのところに合わせていこう
ぴったりに合ったところで、本当にぴったり合ってるかテストプレイして確認しよう
ディスプレイアイコンがテストプレイだよ
デフォルトの難易度は「HARD」になってるので、ここまでで難易度について何もいじってない場合は「HARD」譜面を選択してプレイしてみよう
ぴったり合ってたかな？合ってればそれでいいんだけど、音源によってはちょっとノーツが音より早めに降ってくることがあるよ
これはmp3のうんぬんで音源ガチャでしかないんだ、そういう音源だった場合はクラップ音で合わせたStart Timeは無視して、テストプレイを何回も行って、自分の感覚的に一番合っている時間を探そう。こんな音源のときはSparebeatの「サウンドエフェクト」を付けてもクラップ音は遅れて再生されると思うから完全に自分の感覚を信じるしかない
Sparebeatの環境に合っても、そんな音源だったらエディタで再生したときはクラップ音が遅れて再生されて気持ち悪いよね
そういうときにはエディタ設定の「クラップのタイミング」を設定しよう
クラップのタイミングはStart Timeとは無関係にエディタ内だけで再生タイミングをミリ秒単位で設定できるよ。クラップ音が遅れて再生されてる場合は「60」とか「70」とかの正の数に設定するとエディタ内でも再生タイミングが調整できていい感じになるよ
10. タイトル、アーティスト、レベル、背景とかの設定
これらの譜面情報については上部メニュー左側のところで設定できるよ
「曲情報の編集」では曲タイトル、アーティスト、アーティストのサイトのURLが設定できるよ
「難易度変更」では作成する難易度の選択、レベル表記の設定、その難易度の譜面のリセット、ある難易度から別の難易度への譜面の複製を行うことができるよ
間違えてリセットしちゃったよーってときは履歴に前の状態が残ってるので、その難易度を選択して「元に戻す」を実行してね
「背景色設定」ではSparebeat画面の背景色の設定ができるよ
左側のカラーピッカーで画面上側の色を設定して、右側のカラーピッカーで画面下側の色を設定するよ。実際の画面では上側の色から下側の色に向かってグラデーションが付く感じだ
11. テストプレイ
「Start Timeを合わせる」のところでもちょっと説明したね。画面上部のディスプレイのアイコンをクリックするとそのときの譜面をテストプレイできるよ
mp3の容量が小さいと、Sparebeatのローディングの時間も短くなるから何度もテストプレイするってときも小さいほうが快適なんだね
テストプレイ画面を消して、エディタ画面に戻るときはプレイ画面の周りにある暗くなってるところのどこかをクリックすると戻れるよ
テストプレイするときのSparebeatの設定変えるってときは画面上部メニューのエディタ設定の隣の「Sparebeat設定」から公式の設定ページに飛ぼう
ページが遷移したらせっかく作った譜面データが消えるんじゃ…と思うやん？ご安心を！設定に飛ぶときはサイトのほうに現在の譜面状態を保存するのでブラウザバックでエディタに戻ったときはサイトに保存されている譜面を読み込めばちゃんと続きから再開できるよ！
さらに音源ファイルが十分小さい(3MBくらいまで？)ときはサイトにmp3の音源も保存されるよ。そんなときはエディタのリロード時に
こんなダイアログが出てくるのでこれで「はい」を選択すれば音源ファイルの選択作業も必要なし！すぐに作業を再開できちゃう！
サイトデータを保存できる設定で、mp3音源のサイズが小さいとこういったこともできるんだね
12. 譜面の保存、出力
さっきSparebeat設定に飛ぶときに譜面データが保存されるって紹介したね
これはもちろん手動で保存もできるよ。画面上部のここをクリックしよう
ここをクリックするとクリップボードに作った譜面データの文字列がコピーされて、サイトにもそのデータが保存される
サイトにデータを保存するのはctrl+Sのショートカットキーでもできるよ
サイトに保存されてると色は他のアイコンといっしょになるけど、そうじゃないときはちょっと他とは違う色になるよ。こまめに保存して最新の状態を保っていこうね
直接譜面ファイルが欲しい！ってときはお隣の「譜面出力」をクリックしよう
譜面ファイルがダウンロードされるよ。これで譜面公開もばっちりだ！
13. ショートカットキー
便利なショートカットキーの一覧だよ
編集ツール関連
1キー、8キー: 編集ツールを「編集モード」にする
2キー、9キー: 編集ツールを「選択モード」にする
qキー、iキー: 置くノーツを「通常ノーツ」にする
wキー、oキー: 置くノーツを「アタックノーツ」にする
aキー、kキー: 置くノーツを「ロングノーツの始点」にする
sキー、lキー: 置くノーツを「ロングノーツの終点」にする
エディタ関連
ctrl+S: 譜面をサイトに保存する
ctrl+Z: 元に戻す
ctrl+Y: やり直し
ctrl+C: 選択範囲のノーツをコピー
ctrl+D: 選択範囲のノーツを全て削除
ctrl+R: 選択範囲のノーツを左右反転
3キー、0キー: 音源の再生/一時停止
14. 使用技術
・TypeScript
・React
・React shapes
・React Color
・Redux
・Redux Toolkit
・Redux-Saga
・redux-shortcuts
・Blueprint
・Lodash
この記事が気に入ったらサポートをしてみませんか？