mcpField
R
remix-game-best-practices

remix-game-best-practices

github.com/farworld-labs開発61 回インストール
リポジトリ

remix-game-best-practices について

remix-game-best-practicesは、Remix SDKを使ったゲーム開発の実装ルールをまとめたスキルです。ゲーム開発者向けに、モバイル画面、SDKフック、実行環境の制約、検証項目を示します。

主な機能

  1. 01縦向き720x1080キャンバス要件
  2. 02Remix SDKの状態・ライフサイクルフック
  3. 03リプレイ、音声、触覚フィードバックの指針
  4. 04PhaserとThree.jsのフレームワーク規則
  5. 05ブラウザー専用JavaScriptの制約
  6. 06公開前の検証チェックリスト

活用シーン

  1. 01Remix向け縦画面モバイルゲームの開発
  2. 02SDKを使ったゲーム進行状況の保存
  3. 03リプレイとミュート動作の実装
  4. 04SDK制約に沿ったゲームの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/farworld-labs/remix-skills --skill remix-game-best-practices

インストール後、Claude Code で/remix-game-best-practicesを入力して読み込まれたか確認します。

詳細

ゲーム制作のベストプラクティス

モバイルファーストの要件

  • 縦向きのみで動作するように制作します。
  • キャンバスは720x1080（アスペクト比2:3）にします。
  • 横向きのレイアウトや操作は使用しないでください。
  • 親指で操作しやすく、UIが読みやすいデザインにします。

Remix SDKの必須使用

HTMLの<head>にSDKスクリプトを含めます。

  • <script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>

サポート対象のSDK APIのみを使用します。

  • window.RemixSDK.singlePlayer.actions.saveGameState({ gameState: {...} })
  • window.RemixSDK.singlePlayer.actions.gameOver({ score: number })
  • window.RemixSDK.onPlayAgain(() => { ... })
  • window.RemixSDK.onToggleMute((data) => { ... })
  • window.RemixSDK.ready()
  • window.RemixSDK.gameState
  • window.RemixSDK.hapticFeedback()

禁止されているAPIとパターン

  • localStorageは使用しないでください。
  • sessionStorageは使用しないでください。
  • navigator.vibrate(...)は使用しないでください。
  • window.RemixSDK.vibrate(...)は使用しないでください。
  • 存在しないSDKメソッド（save、checkpointなど）は使用しないでください。

ゲームオーバーと再スタートのフロー

  • ゲームのプレイは、次の方法でのみ終了します。
window.RemixSDK.singlePlayer.actions.gameOver({ score: finalScore })
  • 独自のゲームオーバー画面は実装しないでください。
  • window.RemixSDK.onPlayAgain(...)を使ってリプレイに対応してください。

状態の永続化

  • 進行状況の永続化にはsaveGameStateのみを使用します。
  • await window.RemixSDK.ready()の後に、window.RemixSDK.gameStateから保存済みの値を読み取ります。
  • 保存する状態は簡潔で、シリアライズ可能なものにしてください。

ハプティクスとオーディオ

  • 衝突、スコア獲得、UI操作、ゲームオーバーにはwindow.RemixSDK.hapticFeedback()を使用します。
  • ゲーム内のすべての音声でonToggleMuteの状態を尊重します。
  • モバイルでのパフォーマンスを向上させるため、軽量なWeb Audio APIの効果音を使用します。

フレームワークのルール

Phaser（2D）
  • グローバルのPhaserを使用します（importは使用しません）。
  • シーンのライフサイクル（preload、create、update）を使用します。
  • 衝突判定にはArcade physicsを使用します。
  • Phaser.Gameの設定にparentを指定しないでください。
Three.js + Cannon-ES（3D）
  • グローバルのTHREEとCANNONを使用します（importは使用しません）。
  • requestAnimationFrameループを使用します。
  • 環境光と指向性ライトを含めます。
  • 毎フレーム、物理ボディからメッシュのトランスフォームを同期します。

コードとランタイムの制約

  • ES6 JavaScriptのみを記述します（TypeScriptは使用しません）。
  • import文は使用しないでください。
  • ブラウザーのみのランタイムを想定します（Node.js APIは使用しません）。
  • initGame()を定義し、ファイルの末尾で呼び出します。

検証チェックリスト

ゲームを完成させる前に、次の点を確認してください。

  • 縦向きの2:3キャンバス（720x1080）であること。
  • SDKフック（gameOver、onPlayAgain、onToggleMute）が含まれていること。
  • 禁止されているストレージAPIやバイブレーションAPIを使用していないこと。
  • ゲームプレイ上の重要なイベントにハプティクスが組み込まれていること。
  • onPlayAgainからの再スタートが問題なく機能すること。

コメント

Markdown 対応