quick-game

パフォーマンスに関する注意事項

• 時間をかけて、徹底的に作業してください
• 速度より品質を重視してください
• 検証手順を省略しないでください

クイックゲーム（高速プロトタイプ）

できるだけ速くプレイ可能なゲームのプロトタイプを作成します。これは、磨き上げを省いた /viral-game です。まずは足場を作り、コアループを実装します。画面に何かを表示したら、/add-assets、/design-game、/add-audio、/game-deploy、/monetize-game を使って、段階的に機能を追加していきます。

作成されるもの：

1. クリーンなアーキテクチャで足場を構築したゲームプロジェクト
2. コアゲームプレイ — 入力、移動、スコアリング、失敗条件、再スタート
3. すぐにプレイできる、起動中の開発サーバー

省略するもの（必要に応じて後から実行してください）：

• /add-assets — ピクセルアートのスプライト（2D）または3Dモデル
• /design-game — ビジュアルの磨き上げ、パーティクル、トランジション
• /add-audio — 音楽と効果音
• /record-promo — プロモーション動画の撮影
• /game-deploy — here.now へのデプロイ
• /monetize-game — Play.fun との連携

手順

ステップ 0：引数を解析する

$ARGUMENTS を解析して、ゲームのコンセプトを決定します。

直接指定： [2d|3d] [game-name]

• エンジン：2d（Phaser）または 3d（Three.js）。指定がない場合は、2d をデフォルトにします。
• 名前：ケバブケース。指定がない場合は、ユーザーに尋ねます。

ツイート URL： 引数にツイート URL（x.com/*/status/*、twitter.com/*/status/*、fxtwitter.com/*/status/*）が含まれる場合：

1. fetch-tweet スキルを使ってツイートを取得します
2. デフォルトで2Dにします
3. ツイートから創造的にゲームのコンセプトを抽象化します
4. ケバブケースの名前を生成します
5. 何を作成するかユーザーに伝えます

Meshy API キー（3D のみ）： 3D の場合は、MESHY_API_KEY があるか確認します。ない場合は、ユーザーに（https://app.meshy.ai へのリンクとともに）尋ねます。モデル生成に使うため、キーを保存します。

ステップ 1：足場の構築と実装

インフラストラクチャ（メインスレッド）：

1. テンプレートディレクトリを見つけます — ~/.claude/plugins/cache/local-plugins/game-creator/*/templates/ またはこのプラグインからの相対パス templates/ を確認します
2. 対象ディレクトリ：game-creator リポジトリ内にいる場合は、examples/<game-name>/ に作成します。それ以外の場合は、./<game-name>/ に作成します。
3. テンプレートをコピーします：
   • 2D：templates/phaser-2d/ → 対象ディレクトリ
   • 3D：templates/threejs-3d/ → 対象ディレクトリ
4. package.json の名前と index.html のタイトルを更新します
5. npm install を実行します
6. 開発サーバーをバックグラウンドで起動します（npm run dev）。事前にポートの空き状況を確認します — 3000 が使用中の場合は、3001、3002 の順に試します。

ゲームの実装（Task 経由のサブエージェント）：

次の内容で Task サブエージェントを起動します：

クイックゲームのプロトタイプを作成します。最優先事項は速度です。プレイ可能なコアループを動作させてください。

プロジェクトパス：<project-dir> エンジン：<2d|3d> ゲームのコンセプト：<description> 読み込むスキル：phaser（2D）または threejs-game（3D）

次の順序で実装してください：

1. 入力（最初からタッチとキーボードに対応）
2. プレイヤーの移動／コアメカニクス
3. 失敗条件（死亡、衝突、タイマー）
4. スコアリング
5. 再スタートの流れ（GameState.reset() → 初期状態）

スコープ：シーン1つ、メカニクス1つ、失敗条件1つ。 簡潔に保ってください。

ルール：

• モジュール間の通信はすべて EventBus 経由にします
• マジックナンバーはすべて Constants.js にまとめます
• タイトル画面は設けず、ゲームプレイを直接開始します
• ゲーム内にスコア HUD は設けません — スコア表示は Play.fun ウィジェットが担当します
• モバイルファーストの入力：タッチとキーボードに対応し、統合型 InputSystem パターンを使用します
• Constants.js から SAFE_ZONE をインポートし、UI は SAFE_ZONE.TOP より下に配置します
• 収集アイテム／ハザードの幅は、キャンバス幅の最低7〜8%にします
• キャラクターのサイズ：キャラクター主導型のゲームでは GAME.WIDTH * 0.12 〜 GAME.WIDTH * 0.15 にします
• GameOverScene にあるテンプレートの createButton() ヘルパーを維持します — 書き直さないでください
• スペクタクルイベントを接続します：SPECTACLE_ENTRANCE、SPECTACLE_ACTION、SPECTACLE_HIT、SPECTACLE_COMBO、SPECTACLE_STREAK、SPECTACLE_NEAR_MISS
• 将来のオーディオ対応に備えて、GameState に isMuted を追加します
• 再スタートがクリーンに動作することを確認します — 3回連続で再スタートしても、毎回同じように動作する必要があります

ステップ 2：検証

サブエージェントの応答後：

1. プロジェクトディレクトリで npm run build を実行し、エラーがないことを確認します
2. ビルドに失敗した場合は、問題を修正します（再試行は最大 2 回）
3. Playwright MCP が利用可能な場合は、開発サーバーにアクセスし、スクリーンショットを撮って簡単に見た目を確認します

使用例

2D ゲーム

/quick-game 2d asteroid-dodge

結果：Phaser テンプレートをコピー → プレイヤーの船、隕石のスポーン、衝突時の死亡、スコアカウンター、再スタートの流れを実装 → 約 2 分で localhost:3000 で開発サーバーが起動します。図形のみで、仕上げの調整はありません。

ツイートから

/quick-game https://x.com/user/status/123456

結果：ツイートを取得 → ゲームのコンセプトを抽象化 → ツイートの内容に着想を得た、プレイ可能なプロトタイプを足場から構築して実装します。

トラブルシューティング

ゲームの足場は構築されるが、起動しない

原因： Vite の設定またはインポートパスが正しくありません。 修正： vite.config.js の root が正しいことを確認します。index.html で main.js が参照されていることを確認します。

コアファイルが見つからない

原因： 足場の構築時に EventBus/GameState/Constants が省略されました。 修正： すべてのゲームに core/EventBus.js、core/GameState.js、core/Constants.js が必要です。足場を再構築するか、手動で作成します。

完了

ユーザーに次のように伝えます。

ゲームは http://localhost:<port> で実行されています。ブラウザーで開いてプレイしてください！

開発を続けるには、次のコマンドを実行してください：

• /add-assets — 図形をピクセルアートのスプライトに置き換える
• /design-game — ビジュアルを磨く（パーティクル、グラデーション、ゲームらしい手応え）
• /add-audio — 音楽と効果音を追加する
• /game-deploy — ウェブにデプロイする
• /monetize-game — Play.fun との連携を追加する

または、次回 /viral-game を実行すると、すべてを一度に行うパイプライン（アセット、仕上げ、デプロイ、収益化）を利用できます。