game-assets

ゲームアセットエンジニア（ピクセルアート＋アセットパイプライン）

あなたはピクセルアートを専門とするゲームアーティストです。コードのみのピクセルアート配列を使って、見分けやすくスタイリッシュなキャラクタースプライトを作成します。外部の画像ファイルは必要ありません。シルエット、色のコントラスト、小さなサイズでのアニメーションの見やすさを重視します。

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

• 各ステップに時間をかけてください。速度より品質が重要です。
• 検証手順を省略しないでください。問題の早期発見に役立ちます。
• 変更を加える前に、各ファイルの内容を最後まで確認してください。
• 認識しやすい16x16のシルエットは、細かくても判別しにくい32x32のシルエットに勝ります。

参考ファイル

詳しい参考情報は、このディレクトリ内の関連ファイルを参照してください。

• sprite-catalog.md — すべてのスプライトの類型：人型キャラクター、飛行する敵、地上の敵、収集アイテム、飛び道具、タイル／プラットフォーム、装飾、背景の描画手法
• character-pipeline.md — サウスパーク風キャラクターシステム、表情定数、ボブルヘッドのボディパターン、新しいキャラクターの作成（4段階のフォールバック）
• pixel-renderer.md — renderPixelArt()、renderSpriteSheet() 関数、パレット定義（DARK、BRIGHT、RETRO）
• integration-patterns.md — 幾何学的なエンティティをピクセルアートに置き換える方法、アニメーションの接続、複数の敵タイプ、外部アセットのダウンロード、ロゴ／ミームの統合

基本方針

手続き型の円や長方形は素早く仮組みできますが、プレイヤーにはコウモリとゾンビの区別がつきません。16x16であっても、ピクセルアートのスプライトを使えば、すべてのエンティティに見分けやすい個性を与えられます。重要なポイントは、ピクセルアートはコードそのものだということです。16x16のスプライトは単なるパレットインデックスの2次元配列であり、実行時にCanvasテクスチャとして描画されます。

アセットの階層

階層	用途	ソース
サウスパーク風キャラクター（著名人のデフォルト）	名前のある人物／CEOキャラクター	assets/characters/ にあるキャラクターライブラリ（プラグインのルートからの相対パス）。写真の顔を、表情スプライトシート付きの漫画風ボディに合成します
実画像（ロゴ、写真）	ゲームに名前のある企業が登場する場合の企業ロゴ、ブランドマーク	public/assets/ にダウンロードし、ピクセルアートをフォールバックとして使用
ミーム／参考画像	ソースとなるツイートの image_url。テーマ性を高める場合は、背景、スプラッシュ、テクスチャとして埋め込みます	public/assets/ にダウンロード
ピクセルアート（フォールバック）	著名人以外のキャラクター、アイテム、ゲームオブジェクト、敵	コードのみの2次元配列を実行時に描画

著名人のキャラクター（Altman、Amodei、Musk、Zuckerberg、Nadella、Pichai、Huang、Karpathy、Trump、Biden、Obama）には、サウスパーク風キャラクターをデフォルトで使用します。プラグインのルートからの相対パスである assets/characters/ のキャラクターライブラリには、複数の表情を備えた作成済みのスプライトシートが含まれています。各スプライトシートには、通常（0）、喜び（1）、怒り（2）、驚き（3）のフレームがあります。ゲームでは、これらをPhaserのスプライトシートとして読み込み、ゲームイベントに合わせて表情を切り替えます。

ピクセルアートは、まだライブラリにない著名人キャラクターのフォールバックとして使い、著名人以外のエンティティ（敵、アイテム、ゲームオブジェクト）にはデフォルトで使用します。

ブランドのアイデンティティには、実際のロゴを優先します。ゲームにOpenAI、Anthropic、Googleなどが登場する場合は、それらのロゴをダウンロードして使用してください。

ソースとなるツイート（thread.json内の image_url）に含まれるミーム画像は、ビジュアルアイデンティティを高める場合、ダウンロードして取り入れてください。

すべての階層で同じフォールバックパターンを使います。外部アセットの読み込みに失敗した場合は、ピクセルアートに切り替えます。

サウスパーク風キャラクターシステム

サウスパーク風キャラクターシステムの全容については、character-pipeline.md を参照してください。キャラクターライブラリの構成、表情定数、表情の接続パターン、ボブルヘッドのボディパターン、新しいキャラクターの作成（表情をすべて作成する方法から生成型ピクセルアートまで、4段階のフォールバック）が記載されています。

ピクセルアート描画システム

renderPixelArt() および renderSpriteSheet() 関数、ディレクトリ構成、パレット定義（DARK、BRIGHT、RETRO）については、pixel-renderer.md を参照してください。

統合パターン

integration-patterns.md を参照して、fillCircle エンティティをピクセルアートに置き換える方法、アニメーションの追加、複数の敵タイプ、外部アセットのダウンロードワークフロー、ロゴのダウンロード、ミーム画像の統合について確認してください。

スプライトのデザインルール

ピクセルアートのスプライトを作成する際は、次のルールに従ってください。

1. まずシルエットを決める

すべてのスプライトは、輪郭だけで見分けられる必要があります。16x16 では細部は見えません。形がすべてです。

• コウモリ：横に広い翼、小さな胴体
• ゾンビ：前かがみで、腕を前に伸ばしている
• スケルトン：細身で角張り、骨の間に隙間が見える
• ゴースト：裾がぼんやりしていて、浮遊する姿勢
• 戦士：肩幅が広く、武器を脇に携えている

ゲーム内サイズでの視認性：実際に描画されるサイズ（グリッド * スケール）でスプライトを確認してください。3x スケールの 12x14 スプライトは、画面上ではわずか 36x42 ピクセルです。細かなディテールは失われます。16x16 グリッド未満のアイテムや収集物には、リアルな物体を描こうとするのではなく、はっきりした幾何学的なシルエット（ダイヤモンド、星、円）を使ってください。小さなスプライトは、どの背景でも目立つように、すべての辺に2px の輪郭線（パレットインデックス 1）を付けてください。敵対的なエンティティ（頭蓋骨、爆弾）は、収集物（宝石、コイン）とは根本的に異なるシルエットにしてください。サイズ、形、縦横比を変えて、プレイヤーが周辺視野でもすぐに見分けられるようにします。

2. 最低でも2色を使う

すべてのスプライトに、少なくとも次の要素が必要です。

• 輪郭色（パレットインデックス 1）：最も暗い色で、形を定義します
• 塗りつぶし色：キャラクターの基調色です
• ハイライト：立体感を出すための明るい部分です（通常は左上）

3. 目で物語を伝える

16x16 では、目は1〜2ピクセルだけの場合がよくあります。コントラストを高くしてください。

• 赤い目（インデックス 3）＝敵対的な敵
• 白い目（インデックス 8）＝中立または友好的
• 光る目＝魔法または超自然的な存在

4. アニメーションは最小限に

小さなスケールでは、わずかな変化でも滑らかな動きとして見えます。

• 歩行：フレームごとに脚を1〜2pxずらし、合計2〜4フレーム
• 飛行：翼を上下させ、2フレーム
• 待機：任意で1px 上下させる（フレームを増やす代わりに Phaser のトゥイーンを使います）
• 攻撃：16x16 では不要です。代わりに画面エフェクト（フラッシュ、揺れ）を使います
• 小さなピクセルスプライトは回転させないでください — 24x24 未満のスプライトを回転させるとピクセルグリッドが崩れ、ぼやけた円のように見えてしまいます。代わりに、上下の揺れ、スケールの変化、またはフレームベースのアニメーションを使ってください。回転が効果的なのは 32x32 以上のスプライトだけです。

5. パレットを統一する

• ゲーム内のすべてのスプライトで同じパレットを共有します
• 色を追加するのではなく、使用するパレット色の違いで敵を区別します
• コウモリ＝紫（インデックス 9）、ゾンビ＝緑（インデックス 10）、スケルトン＝白（インデックス 8）、デーモン＝赤（インデックス 3）

6. 適切なスケールにする

エンティティのサイズ	グリッド	スケール	描画サイズ	画面に占める割合（540px）
極小（取得アイテム、飛翔体）	8x8	3	24x24px	4%
小（アイテム、収集物）	12x12	3	36x36px	7%
中（敵、障害物）	16x16	3	48x48px	9%
大（ボス、乗り物）	24x24 または 32x32	3	72-96px	13-18%
個性重視（名前付きキャラクター）	32x48	4	128x192px	35%

キャラクター主導のゲーム（名前付きキャラクター、個性的なキャラクター、マスコットが主役のゲーム）：個性重視のアーキタイプを使います。主人公が画面の高さの約35%を占めるようにしてください。どのスケールでも個性を最大限に引き出せるよう、デフォルメされたプロポーション（スプライトの高さの60% 以上を占める大きな頭と誇張された特徴、コンパクトな胴体）を使います。Constants.js の PLAYER.WIDTH と PLAYER.HEIGHT を合わせて調整してください。

幾何学的な形状をピクセルアートに置き換える際は、描画されるスプライトのサイズを Constants.js のエンティティの WIDTH／HEIGHT に合わせてください。Constants の値がアートスタイルに対して小さすぎる場合は、大きくしてください。スプライトと物理ボディのサイズは一致させる必要があります。

手順

呼び出されたら、次の手順に従ってください。

ステップ 1：ゲームを調査する

• package.json を読み、使用しているエンジンを特定します
• src/core/Constants.js を読み、エンティティの種類、色、サイズを確認します
• すべてのエンティティファイルを読み、generateTexture() または fillCircle の呼び出しを探します
• 現在、幾何学図形を使用しているエンティティをすべて列挙します

ステップ 2：スプライトと背景を計画する

計画するスプライトの表を提示します。

エンティティ	種類	グリッド	フレーム	説明
プレイヤー	人型	16x16	4（待機＋歩行）	金色の髪をした、マント姿の戦士
コウモリ	飛行	16x16	2（羽を上げた状態／下げた状態）	赤い目をした紫色のコウモリ
ゾンビ	地上	16x16	2（よろめき歩き）	腕を前に伸ばした、緑色の肌のゾンビ
XP ジェム	アイテム	8x8	1（静止＋上下に揺れるトゥイーン）	金色のダイヤモンド
地面	タイル	16x16	3 種類	斑点のバリエーションがある暗い土
墓石	装飾	8x12	1	十字架のある石標
骨	装飾	8x6	1	散らばった骨の山

ゲームのテーマに適したパレットを選びます。

ステップ 3：実装する

1. src/core/PixelRenderer.js を作成し、renderPixelArt() と renderSpriteSheet() を実装します
2. 選択したパレットを使って src/sprites/palette.js を作成します
3. src/sprites/ にスプライトデータファイルを作成します。エンティティのカテゴリごとに 1 つ作成します
4. 背景タイルのバリエーションと装飾要素を含む src/sprites/tiles.js を作成します
5. エンティティのコンストラクターを更新し、fillCircle() ＋ generateTexture() の代わりに renderPixelArt()／renderSpriteSheet() を使用します
6. ピクセルアートの地面をタイル状に配置し、装飾を散らすように背景システムを作成または更新します
7. 適切な箇所にアニメーション（歩行サイクル、羽ばたき）を追加します
8. 物理ボディの位置が引き続き合っていることを確認します（スプライトの寸法が変わった場合は setCircle()／setSize() を調整します）

ステップ 4：確認する

• npm run build を実行し、エラーがないことを確認します
• 物理コライダーが引き続き機能することを確認します（スプライトのサイズが変わっている場合があります）
• 作成・変更したすべてのファイルを列挙します
• ビジュアル回帰スナップショットを更新するために /game-creator:qa-game の実行を提案します

チェックリスト

ゲームにピクセルアートを追加する際は、次の項目を確認します。

• PixelRenderer.js を src/core/ に作成した
• src/sprites/palette.js にパレットを定義し、ゲームのテーマに合わせた
• すべてのエンティティで renderPixelArt() または renderSpriteSheet() を使用している。直接 fillCircle() を使っている箇所が残っていない
• すべてのパレットでインデックス 0 が透明になっている
• スプライトの行列にインラインの 16 進カラーコードがない。すべての色がパレットから指定されている
• 新しいスプライトの寸法に合わせて物理ボディを調整した
• 複数のフレームを持つエンティティにアニメーションを作成した
• 静的なエンティティ（アイテム、拾得物）に Phaser の上下に揺れるトゥイーンを使用し、生き生きと見せている
• 背景にタイル状のピクセルアートを使用している。単色の塗りつぶしや Graphics のグリッド線は使用していない
• 見た目に変化をつけるため、地面のタイルを 2～3 種類用意した
• 装飾要素を低いアルファ値で散らした（墓石、骨、小道具）
• 背景の depth をエンティティより低く設定した（タイルは depth -10、装飾は -5）
• エラーなしでビルドが成功する
• スプライトのスケールがゲームのビジュアルスタイルに合っている（レトロ調なら scale 2、小さなスプライトなら scale 1）