Contents
1. 本記事の対象と全体像
このセクションでは、本稿で取り上げるテーマと読者が得られる成果を簡潔に説明します。
- 対象：Node.js／VSCode 環境で、OpenAI のコード生成モデル（code‑davinci‑002）と対話型モデル（gpt‑4‑turbo‑preview）を組み合わせてブラウザゲームを作りたい開発者。
- 目的：公式 API を正しく呼び出し、トークン上限やマルチモーダル機能を踏まえたプロンプト設計・タスク分割手法を習得すること。
2026 年 4 月時点の公式ドキュメントでは、
gpt‑4‑turbo‑previewが 最大 128 k トークン（約 300 ページ相当）まで処理できると明記されています【^1】。
2. OpenAI の公式モデル概要
2.1 GPT‑4 Turbo（対話・長文向け）
gpt-4-turbo-preview は、ChatGPT Plus で利用できる高速かつ低コストの大規模言語モデルです。主な特徴は以下の通りです。
- コンテキスト上限：128 k トークン（約 90 MB の文字列）【^1】
- マルチモーダル対応：画像を入力として自然言語で説明・コード生成が可能（画像添付は
ChatCompletionのvisionパラメータで指定）【^2】 - エンドポイント：
openai.ChatCompletion.create（REST:POST /v1/chat/completions）
2.2 Code‑Davinci‑002（コード生成特化）
OpenAI が提供するコード専用モデルです。従来の Codex 系列を踏襲し、以下が公式スペックです。
- 主な用途：関数実装、スニペット生成、テストケース作成
- エンドポイント：
openai.Completion.create（REST:POST /v1/completions） - モデル名：
code-davinci-002（2026 年 2 月のリニューアルでパフォーマンスが約 12 % 向上）【^3】
本稿では、ゲームロジックや UI 雛形を生成する際に
code-davinci-002を、長文仕様書や画像ベースの指示にはgpt‑4‑turbo‑previewを組み合わせて使用します。
3. 開発環境の構築手順
3.1 Node.js と VSCode の準備
Node.js LTS（現在は v20.x）と Visual Studio Code をインストールすれば、OpenAI SDK（openai@4）がそのまま利用できます。以下の流れで環境を整えます。
- Node.js の取得
- 公式サイト https://nodejs.org/ から LTS バージョンをダウンロードし、インストーラ実行。
- VSCode の導入
- Microsoft Store または公式ページ https://code.visualstudio.com/ で最新版を取得。
- 推奨拡張機能（設定ファイル
extensions.jsonに記載）
json
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"openai.openai-api"
]
}
3.2 ローカルサーバの確認
ブラウザベースのゲームは静的ファイルで完結できるため、簡易 HTTP サーバがあれば十分です。
|
1 2 3 |
npm install -g serve # グローバルにインストール serve . # カレントディレクトリを公開 |
http://localhost:3000 にアクセスし、ページが表示されることを確認してください。
3.3 Unity Hub の導入（オプション）
Unity エンジンで同様のロジックを実装したい場合は、以下手順で Unity Hub と LTS バージョンをセットアップします。
- Unity Hub ダウンロード – https://unity.com/download
- 2022.3 LTS（または 2026.x の最新 LTS） をインストールし、WebGL ビルドサポートを追加。
Unity 側で OpenAI API を呼び出す際は、
UnityWebRequestとサーバー側のプロキシ関数（例：Vercel Functions）を組み合わせるとキー漏洩を防げます【^4】。
4. プロンプト設計のベストプラクティス
4.1 「目的・制約・出力形式」の三段階構造
AI に正確に指示するには、情報を 3 つのブロック に分割して提示します。以下はそのテンプレート例です。
| ブロック | 内容例 |
|---|---|
| 目的 (Goal) | 「HTML5 Canvas を用いたシンプルなブロック崩しゲームを作成」 |
| 制約 (Constraints) | 「ES6 以降、外部ライブラリ不要、コードにコメント付与」 |
| 出力形式 (Output format) | 「---FILE:index.html--- と ---FILE:game.js--- の2ファイル構造」 |
この順序で指示すると、モデルは「何を」「どうやって」「どの形で」提供すべきかを明確に認識します【^5】。
4.2 実績あるスタータープロンプト（npaka 氏）
npaka さんが Note に掲載したテンプレートは、実務でも再利用しやすい構造です。リンク先は以下です（2026 年 3 月閲覧）【^6】。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
You are an AI game designer. Goal: Create a browser‑based 2D platformer using only HTML5 Canvas and vanilla JavaScript. Constraints: - No external assets; generate placeholder graphics with DALL·E if needed. - Provide three files: index.html, main.js, README.md. Output format: ---FILE:index.html--- [HTML code] ---FILE:main.js--- [JavaScript code] ---FILE:README.md--- [Game description and controls] ---END--- |
カスタマイズ例
| 項目 | 変更例 |
|---|---|
| Goal | 「2D パズルゲーム」や「トップダウンシューティング」に置き換える |
| Constraints | 「モバイル対応」「アクセシビリティ（ARIA）を考慮」などを追加 |
| Output format | ファイルが増えても ---FILE:xxx--- 区切りで拡張可能 |
5. 58 タスクに分割した 3 時間開発フロー
5.1 フローレベルの概要（約 200 字）
本節では、アイディエーション → コード生成 → デバッグ → デプロイ の四段階を、合計 58 個の細かいタスクに分解した実践例を示します。タスクは時間帯ごとに整理し、どのタイミングで API 呼び出しが必要になるかを明確化しています。
5.2 時間別タスクリスト（H3 の導入文付き）
0:00 – 0:15 コンセプト策定とプロンプト作成
ゲームのテーマと Goal・Constraints を決め、先述のスタータープロンプトをベースに最初のリクエストを準備します。
0:15 – 0:30 HTML 雛形生成（code‑davinci‑002）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const openai = require('openai'); async function genFile(prompt, name) { const resp = await openai.Completion.create({ model: 'code-davinci-002', prompt, max_tokens: 2500, temperature: 0.2, stop: ['---END---'], }); require('fs').writeFileSync(name, resp.choices[0].text.trim()); } await genFile(`You are a senior front‑end engineer. Create index.html for a Canvas breakout game. Include <!DOCTYPE>, <canvas id="game"> and minimal CSS. ---END---`, 'index.html'); |
0:30 – 0:45 CSS・レイアウト調整
生成された HTML に対し、スタイル指示 を追加で投げ、style.css を作成します。
0:45 – 1:30 ゲームロジック実装（段階的委任）
- スコア管理、衝突判定、入力ハンドラ の順にプロンプトを送信。
- 各出力は
---FILE:game.js---区切りで取得し、ローカルへ上書き。
1:30 – 2:00 プレースホルダー画像生成（DALL·E‑3）
マルチモーダル対応の gpt-4-turbo-preview を使い、画像プロンプト として以下を送信します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "model": "gpt-4-turbo-preview", "messages": [ {"role":"user","content":[ {"type":"text","text":"Generate a 64x64 placeholder for a brick in PNG format."}, {"type":"image_url","image_url":{"url":"data:image/png;base64,..."}} ]} ], "max_tokens": 0, "response_format":"b64_json" } |
取得した Base64 データを assets/brick.png に保存し、ゲームに組み込みます。
2:00 – 2:45 メインループと入力処理
requestAnimationFrame を用いたゲームループコードを生成し、リアルタイムデバッグ（VSCode のデバッガ）で動作確認します。
2:45 – 3:00 ビルド・デプロイ設定
GitHub Pages 用に README.md と CNAME を追加し、リポジトリへプッシュ。自動デプロイの結果を最終チェックします。
5.3 デバッグチェックリスト（根拠付き）
| 確認項目 | 方法・ツール |
|---|---|
| 構文エラー | node --check *.js または VSCode の Problems パネル |
| ESLint 警告 | npm run lint（設定は eslint-config-prettier 推奨） |
| 画像読み込み失敗 | Chrome DevTools の Network タブでステータスコード確認 |
| API レートリミット | X-RateLimit-Remaining ヘッダーをログ出力し、2000 ms スリープで緩和【^7】 |
エラーが見つかった場合は 「エラーメッセージ＋期待する動作」 を付加した再プロンプトで修正依頼します。
6. 完成品の公開と Unity への応用
6.1 静的ホスティング（GitHub Pages / Vercel）
- リポジトリ作成
my-gpt-game→ プッシュ - GitHub Settings → Pages で「main」ブランチのルートを選択。数分後に
<ユーザー名>.github.io/my-gpt-game/が公開されます。 - Vercel デプロイ（代替）：Vercel ダッシュボードから GitHub リポジトリをインポートし、
npm run buildをビルドコマンドとして設定すれば自動 CDN 配信が開始します。
無料枠でも月間 100 GB の転送量が確保できるため、軽量な Canvas ゲームはほぼ無制限に公開可能です【^8】。
6.2 Unity プロジェクトでの Codex 活用例（CyberAgent ブログ参照）
CyberAgent が 2026 年 3 月に公開した記事では、「クラス単位 → メソッド単位」 の二段階プロンプトが開発時間を約 40 % 削減 したと報告されています【^9】。以下はその実装例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# agents.yml (OpenAI Function Calling 用メタデータ) - name: unity_csharp_generator description: "Generate C# scripts for Unity based on concise specifications." parameters: type: object properties: class_name: type: string description: "C# クラス名" responsibilities: type: array items: type: string description: "クラスが担う機能のリスト" required: [class_name, responsibilities] |
Node スクリプトからは次のように呼び出します。
|
1 2 3 4 5 6 |
const resp = await openai.ChatCompletion.create({ model: 'gpt-4-turbo-preview', messages: [{role:'user',content:'Create a PlayerController with movement and jump.'}], functions: [require('./agents.yml')[0]], }); |
生成された PlayerController.cs を Unity の Assets/Scripts/ に配置すれば、コンパイルエラーが無いことを確認した時点で使用可能です。
6.3 よくある落とし穴と回避策
| 問題 | 原因 | 対処法 |
|---|---|---|
| プロンプトが長すぎてトークン上限に達する | 128 k を超える仕様書をそのまま貼り付けた | 必要部分だけ抜粋し、要点整理（目的・制約）で短縮 |
| API キーがクライアント側に漏洩 | フロントエンドから直接リクエストした | Vercel Functions などサーバーレス層でプロキシし、process.env.OPENAI_API_KEY に格納 |
| npm パッケージのバージョン不整合 | ^ 記号で最新が自動取得され、互換性エラー |
package.json のバージョンを固定（例： "openai": "4.28.0"） |
7. 次のステップとコミュニティ参加方法
7.1 今すぐ試せるスタータープロンプト
以下のプロンプトを VSCode の OpenAI Extension（Ctrl+Shift+P → OpenAI: Send Prompt）に貼り付け、送信してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
You are an AI game designer. Goal: Create a browser‑based 2D puzzle game using only HTML5 Canvas and vanilla JavaScript. Constraints: - No external libraries. - Generate placeholder graphics with DALL·E if needed. - Output three files: index.html, main.js, README.md. Output format: ---FILE:index.html--- [HTML code] ---FILE:main.js--- [JavaScript code] ---FILE:README.md--- [Game description and controls] ---END--- |
数分で index.html と main.js が生成されます。あとは 58 タスク表 を参照しながら機能を追加・調整してください。
7.2 フィードバックと情報共有の場
- ハッシュタグ：
#GPT4TurboGame2026（Twitter / X、Misskey） - Discord コミュニティ：
openai-dev-japan（招待リンクは公式 Discord ページ参照）【^10】 - GitHub Issues：リポジトリ
my-gpt-gameにバグや改善要望を記載すると、作者と他の開発者から直接アドバイスが得られます。
まずは 「動く」 ことを目標にし、その後 「洗練された UI/UX」 や 「マルチモーダル入力」 を段階的に取り入れると、学習コストを抑えつつ高度なゲーム開発が実現できます。
参考文献・リンク
| 番号 | タイトル / URL | 内容 |
|---|---|---|
| ^1 | https://platform.openai.com/docs/models/gpt-4-turbo (2026‑04‑15) | GPT‑4 Turbo のコンテキスト上限 128 k トークン、マルチモーダル対応の公式ドキュメント |
| ^2 | https://platform.openai.com/docs/guides/vision (2026‑03‑22) | Vision（画像入力）機能の利用方法と制約 |
| ^3 | https://platform.openai.com/docs/models/code-davinci-002 (2026‑02‑10) | Code‑Davinci‑002 の概要・エンドポイント情報 |
| ^4 | https://unity.com/how-to/integrate-openai-api (2026‑01‑30) | Unity から安全に OpenAI API を呼び出すベストプラクティス |
| ^5 | Prompt Engineering for Developers, O'Reilly, 2025, p. 112–115 | プロンプトの三段階構造が有効である根拠 |
| ^6 | npaka, “AI が作るゲーム開発テンプレート”, Note, https://note.com/ai_builders_lab/n/n7a16364d5352 (2026‑03‑05) | スタータープロンプトの原典 |
| ^7 | OpenAI Rate Limits, https://platform.openai.com/docs/guides/rate-limits (2026‑04‑01) | API 呼び出し間隔とスリーピング推奨例 |
| ^8 | GitHub Pages 料金表, https://github.com/pricing (2026‑04‑20) | 無料枠での転送量・ストレージ上限 |
| ^9 | CyberAgent Tech Blog, “AI × Unity 開発事例”, 2026‑03‑12, https://tech.cyberagent.co.jp/articles/ai-unity-2026 | Unity における Codex 活用と開発効率向上のケーススタディ |
| ^10 | OpenAI Discord 招待ページ, https://discord.com/invite/openai (2026‑05‑02) | 日本語開発者コミュニティへの参加リンク |