Need
Web ゲームの技術スタック
Why it's needed
ブラウザゲームの UI と描画処理の両方を実装するのに適した構成です。
.md to the page URL.
Codex use case
ゲームの開発計画を立て、実装とブラウザでの動作テストを Codex に任せます。
Codex を使ってゲームの企画を具体的な開発計画にまとめ、それに沿ってブラウザで遊べるゲームを作ります。画像素材は imagegen で生成し、Codex にブラウザでゲームをテストしてもらいながら、操作性と UI を改善します。
ゲームの開発計画を立て、実装とブラウザでの動作テストを Codex に任せます。
Codex を使ってゲームの企画を具体的な開発計画にまとめ、それに沿ってブラウザで遊べるゲームを作ります。画像素材は imagegen で生成し、Codex にブラウザでゲームをテストしてもらいながら、操作性と UI を改善します。
Codex を使ってゲームの企画を具体的な開発計画にまとめ、それに沿ってブラウザで遊べるゲームを作ります。画像素材は imagegen で生成し、Codex にブラウザでゲームをテストしてもらいながら、操作性と UI を改善します。
Related links
| Skill | Why use it |
|---|---|
| Playwright | 開発中のゲームをブラウザで実際にプレイし、動作を確かめながら、操作性やタイミング、UI の使い心地を繰り返し調整します。 |
| ImageGen | コンセプトアート、スプライト、背景、UI 素材を生成します。使ったプロンプトは、次に素材をまとめて生成するときにも使えるように保存します。 |
| OpenAI Docs | OpenAI を活用した機能をゲームに組み込む前に、最新の公式ドキュメントを確認します。 |
ゲーム開発は、Codex がコード生成以外でも役立つことを実感しやすい例です。実際にゲームを作るには、通常、コンセプトを文章にまとめ、描画レイヤーやフロントエンドの骨組みを作り、バックエンドで状態を管理する必要があります。さらに、素材を制作し、見た目を繰り返し調整します。
ゲーム開発では、まず Codex にゲームの仕様を具体的に書き出してもらうと効果的です。その後、Codex は Playwright interactive を使い、実際のブラウザでゲームをテストしながら改良を重ねます。
Codex がプロジェクトのひな形を作る前に、次の項目を具体的に定めた PLAN.md を作成するよう依頼します。
「ゲームを作ってください」という指示だけでは曖昧すぎるため、開発計画が重要です。Codex はゲームの各部分をどう実装するか把握しておく必要があり、開発中も実装の詳細をたびたび参照します。
/plan スラッシュコマンドでプランモードを有効にできます。
出力された計画を PLAN.md ファイルに保存します。
Codex が計画に沿って作業し、結果を検証し、適切なツールを使うように、次の例を参考に AGENTS.md を作成します。
# ゲーム名
<Type of game>
技術スタック:
- フロントエンドには NextJS を使用(Vercel でホスト)
- 描画には <insert technology> を使用
- バックエンドと WebSocket 通信には Fastify を使用(<hosting platform> でホスト)
- データベースには Postgres を使用(<hosting platform> でホスト)
- キャッシュと pub/sub には Redis を使用(<hosting platform> でホスト)
- 生成 AI 機能には OpenAI を使用
作業の指針:
- 機能の実装やタスクを終えたら、その都度すぐにビルドコマンドとテストコマンドを実行して、作業結果を検証してください。
- 新機能の実装は PLAN.md に沿って進めてください。
- 作業内容に加え、どのように考え、何を決めたかを .logs 配下に記録してください。必要に応じて新しいログファイルを作成し、機能を改良する際にはその記録を参照してください。
- playwright で実装結果の見た目を確認してください。表示に問題がある場合や、意図した雰囲気に合わない場合は、調整と確認を繰り返してください。
- ビジュアル素材の生成には imagegen を使ってください。後から同じスタイルの素材を追加で生成できるよう、一連の素材を生成するたびに .prompts 配下にファイルを作成し、使ったプロンプトを保存してください。
- Context7 MCP を使って <rendering framework> のドキュメントを取得してください。
こうして指示をまとめておくと、Codex は必要に応じて適切なスキルを使いながら、長時間自律的に作業を進められます。
AGENTS.md ファイルに記載したスキルを追加します。
スキルの追加方法については、スキルのドキュメントを参照してください。
ヒント:ビジュアル素材のスタイルを統一するために、画像生成に使ったプロンプトをファイルに保存するよう Codex に依頼します。作りたい素材のスタイルを伝え、再利用できる詳細なプロンプトの作成は Codex に任せます。
Codex は最初の計画に基づいて、ゲームの初版を作成します。
生成する画像素材が多い場合、初版の完成までに数時間かかることもあります。Codex は実装した内容をテストし、実際のブラウザでゲームを試せるため、追加の指示がなくても長時間作業を続けられます。
計画が具体的であるほど、最初の開発サイクルで完成度の高いゲームができます。
実際にプレイしながら、必要に応じてスクリーンショットを共有したり、ゲームプレイの変更やビジュアル素材の更新を依頼したりして、納得のいく仕上がりになるまで改良を重ねます。
Need
Default options
Why it's needed
Need
Web ゲームの技術スタック
Why it's needed
ブラウザゲームの UI と描画処理の両方を実装するのに適した構成です。
Need
バックエンドの技術スタック
Why it's needed
データの永続化、マッチメイキング、ランキング、Pub/Sub などが必要なゲームに適した構成です。