2d-games

2D ゲーム開発

2D ゲームシステムの原則です。フレームワークの選定には、game-development/web-games / game-development/engine-selection と併用してください。

---

シェルとゲスト（Web）

セットアップ	2D システムの配置先…
全画面の2Dゲーム	アプリ全体（Phaser/Kaplay/Pixi/Canvas）
DOM とチャレンジのハイブリッド	ゲストビューポート内のみ。完了したら破棄

---

1. スプライトシステム

コンポーネント	目的
アトラス	テクスチャをまとめ、ドローコールを削減
アニメーション	フレームシーケンス（多くの場合8〜24 FPS）
ピボット	回転・拡大縮小の原点
レイヤー	Zオーダーの制御

アニメーションの原則

• インパクトを出すためのスクワッシュとストレッチ
• 動作の前に予備動作を入れる
• 動作後にフォロースルーを入れる

---

2. タイルマップの設計

要素	推奨事項
サイズ	16x16、32x32、64x64
オートタイル	地形に使用
コリジョン	単純化した形状

レイヤー	内容
背景	インタラクティブではない景色
地形	歩行可能な地面
小道具	インタラクティブなオブジェクト
前景	視差オーバーレイ

---

3. 2D物理演算

形状	用途
ボックス	長方形のオブジェクト
円	ボール、丸みのある物体
カプセル	キャラクター
ポリゴン	複雑な形状

• メカニクスごとに移動・コリジョンモデルを選びます。ピクセルアートの描画と物理演算は共存できます
• 一貫性を保つため、固定タイムステップを使用します
• フィルタリングにはレイヤーを使用します

---

4. カメラシステム

タイプ	用途
追従	プレイヤーを追跡
先読み	動きを予測
複数ターゲット	2人プレイ
部屋単位	メトロイドヴァニア
固定	ボードゲーム、モーダル形式のスキルチェック

画面シェイク

• 短い時間（50〜200ms）
• 徐々に強度を弱める
• 使いすぎない

---

5. ジャンル別のパターン

プラットフォーマー

• コヨーテタイム（足場の端を過ぎた後の猶予）
• ジャンプバッファリング
• 可変ジャンプ高度

トップダウン

• 8方向または自由移動
• エイムベースまたはオートエイム
• 回転が重要かどうかを決める

---

6. アンチパターン

❌ しないこと	✅ すること
テクスチャを分ける	アトラスを使用する
複雑なコリジョン形状	単純化したコリジョン
ぶれるカメラ	滑らかな追従
移動と物理演算の連携が取れていない	各ボディの制御元を1つに定める
ゲスト終了後に残る孤立したRAF/リスナー	完全に破棄する

---

覚えておいてください： 2Dでは明瞭さが重要です。すべてのピクセルが意味を伝える必要があります。

使用する場面

Canvas/Phaser/Kaplay/Pixiの2Dシステム、またはハイブリッドWebアプリ内のゲストビューポートに使用します。

例

ユーザーのリクエスト：

固定物理タイムステップを維持し、角への衝突をテストしながら、プラットフォーマーにコヨーテタイムとジャンプバッファリングを追加してください。

制限事項

• 上記の説明にある範囲に明確に該当するタスクにのみ、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を止めて確認してください。