mcpField
R
remix-game-creation

remix-game-creation

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

remix-game-creation について

Remix プラットフォーム向けの HTML ゲームを作成するワークフロースキルです。ゲームの企画や実装、タッチ操作や RemixSDK コールバックなど、プラットフォーム要件への適合確認を支援します。

主な機能

  1. 01小規模な HTML ゲームの企画
  2. 022:3 の画面レイアウト要件
  3. 03タッチ操作を主入力に指定
  4. 04RemixSDK コールバックの確認
  5. 05アップロード準備の検証

活用シーン

  1. 01モバイル向け HTML ゲームの作成
  2. 02アップロード前のゲーム確認

インストール

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

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

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

詳細

ゲーム作成ワークフロー

概要

このスキルでは、Remix プラットフォームで新しい HTML ゲームを作成する手順を説明します。

前提条件

  • REMIX_API_KEY 環境変数が設定されている必要があります。

制約

  • ゲームは 2:3 のアスペクト比（例：720x1080）を対象にする必要があります。
  • ゲームコンテナーは、その比率でビューポート全体を埋める必要があります。width: 100vw; height: 100vh を使用してください。スクロールバーやオーバーフローは発生させないでください。
  • ゲームは主要な入力方法としてタッチ操作に対応する必要があります（Remix プラットフォームは主にモバイル／タッチ操作を前提としています）。キーボードやマウス操作への対応は歓迎しますが、必須ではありません。

手順

1. ゲームを計画する

ゲームのコンセプト、仕組み、ビジュアルスタイルを決めます。範囲は小さく抑えてください。単一ファイルの HTML ゲームなら、30 秒以内にプレイできるものにします。

2. HTML を記述する

インラインの <style> タグと <script> タグを含む単一の HTML ファイルを作成します。構成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game Title</title>
  <script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>
  <style>
    /* Game styles can go here */
  </style>
</head>
<body>
  
  <script>
    // Game logic here
  </script>
</body>
</html>
必須の RemixSDK 関数

  1. window.RemixSDK.singlePlayer.actions.gameOver({ score }) -- ゲーム終了時に呼び出し、プレイヤーの最終スコアを { score: number } として渡します。これにより、プラットフォームにスコアが報告されます。

  2. window.RemixSDK.onPlayAgain(callback) -- プレイヤーがもう一度プレイするよう要求したときに実行されるコールバック（引数なし）を登録します。コールバックではゲームの状態をリセットし、ゲームを再開してください。

  3. window.RemixSDK.onToggleMute(callback) -- { isMuted: boolean } を受け取るコールバックを登録します。ゲームは isMuted の値に応じて、すべての音声をミュートまたはミュート解除する必要があります。

3. 検証する

アップロードする前に HTML ファイルを読み込み、次の項目を確認します。

  1. <!DOCTYPE html> 宣言がある
  2. <meta name="viewport" ...> タグがある
  3. RemixSDK のスクリプトタグがある：<script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>
  4. レガシーな @farcade/game-sdk スクリプトタグがない
  5. singlePlayer.actions.gameOver( または multiplayer.actions.gameOver( のどちらかを呼び出している（両方は不可）
  6. .onPlayAgain( コールバックを登録している
  7. .onToggleMute( コールバックを登録している
  8. localStorage または sessionStorage を使用していない
  9. インラインのイベントハンドラー（onclick=、onload= など）がない

先に進む前に、問題があれば修正してください。

4. ゲームをアップロードする

upload-game ワークフローに従って Remix プラットフォームにゲームを作成し、HTML コードをデプロイします。

ヒント

  • ゲームループには setInterval ではなく requestAnimationFrame を使用してください。
  • タッチ操作への対応は必須です（主要な入力方法）。キーボード／マウス操作への対応は追加機能として任意です。
  • 読み込みを速くするため、HTML 全体を 100KB 未満に抑えてください。

コメント

Markdown 対応