design-game

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

• 時間をかけて、丁寧に作業してください
• 速度より品質を優先してください
• 検証手順を省略しないでください

ゲームのデザイン

既存のゲームに UI/UX デザインを適用して、ビジュアル、雰囲気、ゲームの手触りを改善します。デザインの経験は必要ありません。このコマンドがゲームを分析し、実績のあるビジュアルパターンを適用します。

手順

$ARGUMENTS に指定されたゲーム（パスが指定されていない場合は現在のディレクトリ）を分析します。

まず、ゲームデザイナーのスキルを読み込んで、デザインに関する語彙とパターンをすべて把握します。

ステップ 1：監査

• package.json を読み込み、エンジンを特定します
• src/core/Constants.js を読み込み、現在のカラーパレットと設定を確認します
• すべてのシーンファイルを読み込み、現在のビジュアルを把握します
• エンティティファイルを読み込み、ゲームオブジェクトの描画方法を確認します
• src/core/EventBus.js を読み込み、既存のイベントを確認します

ステップ 2：デザインレポート

各項目を 1～5 で評価し、表にまとめます。

項目	スコア	備考
背景と雰囲気
カラーパレット
アニメーションとトゥイーン
パーティクルエフェクト
画面遷移
タイポグラフィ
ゲームの手触り／演出
ゲームオーバー
表情の活用		個性を持つキャラクターがいる場合、ゲームイベントに応じて表情がどれほど反応的に変化するかを評価します。表情がまったく変化しない場合は 1 とします。

次に、ビジュアルへの影響が大きい順に改善案を列挙し、それぞれがどのような効果をもたらすか、平易な言葉で説明します（例：「空のグラデーションを追加し、背景を単色ではなく本物の空のように見せる」）。

ステップ 3：実装

どの改善案を適用するかユーザーに尋ねます。すべて適用するよう指示された場合は、すべて実装します。ゲームデザイナーのスキルにあるパターンに従います。

1. 追加する値はすべて Constants.js に記述します
2. エフェクトのトリガーには EventBus を使用します
3. ゲームプレイ（物理演算、スコア、操作方法、スポーンのタイミング）は変更しません
4. プロシージャルグラフィックスを優先します
5. 新しいファイルは適切なディレクトリに配置します

ステップ 4：検証

• npm run build を実行して、エラーがないことを確認します
• 加えた変更をすべて平易な言葉で要約します

使用例

デザインを全面的に適用

/design-game examples/asteroid-dodge

結果：ビジュアルを監査 → 背景 2/5、パーティクル 1/5、タイポグラフィ 3/5 と評価 → 空のグラデーション背景、星の視差効果、隕石破壊時の爆発パーティクル、被弾時の画面揺れ、滑らかなシーン遷移を追加。すべての値は Constants.js に記述します。

トラブルシューティング

ビジュアルの変更によってパフォーマンスが低下する

原因： パーティクルエミッターが多すぎるか、フレームごとにグラデーションを塗りつぶしています。 対処法： アクティブなパーティクルの数を制限します（プールして再利用します）。フレームごとに再作成する代わりに、キャッシュ済みのグラデーションテクスチャを使用します。

デザインの変更によって、画面サイズが異なるとレイアウトが崩れる

原因： PX スケール係数を使用せず、ピクセル位置をハードコードしています。 対処法： すべての位置とサイズに、Constants.js の PX 相対値を使用します。

次のステップ

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

ゲームがぐっと良くなりました！次に、/game-creator:add-audio を実行して、チップチューンの BGM とレトロな効果音を追加しましょう。すべてプロシージャルに生成されるため、音声ファイルは必要ありません。

パイプラインの進捗： /viral-game → /design-game → /add-audio → /qa-game → /review-game

(これは /viral-game のワンショットパイプラインです。複数セッションでマイルストーンに沿って進める /make-game のワークフローではありません。)