この記事はAICU国際ゲーム開発事業部「AICU Games」がCodexを使ったAIを使ったゲーム開発ノウハウを共有するものです。キャラクター素材は、AICUのコラボクリエイター「Torako」さんが描いた「Hakase」の1枚絵を参照画像として、CodexアプリのImageGenワークフローでゲーム用スプライトを制作していきます。
こちらも併せてどうぞ【保存版】OpenAI公式資料で学ぶ! Codexを使ったゲーム開発入門：ブラウザで遊べる最初の1本を作る
https://note.com/aicu/n/n0af2c2714099
生成AI時代にブラウザゲームを作るなら、最初からUnityやUnreal Engineを開いて挫折する必要はありません。まずはCodexアプリとImageGenを使って、小さな2Dキャラクター素材を作り、PhaserやCanvasのゲームループへ渡せる形にするのが実用的です。
今回作ったのは、AICUのドクター風ちびキャラ「Torako」のゲーム用スプライトです。参照画像をCodexアプリに添付し、「背景透明にして表情バリエーションを作って」から始め、最終的には idle、get、gameover、walkcycle までを 256 x 256 セルのスプライトシートに整理しました。
Codexアプリの内蔵プラグインImageGen ($imagegen) は、通常の画像生成・編集ではAPIキーを直接設定しなくても使えます。ただし、無料・無制限という意味ではありません。CodexやChatGPT側の利用上限、プラン、クレジット、提供状況に依存します。大量生成やAPI/CLI経由での生成では OPENAI_API_KEY が必要になり、API料金が適用されます。
参照画像は、Codexアプリでは画像添付やドラッグ＆ドロップ、CLIではローカル画像ファイル指定で使うのが基本です。URL画像を参照したい場合は、まずローカルに保存してから参照画像として渡すほうが確実です。
背景透明化については注意が必要です。OpenAI公式ドキュメントでは、gpt-image-2 は現在 background: "transparent" をサポートしない と説明されています。そこで今回は、いったん単色グリーンバックで生成し、ローカルのクロマキー除去で透明PNGへ変換しました。真の透明背景が必要な場合だけ、確認のうえで透明背景に対応する別モデルやCLI経路を使う設計が安全です。 参照:OpenAI Image generation guide, OpenAI API pricing
Codexアプリ版での作業はシンプルです。キャラクター画像をアップロードして、次のように依頼します。
$imagegen で背景透明にして表情バリエーションを作って
生成後、Codexは画像を `$CODEX_HOME/generated_images/` 配下に保存します。背景透明PNGファイルが生成されています。
次に、次のようなプロンプトで歩行スプライトシートを作りました。
上下左右・静止・移動用の歩行スプライトシートを作って
初回は次のような仕様でした。
この段階では、見た目の方向別素材としては使えます。しかしゲーム内の歩行アニメとして見ると、静止 + 歩き3枚 は弱いです。実運用では idle を別扱いにし、歩行は 右足接地 -> 中間 -> 左足接地 -> 中間 の最低でも4フレームループにしたほうがよさそうです。
歩きのアニメーションも大事ですが、移動していない状態のほうがゲームでは印象に残ります。そこで非移動状態と歩行状態を分けて生成しましょう。以下のようなプロンプトを使ってみましょう。
移動していない静止状態の方が重要なので、各向きの立ち姿勢「idle」と「get」「gameover」を2枚づつ合計6枚生成。上下左右の移動状態は歩行アニメーションのループ（walkcycle）とし、キャラクターの「右足が出るポーズ」と「左足が出るポーズ」を繋げて無限に繰り返すアニメーション手法です。自然なループを作るには、手足の動きと連動する「腰の上下・左右の揺れ」を滑らかに繋ぐ
自然なループを作るには、手足だけでなく、腰の上下・左右の揺れが滑らかにつながる必要があります。生成AIに一発で完全な歩行を出させるよりも、まずシートを生成し、GIFやブラウザで再生し、怪しいコマをローカル加工で直していきます。このようなツールはCodexが自動生成してくれます。
プレビューHTMLで確認したところ、次の問題がありました。
以下のようにCodexのプロンプトで修正できます。
・右向きは耳が切れていました(トリミング失敗)→左の歩行はうまく行ってるのでそれを左右鏡像にして採用しましょう。
・「idle / 右」、「get / 右」も同様に耳が切れているので左を鏡像にして使ってください。
・下方向の歩行は顔を中心に固定してください（トリミングが怪しい）
・getは「get / 下」のみを採用します
・gameoverは「gameover / 下」のみを採用します
・生成に使った中間のプロンプトを残し、スプライトシートとしての仕様書を残してください。
修正方針のテクニックとしては、①左右の歩行パターンで破綻した場合は画像を再生成せず、既に良かった側を使えばいい。②複数の向きの表情をつくり、最も良いものを採用する、という方針です。実際のところ、右向きwalkは、左向きwalkを左右鏡像にして採用すればいいキャラクターデザインが多くあります。またトリミングに失敗することがあるので、「上半身・頭部の重心をそろえて顔位置を補正」といった指定も必要になったりします（どこを固定にして、どこを動かすかはGIFを見て判断します）。この工程はPython/Pillowによるローカル処理です。追加の画像生成コストは発生しません。
Codexアプリの built-in `imagegen` は、こちらの画面には実トークン明細を返しません。正確な請求額はAPI利用時の usage dashboard などで確認します。今回の作業で実際に画像生成した主な回数は5回です。
・表情バリエーション
・初回歩行シート
・idle + walk4 master
・idle/get/gameover state sheet
・dedicated walkcycle sheet
1 USD = 158円で概算すると、画像出力分だけなら
・Medium $0.265 = 約42円
・High $1.055 = 約167円
参照画像入力や長いプロンプト分を足すと、実際の総額はこれより少し増えます。初回の記事例のように表情シートと歩行シートだけなら2生成なので、Mediumで約17円、Highで約67円が画像出力分の目安です。
なお、APIはChatGPT/Codexのサブスクとは別課金扱いです（出典: OpenAI pricing FAQ）。
CodexアプリとImageGenを組み合わせると、参照画像からゲーム用の2Dスプライトをかなり短時間で作れます。ただし、生成画像をそのままゲームに入れるのではなく、透明化、セル分割、正規化、GIFプレビュー、レビュー修正までをワークフローに含める必要があります。
今回の重要な学びは、右向きが壊れたら良い左向きを鏡像にする、下方向の歩行は顔位置を固定して確認する、`get` や `gameover` は最初から全方向を無理に採用しない、という点です。生成AIは素材の初速を上げますが、ゲーム素材として「まだ7割の出来」です。本当に人が心を動かしたり、お金を払いたいと思うものは、どのようなものでしょうか。前回のサンプルで示したような「誰もが作れる簡単なゲーム」ではなく「まだ誰もみたことがないゲーム」だったり、「ちょっと難しそうだけどやってみたい」だったり、「細部の作り込みに神が宿っている！」といったゲームだったりします。今回の例で言えば、最後はスプライトシートとしての設計と検証、そして細部に関してはPhotoshopやドットエディターを使って修正する覚悟が大事だと思います。
良いゲームができたら AICU Gamesに投稿してください！
Originally published at note.com/aicu on May 27, 2026.
