For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
メインナビゲーション
Theme
Codex

Codex use case

ブラウザゲームの開発

ゲームの開発計画を立て、実装とブラウザでの動作テストを Codex に任せます。

Difficulty Intermediate
Time horizon Long-running

Codex を使ってゲームの企画を具体的な開発計画にまとめ、それに沿ってブラウザで遊べるゲームを作ります。画像素材は imagegen で生成し、Codex にブラウザでゲームをテストしてもらいながら、操作性と UI を改善します。

Best for

  • ゼロからのブラウザゲーム開発
  • 操作性、見た目、デプロイ手順のすべてでテストと調整を繰り返す必要があるゲーム開発

Contents

    ← All use cases

    ブラウザゲームの開発

    ゲームの開発計画を立て、実装とブラウザでの動作テストを Codex に任せます。

    Codex を使ってゲームの企画を具体的な開発計画にまとめ、それに沿ってブラウザで遊べるゲームを作ります。画像素材は imagegen で生成し、Codex にブラウザでゲームをテストしてもらいながら、操作性と UI を改善します。

    Intermediate
    Long-running

    Codex を使ってゲームの企画を具体的な開発計画にまとめ、それに沿ってブラウザで遊べるゲームを作ります。画像素材は imagegen で生成し、Codex にブラウザでゲームをテストしてもらいながら、操作性と UI を改善します。

    Intermediate
    Long-running

    Best for

    • ゼロからのブラウザゲーム開発
    • 操作性、見た目、デプロイ手順のすべてでテストと調整を繰り返す必要があるゲーム開発

    Skills & Plugins

    • 開発中のゲームをブラウザで実際にプレイし、動作を確かめながら、操作性やタイミング、UI の使い心地を繰り返し調整します。
    • ImageGen
      コンセプトアート、スプライト、背景、UI 素材を生成します。使ったプロンプトは、次に素材をまとめて生成するときにも使えるように保存します。
    • OpenAI を活用した機能をゲームに組み込む前に、最新の公式ドキュメントを確認します。
    Skill Why use it
    Playwright 開発中のゲームをブラウザで実際にプレイし、動作を確かめながら、操作性やタイミング、UI の使い心地を繰り返し調整します。
    ImageGen コンセプトアート、スプライト、背景、UI 素材を生成します。使ったプロンプトは、次に素材をまとめて生成するときにも使えるように保存します。
    OpenAI Docs OpenAI を活用した機能をゲームに組み込む前に、最新の公式ドキュメントを確認します。

    Starter prompt

    $playwright-interactive、$imagegen、$openai-docs を使って、このリポジトリでブラウザゲームの開発計画を立て、ゲームを作ってください。 PLAN.md に沿って実装し、作業ログを `.logs/` 以下に保存してください。
    $playwright-interactive、$imagegen、$openai-docs を使って、このリポジトリでブラウザゲームの開発計画を立て、ゲームを作ってください。 PLAN.md に沿って実装し、作業ログを `.logs/` 以下に保存してください。

    はじめに

    ゲーム開発は、Codex がコード生成以外でも役立つことを実感しやすい例です。実際にゲームを作るには、通常、コンセプトを文章にまとめ、描画レイヤーやフロントエンドの骨組みを作り、バックエンドで状態を管理する必要があります。さらに、素材を制作し、見た目を繰り返し調整します。

    ゲーム開発では、まず Codex にゲームの仕様を具体的に書き出してもらうと効果的です。その後、Codex は Playwright interactive を使い、実際のブラウザでゲームをテストしながら改良を重ねます。

    ゲームの開発計画

    Codex がプロジェクトのひな形を作る前に、次の項目を具体的に定めた PLAN.md を作成するよう依頼します。

    • プレイヤーの目標
    • ゲームのメインループ
    • 入力と操作方法
    • 勝利条件と失敗条件
    • ゲームの進行や難易度
    • ビジュアルの方向性
    • 想定する技術スタックとホスティング環境
    • 各マイルストーンに取り組む順序

    「ゲームを作ってください」という指示だけでは曖昧すぎるため、開発計画が重要です。Codex はゲームの各部分をどう実装するか把握しておく必要があり、開発中も実装の詳細をたびたび参照します。

    /plan スラッシュコマンドでプランモードを有効にできます。 出力された計画を PLAN.md ファイルに保存します。

    AGENTS.md による Codex への指示

    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 ファイルに記載したスキルを追加します。

    • Imagegen:必要に応じてゲーム用のビジュアル素材を生成するためのスキル
    • Playwright interactive:実際のブラウザでゲームをテストするためのスキル
    • OpenAI docs:OpenAI API の最新ドキュメントを取得するためのスキル
    • 描画フレームワークの最新ドキュメントを取得したい場合は、Context7 MCP サーバーも追加できます。

    スキルの追加方法については、スキルのドキュメントを参照してください。

    ヒント:ビジュアル素材のスタイルを統一するために、画像生成に使ったプロンプトをファイルに保存するよう Codex に依頼します。作りたい素材のスタイルを伝え、再利用できる詳細なプロンプトの作成は Codex に任せます。

    Codex による実装と改良

    Codex は最初の計画に基づいて、ゲームの初版を作成します。

    生成する画像素材が多い場合、初版の完成までに数時間かかることもあります。Codex は実装した内容をテストし、実際のブラウザでゲームを試せるため、追加の指示がなくても長時間作業を続けられます。

    計画が具体的であるほど、最初の開発サイクルで完成度の高いゲームができます。

    実際にプレイしながら、必要に応じてスクリーンショットを共有したり、ゲームプレイの変更やビジュアル素材の更新を依頼したりして、納得のいく仕上がりになるまで改良を重ねます。

    Tech stack

    Need

    Web ゲームの技術スタック

    Default options

    Next.js と Phaser または PixiJS の組み合わせ

    Why it's needed

    ブラウザゲームの UI と描画処理の両方を実装するのに適した構成です。

    Need

    バックエンドの技術スタック

    Default options

    Fastify 、WebSockets、 Postgres 、 Redis

    Why it's needed

    データの永続化、マッチメイキング、ランキング、Pub/Sub などが必要なゲームに適した構成です。

    Need Default options Why it's needed
    Web ゲームの技術スタック Next.js と Phaser または PixiJS の組み合わせ ブラウザゲームの UI と描画処理の両方を実装するのに適した構成です。
    バックエンドの技術スタック Fastify 、WebSockets、 Postgres 、 Redis データの永続化、マッチメイキング、ランキング、Pub/Sub などが必要なゲームに適した構成です。

    Related use cases