Sparebeat創作譜面のフォーマット #Sparebeat

Sparebeat創作譜面の公開に必要な事項をまとめておく。
今回は、公開するサイトのHTMLファイルをindex.html、譜面データをsample.jsonとする。

JSON

JSONファイルは次のように書く。

sample.json

{
    "title": "曲のタイトル",
    "artist": "作曲者",
    "url": "作曲者のサイトのURL",
    "bgColor": ["色1", "色2"],
    "bpm": "曲のBPM",
    "startTime": 譜面の始まる位置,
    "level": {
        "easy": "Easyの難易度",
        "normal": "Normalの難易度",
        "hard": "Hardの難易度"
    },
    "map": {
        "easy": [Easyの譜面データ],
        "normal": [Normalの譜面データ],
        "hard": [Hardの譜面データ]
    }
}

順番に説明していく。

title

曲のタイトル。

artist

作曲者。難易度選択画面でタイトルの下に小さく表示される。

url

作曲者のサイトのURL。難易度選択画面で作曲者の所をクリックするとそのURLに飛ぶようになる。
なくてもよい。

bgColor

難易度選択画面の背景色。色1、色2は16進数表記(#FF0000など)で書く。
["色1"]と書くパターンと["色1", "色2"]と書くパターンがあり、前者は単色で後者はグラデーションになる。
なくてもよい。

bpm

曲が始まる時のBPM。難易度選択画面の下部に表示されているBPMがこれになる。
数ではなく文字列を書くこともでき、難易度選択画面の下部にBPM:入力した文字列と表示されるが、そのときは必ず譜面の最初に後述のBPM変化を書き、BPMを指定する必要がある。

startTime

曲の開始に対して譜面の開始がどれだけ遅れるか。単位がミリ秒の数値で指定する。
0にすると曲の開始と同時に譜面が始まり、負にすると曲の開始前に譜面が始まる。

level

各譜面のレベル。整数である必要はないし、数である必要もない。
ある難易度の譜面が存在しないときは、その譜面のレベルを0としたり-とすると良いだろう。

map

譜面。Easy、Normal、Hardの3つの譜面を書く必要がある。Easyの譜面が要らない時は"easy": []とすれば良い。
この譜面にもやや複雑なフォーマットがある。
譜面の書き方の例を示す。

"easy": [
            "2,,,,5,,,,2,,,,34,,,",
            "123,,,,234,,,,134,,,,234,,,",
            "34,,12,,34,,12,,34,,12,,34,,12,,78,,56,,78,,56,,78,,,,(4,3,2,)1,",
            "123,,124,,134,,234,,134,,234,,123,,1234,",
            "[2,,,,,,,,13,,,,,,,",
            "(2,,,,,,,,,,1,,,,,,,,4,,,,,",
            ")ad,,,,,,,,e67h,,,,,,,",
            "]ad,,,,ebch,,,,1fg4,,,,,,,",
            {
                "speed": 1.1,
                "bpm": 250,
                "barLine": false
            },
            "1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4"
        ]

譜面の概形

譜面はいくつかの文字列(と{}で囲まれた何か)をカンマで繋いだ形になっている。(最後の文字列の後にはカンマがないことに注意)
各文字列が1つの小節を表していて、カンマは小節の切れ目を表している。
文字列もまたカンマで区切られていて、一つのカンマをまたぐと16分音符の長さだけ変化する。文字列の末尾と次の文字列の先頭の間も16分音符の長さだけ変化する。
つまり、2,,,,5,,,,2,,,,34,,,は「2のノーツ、4分空けて5のノーツ、4分空けて2のノーツ、4分空けて34のノーツ、4分空けて次の小節へ」という意味になる。

ノーツの種類

各ノーツには、次のように数字やアルファベットが割り振られている。
・Dキー、Fキー、Jキー、Kキーに来るノーマルノーツはそれぞれ1,2,3,4
・Dキー、Fキー、Jキー、Kキーに来るアタックノーツはそれぞれ5,6,7,8
・Dキー、Fキー、Jキー、Kキーに来るロングノーツの始点はそれぞれa,b,c,d
・Dキー、Fキー、Jキー、Kキーに来るロングノーツの終点はそれぞれe,f,g,h
例えば、2のノーツは「Fキーに来るノーマルノーツ」を表していて、5のノーツは「Dキーに来るアタックノーツ」を表している。
同時押しの場合は並べて書く。例えば、34のノーツは「Jキーに来るノーマルノーツとKキーに来るノーマルノーツの同時押し」を表している。

バインドゾーン

Sparebeatでは通常空打ち(音符のないところを叩くこと)はMISSにならないが、バインドゾーンの時は空打ちがMISSになる。
今がバインドゾーンであるかは、ゲーム画面横にある拍に合わせて点滅している場所の点滅の色で判断でき、赤く点滅していたらそれがバインドゾーンである。(Southern Cross HARDのサビなど)
バインドゾーンは、譜面の一部を[]で囲うことで作れる。[]で囲まれた範囲がバインドゾーンになる。
バインドゾーンは何個でも置くことができ、小節線をまたいで効果を発揮する。

24分

先ほど「一つのカンマをまたぐと16分音符の長さだけ変化する」と書いたが、譜面の一部を()で囲うとその中は「一つのカンマをまたぐと24分音符の長さだけ変化する」ようになる。
同様に、「文字列の末尾と次の文字列の先頭の間も24分音符の長さだけ変化する」ようになる。
()も何個でも置くことができ、小節線をまたいで効果を発揮する。

32分・48分

Sparebeatでは24分の置き方は上に書いたものしかないため、通常は32分や48分を置くことはできない。
そのため、一部分(あるいは全体)のBPMを倍取りし、16分や24分として置く必要がある。
一部分のBPMを倍取りする場合、次の項目で説明するBPM変化を行う必要がある。

BPM変化・速度変化・小節線非表示

文字列の代わりに次のような「{}で囲まれたもの」を入れることで、BPMを変えたり速度を変えたり小節線を非表示にできたりする。

{
    "speed": 1.1,
    "bpm": 250,
    "barLine": false
}

speedは譜面が流れる速度(デフォルトは1)、bpmはBPM、barLine(trueかfalse)は小節線の表示/非表示を表している。
ここではspeed、bpm、barLineを全て書いているが、このうち1つか2つを書かなくてもきちんと動く。例えばBPMが変わらない場合、

{
    "speed": 1.1,
    "barLine": false
}

と書くことができる。

HTML

JSONが書けたら、公式のSimuratorに音楽ファイル(.ogg)と譜面ファイル(.json)を入れれば譜面をプレイできるが、このままではまだ公開できない。
公開するためにはHTMLを書く必要がある。ホームページのレイアウトやHTMLを公開するURLをどうするかといった話はここでは省くが、参考までに私はGitHub Pagesを使ってホームページを立てている。
ホームページができたとして、どのようにしたらそのページで譜面が遊べるようになるかだが、HTML内に次のように記述することで譜面を遊ぶプレイヤーが表示される。

index.html

<iframe id="sparebeat" width="960" height="640" src="https://sparebeat.com/embed/" frameborder="0"></iframe>
<script src="https://sparebeat.com/embed/api.js"></script>
<script>Sparebeat.load("譜面データのファイル名.json", "曲データのファイル名.ogg");</script><br><br>

これで、創作譜面を他の人に遊んでもらえるようになる。