音ゲーのソースコード：譜面・判定・楽曲の追加
Riffvolt が 12 曲と 48 譜面をどう収めているか、判定とスコアがどこで決まるか、そして自分の曲を追加するのに必要なこと。
リズムゲームのソースコードは、実は 2 つのものでできています。タイミングを判定するコードと、各ノーツがいつ流れてくるかを決めるデータです。購入者が変えたがるのはほぼ必ず後者です。新しい曲こそが、リズムゲームを自分のものにするからです。私たちの 4 レーンのロック系リズムゲームテンプレート Riffvolt では、曲のリストを 1 つのマニフェストファイルに、譜面を 1 つずつ別のファイルにまとめているので、曲の追加はチェックリストのはっきりしたデータ作業になります。
このガイドでは、パッケージの中身を順に見ていきます。どんなゲームか、判定とスコアはどこにあるか、曲の追加方法、再ビルドと公開の方法、ライセンスで許される範囲、そしてこのエディションに含まれないものです。ファイル名はゲームに同梱の購入者ガイドに基づいています。
最初に押さえておきたい点がひとつあります。私たちの一部のテンプレートとは違い、Riffvolt はソースを変更したり曲を追加したりした後に再ビルドが必要です。同梱の game フォルダを公開するだけなら、静的な Web サーバーさえあれば十分です。
このリズムゲームのソースコードの遊び方
Riffvolt は、ブラウザで遊べる完成済みの 4 レーンのロック系リズムゲームです。プレイヤーはタイミングよくノーツを叩き、ロングノーツは最後まで押し続け、whammy（ワーミー）で音を揺らし、ROCK ゲージを溜めて overdrive を発動します。overdrive はポイントが加算されないライトショーで、ミスをすると終わります。タイミングの正確さがスコアとコンボを積み上げます。
- フルサイズの 12 曲。各曲に Easy、Normal、Hard の譜面があり、ツアー終了後に解放される Rock God を加えて、合計 48 譜面です。
- 4 つの会場（Garage、The road、Festival、Arena）を巡るツアー。各会場 3 曲です。最初の 2 曲で星を取るとアンコールが開き、アンコールをクリアすると次の会場へ進めます。ストーリーシーンや、軌跡やフレームなどの見た目の報酬もあります。
- フリープレイ：好きな曲を好きな難易度で遊べ、自己ベストは曲ごとにブラウザに保存されます。
- 操作：デフォルトは D、F、J、K キー。タッチ画面ではレーンをタップ、ゲームパッドにも対応しています。キー割り当ては Settings（設定）で変更できます。
- 快適さへの配慮：オフセットのオーディオ調整（Bluetooth ヘッドホンで役立ちます）、モーション軽減、フラッシュや稲妻の演出を抑える光過敏モード。
- インターフェースは 14 言語。
ファイルの構成
ダウンロードには game/（公開用ファイル）、source/（TypeScript プロジェクト）、documentation/（英語とポルトガル語の図解マニュアル）、licenses/（サードパーティの表記）が入っています。source/ の中では、楽曲データとゲームロジックがきれいに分かれています。
- public/manifest.json：楽曲カタログ。各曲の長さ、オーディオのバージョン、譜面のパスを含みます。
- public/charts/：48 の譜面。
- public/audio/：楽曲の音源。
- src/core/chartValidate.ts：譜面のスキーマとタイミングの検証。
- src/core/judge.ts：タイミング判定。
- src/core/scoring.ts：スコアとコンボのルール。
- src/game/campaign.ts：ツアーの進行。
- src/game/session.ts：1 曲のライフサイクルとリザルトの計算。
- src/i18n/locales.ts：14 言語のインターフェース辞書。
- src/net/localRecords.js：ローカルの自己ベスト。
- src/ui/style.css：インターフェースとレスポンシブレイアウト。
判定とスコアが別ファイルなので、得点の積み上げ方に触れずに判定幅を厳しくしたり緩くしたりでき、その逆も可能です。どんなリズムゲームのコードでも、この分離があるかを確かめてください。
自分の曲を追加する手順
リズムゲームの購入者が最初に聞いてくるのがこの変更です。パッケージに譜面エディタはないため、譜面はデータとして書きます。マニュアルには各ファイルに必要な項目が正確に載っています。
- 音源を public/audio/ に置きます。最終製品で使う権利を持っている音源だけを使ってください。
- public/charts/ に、対応する難易度ごとに譜面を 1 つずつ作ります。各譜面には、対応する songId、difficulty、audioVersion、offset と、順番に並んだノーツが必要です。
- public/manifest.json に、重複しない id、長さ、BPM、テーマ、audioVersion、譜面のパスを付けて曲を追加します。
- chartValidate.ts のバリデーターで各譜面をチェックします。
- すべての難易度で曲を最後まで通してプレイし、同期を確認します。バリデーターが確認するのは構造とタイミングのルールで、ノーツの気持ちよさまでは判断しません。
- 再ビルドして、新しいビルドをアップロードします。
1 曲足すのではなくサウンドトラックを丸ごと入れ替えたいなら、作業は譜面単位で見積もってください。12 曲を 4 つの難易度で作ると 48 譜面になり、どれもリリース前に通しプレイする価値があります。
再ビルドと、そのほかの変更
Node.js 24 LTS を推奨します。source/ で npm ci を実行し、続けて npm run typecheck と npm run build を実行して、dist/ の中身だけを公開します。npm run preview でローカルのビルドを確認用に配信できます。node_modules/ はアップロードしないでください。Vite は相対 base を使うので、ビルドはサブフォルダでも動きます。納品時のランタイムは読みやすいよう整形されています。マニュアルでは、次に触る人も読めるように、再ビルド時に minify:false と cssMinify:false を維持するよう求めています。
- ブランド：src/ui/style.css の配色とレイアウト、そしてロゴ。ホワイトラベルが認められているので、私たちのブランドをあなたのものに置き換えられます。
- テキスト：src/i18n/locales.ts で、リリースする言語分を変更します。
- ツアー：campaign.ts で、会場の順番と解放条件を変えます。
- 難易度：まず judge.ts の判定幅、次に scoring.ts のスコアとコンボのルール。
- 楽曲：最後に。新しい譜面はどれも通しプレイが必要だからです。
編集前にバックアップを取り、機能は 1 つずつ変更し、変更のたびにメニュー、1 曲、ポーズ、リザルト画面、再読み込みをテストしてください。既存のプレイヤーが記録を失わないよう、アイテムの id とセーブのキーは変えないでください。
公開する、またはポータルに埋め込む
game/ の中身を HTTP(S) サーバーのフォルダにアップロードし、相対パスを保ったままアドレスを開きます。PHP、データベース、アカウントは不要です。index.html を file:// で開かないでください。ローカルでテストするなら、game/ の中で python -m http.server 8765 を実行します。
- ブラウザ要件：JavaScript、ES モジュール、Canvas 2D、Web Audio。
- ブラウザは最初のタップやクリックの後でないと音声を有効にしないため、最初の画面が無音なのは正常です。
- iframe では fullscreen と autoplay を許可します。
- .js は JavaScript の MIME タイプで配信し、text/plain にはしないでください。
- ランタイムのアセット、フォント、ライブラリはすべてビルドに含まれています。必須の CDN はありませんが、インストール型のオフラインアプリではありません。
セーブデータはブラウザのオリジンに紐づくため、ゲームを別のドメインに移すとプレイヤーは最初からになります。このエディションは独自のセーブキーを使っており、私たちのポータル版とは別です。ネイティブアプリのプロジェクトは含まれず、ストアでの配信は別の作業になります。
このエディションに含まれないもの
Riffvolt はローカルのブラウザ版です。オンラインルームやマルチプレイ、オンラインランキングや共有リーダーボード、広告 SDK やアカウント、譜面エディタ、ネイティブアプリ、ホスティングは含まれません。自己ベストとツアーの進行状況はプレイヤーのブラウザに残ります。
音楽ゲームがあなたのカタログに合うなら、タイミングを競う私たちの別のテンプレート 2 つも一緒に並べられます。
Pinloop：30 のターゲットに挑むワンボタンのタイミングアーケード
ライセンスと価格
Riffvolt の定価は $49 です。2026 年 11 月 30 日まではブラックフライデーセールで 15% オフの $41.65 になり、1 回の注文でテンプレートを 2 点以上購入すると、5%〜20% のまとめ買い割引が加わります。ライセンスは永続・非独占で、1 つの最終製品（あなた自身のもの、または 1 社のクライアントのもの）に使えます。コード、アート、音声の改変、私たちのブランドからあなたのブランドへの置き換え、無料または広告付きでの提供が可能です。同梱の楽曲はその最終製品の一部として使ってください。テンプレート、そのコード、アセットを単体で再販することはできません。サポートは 6 か月付属、延長オプションで 12 か月です。新曲、外部連携、ホスティングは別途お見積もりします。
よくある質問
このリズムゲームのソースコードに自分の曲を追加できますか？
できます。音源、難易度ごとの譜面、public/manifest.json のエントリを追加し、譜面を検証して通しプレイした後、再ビルドします。譜面エディタは含まれていません。
Riffvolt を使うのに Node.js は必要ですか？
同梱の game フォルダを公開するだけなら不要です。Node.js 24 LTS を推奨するのは、TypeScript を変更したり曲を追加したりした後に再ビルドする場合だけです。
タッチ画面やゲームパッドで遊べますか？
はい。レーンをタップするか、ゲームパッドを使えます。操作は Settings で設定します。パフォーマンスは端末によるので、対象とする端末でテストしてください。
Bluetooth ヘッドホンの遅延はどうですか？
Settings にオーディオ調整があり、音声のオフセットを設定できます。Bluetooth ヘッドホンを使う場合に役立ちます。
オンラインランキングはありますか？
ありません。自己ベストは曲と難易度ごとにプレイヤーのブラウザに保存されます。リモートの対戦相手や共有ランキングはありません。
購入をおすすめしたい人
Riffvolt が向いているのは、カタログに音楽ゲームを加えたいポータルやサイト、1 社のクライアントにブランド付きのリズムゲームを納品するスタジオ、そして Canvas 2D と Web Audio のゲームが TypeScript でタイミングをどう判定しているかを読みたい開発者です。開発者以外が使えるビジュアル譜面エディタや、オンライン対戦が必要な場合はあまり向きません。どちらもカスタム開発になります。