ChatGPTと画像生成AIだけで、本当にゲームが作れる？…答えは「はい、作れます」実際にChatGPTと画像生成AIだけで、愛犬ポメちゃんの写真から2Dアドベンチャーゲームを完成させました。本記事では、前回紹介した基本プロンプトの活用に加えて、実際に動くゲームの制作フロー・プロンプト・画像仕様・音素材・機能設計までを公開します。
前提知識の整理はこちらから
ChatGPTでゲーム制作は可能？
結論から言えば、ChatGPTを使えばゲームは作れます。しかもコードを書いたことがなくてもです。
私は実際に、愛犬の写真を使って2Dアドベンチャーゲームを完成させました。
ChatGPTはコード生成だけでなく、画像生成AIや構想の整理、エラー修正までも対応可能。今回使ったのは、chatgpt ゲーム 作成 プロンプトというシンプルな入力文です。それを会話形式で少しずつ発展させながら、「HTML/CSS/JavaScriptベースの本格ブラウザゲーム」を作成しました。
「ポメちゃんの大冒険」制作のきっかけ
飼っているポメラニアン「ポメちゃん」を主人公に、自分だけのAIゲームを作りたいと思ったのがスタートです。街中でアイテムを集めて飼い主を探す、感動ストーリーの2DブラウザゲームをChatGPTのプロンプトと画像生成AIで開発しました。
「自分のペットがゲームの中で動く」その感動は、何ものにも代えがたい体験でした。ChatGPTと画像生成AIの力を借りれば、誰でも“自分だけの冒険”を形にすることができるのです。
プロンプトの具体例と活用方法
実際に使用したプロンプト例：
あなたは高度なプロンプトエンジニアです。
HTML/CSS/JavaScriptで2Dブラウザゲームを作成してください。
アップロードした画像素材を使用。
操作：矢印キー（移動）、スペースキー（ジャンプ）、Shiftキー（ダッシュ）
ストーリー：ポメラニアンの子犬「ポメちゃん」が街中でアイテムを集め、飼い主と再会する感動ゲーム。
ChatGPTはこのプロンプトからゲーム構成・コード・仕様を自動で提案してくれます。
プロンプト全文
あなたは2Dアドベンチャーゲームの設計とコード生成に長けたゲームエンジニアです。
以下の条件をもとに、JavaScriptとHTML（またはp5.js / Phaser.js）で実装可能な構成・コード例・説明を生成してください。
【ゲームの概要】
- 主人公：ふわふわのポメラニアン（1枚目の画像を2Dデフォルメにしたキャラ）
- 舞台：カラフルで可愛い街（2枚目のイラスト風）
- 操作：カーソルキー（← → ↑ ↓）で移動
- アイテム：道端や施設前に落ちているアイテム（例：骨、おやつ、ぬいぐるみ、フード、コイン）をゲット
- レベルアップ：アイテムを集めると犬の表情やスピード、イベントが解放される
- イベント：公園でボール遊び、ベンチで昼寝、風船を追いかけるなど
- 最終目的：街の一角に住む「飼い主」に出会い、再会シーンで感動のエンディング
【ビジュアル】
- ポメラニアンは32×32pxでアニメーションつきスプライト（歩く・笑う・尻尾振る）
- 背景はマップタイル形式（街並み・屋台・遊園地風・木々・ベンチなど）
- UIはハートや骨マークで体力や経験値を表現
【ステージ構成】
- ステージ1：遊園地ゾーン（観覧車、メリーゴーラウンドなど）
- ステージ2：住宅街ゾーン（お店、ベンチ、猫と遭遇）
- ステージ3：公園ゾーン（風船、ボールイベント）
- ステージ4：川沿いゾーン（橋、カモと出会う）
- ステージ5：飼い主との再会エリア（家の前、感動のカットシーン）
【必要な要素】
- キャラとマップの描画
- 街中のアイテムランダム出現処理
- NPCイベント（猫、他の犬、アイテムショップ）
- アイテム取得処理＋レベル変化
- シナリオ進行とエンディング条件
- ローカルセーブ対応（localStorage）
- モバイル操作対応（タッチボタン対応）
【要望】
- スプライトの読み込みコード例
- p5.jsまたはPhaser.jsの導入方法
- 可愛い街並みマップの生成方法
- 各ステージの切り替え方法
- ゲーム進行スクリプトのテンプレート
これらに基づき、ゲーム全体のコードと構成案を提示してください。
画像・音声素材の設定方法
キャラクター画像の生成と仕様設計（AI画像生成の活用）
最初にChatGPTで生成されたコードを使って動かしてみたとき、画面に現れたのはただのオレンジの正方形のキャラクター。「コレじゃない…！」と、思わず心の中でツッコミを入れてしまいました。
そこで次に取り組んだのが、理想のポメちゃんアイコンの作成でした。
📸 写真からスプライトを生成
愛犬の写真をベースに、DALL·Eなどの画像生成AIを活用して、
「上から見た視点で動きのある、かわいらしいポメラニアン」をイラスト化。
ジャンプ中の表情、歩くときの足運び、ふわっとしたしっぽの動き…。
細部までこだわり抜いたスプライトシートを作成しました。
キャラクターの画像仕様の詳細
完成したポメちゃんのスプライトは、背景透過PNGで「Canva」でトリミング・調整し統一感を保持し、サイズを以下のように構成しています。
- スプライトシート画像：256×64px（4コマ横並び）
- 各フレーム：64px × 64px × 4枚（背景透過PNG）
- アニメーション順：立ち → 歩き左 → 歩き右 → ジャンプ
🌐 サーバー上での画像アップロードと設定方法
画像は以下のように img/ フォルダにアップロードし、サーバー上で使用できるようにしました。
アップロード先例：/img/pome_sprite.png
フォルダ構成：
project-root/
├── public_html/
│ └── img/
│ ├── pome_stand.png
│ ├── pome_walk_left.png
│ ├── pome_walk_right.png
│ ├── pome_jump.png
│ └── background.png
パーミッション：644（初期値604の場合、画像が表示されない）
https://サイト名/img/pome_sprite.png のようにURLでアクセスできるかどうかは、必ずチェックするようにしましょう。
🎵 ChatGPTゲームに使った効果音と演出
- 使用素材：フリー素材
- 利用シーン：ジャンプ・アイテム取得・レベルアップなど → サウンド演出が加わると、ゲーム体験が一気に豊かになります！
- コイン取得時：
itemget_002.wav（軽やかな音） - 画像アイテム取得時：
itemget_013.wav（レア感のある音） - ジャンプ効果音：
jump_003.wav
ゲーム内で使用している効果音（ジャンプ音・アイテム取得音・レベルアップ音など）は、
「効果音工房様」 、音楽は「Springin’ Sound Stock様」より提供されているフリー素材を利用させていただきました。
高品質で使いやすい音源が多数揃っており、個人のゲーム制作にも非常にありがたいサイトです。
この場をお借りして、素敵な素材をご提供いただいたことに感謝申し上げます。
🎁 ゲームアイテム設計と出現バランス
ポメちゃんの冒険に彩りを加えるために欠かせないのがアイテムシステムの導入でした。
ただ歩いているだけではなく、「アイテムを集めて成長していく体験」を取り入れることで、プレイヤーのやりこみ要素がグッと増します。
実装したアイテム一覧（全6種）
| アイテム名 | 効果 | サイズ |
|---|---|---|
| Bone（骨） | HP回復 | 32×32px |
| Snack（おやつ） | 満腹度 + 経験値上昇 | 32×32px |
| Ball（ボール） | 元気度アップ | 32×32px |
| Rib（骨付き肉） | 魅力度アップ | 32×32px |
| Food01（缶フード） | HP + 満腹度バランス型 | 32×32px |
| Food02（ボウルフード） | 満腹系の回復効果 | 32×32px |
💰 コインの仕様
- コインは画像を使わず、Canvas上に直接描画（色コード：#FFD700）
- 出現数を多めにし、取得で経験値 +2
- 「拾って楽しい」×「レアアイテム感」の両立
⚖ 出現バランスも細かく調整
- 画像付きのアイテム（BoneやBallなど）は各ステージに5個だけ
- コインは一気に 25個出現 するようにし、マップを歩き回る楽しさを演出
このバランスにより、
「たまに見つかるレアアイテム」感と「集めやすいコイン」の両立が実現しました。
ChatGPTで実装したゲーム機能一覧（2Dゲームの基本）
- 左に歩く：
- 右に歩く：
- 左に走る：Shift＋
- 右に走る：Shift＋
- それ以外：正面
| 機能 | 内容 |
|---|---|
| 移動 | ←↑↓→キーで自由に移動 |
| ジャンプ | Spaceキーでジャンプ |
| ダッシュ | Shiftキー長押しで走る（エネルギー消費） |
| アイテム | 骨・おやつ・コインなどを取得可能 |
| ステータス | HP、満腹度、エネルギー、魅力度、レベル |
| サウンド | 動作・イベントごとに効果音付き |
| 背景 | フラットな街並みをキャンバス背景で描画 |
| クリア演出 | 全アイテム取得で次ステージへ |
ステージの作成
Step 1. ステージ1を完成させる（基本動作の完成）
- 背景画像でマップ表示（
stage1.png） - ポメちゃん移動（左右歩行・ジャンプ）
- アイテム出現と取得処理（SE付き）
- ステージクリア条件（例：アイテム全取得）
Clear1Sceneに自動遷移（ステージ切替）
ステージ1〜5に対応する背景画像を、レベルアップに応じて自動で切り替えるように対応しました。
実装内容
- プレイヤーのレベルに応じて
stage1.png〜stage5.pngを背景に反映- 背景は CSS の
backgroundスタイルで切り替え（JavaScript経由で安全に変更）- 最大ステージはレベル5まで（それ以上は背景切替なし）
- アイテムを集めて経験値を増やす
- レベルが上がると自動で背景が変化！
Step 2. 他のステージやエンディングの導入
ステージ2〜5とエンディングまでをすべて追加。
Stage2〜Stage5,EndingSceneを追加- ステージごとの難易度変化で時間制限を段階的に短く。
- 雨や夜などの天候イベント（canvasにオーバーレイ）
- 会話イベント（吹き出しメッセージや選択肢）
- 経験値ゲージバー追加
- 飼い主が登場する「感動のエンディング」演出
- アイテム名を吹き出しで表示（取得時）
Step 3. WordPressに埋め込む（iframe表示）
- Phaserで作成したゲームを1つのHTMLフォルダでエクスポート（
index.html+assets/） - WordPress側にFTPまたはプラグインでアップロード
- 投稿や固定ページに
iframeで埋め込む：
<iframe src="https://サイト名.com/wp-content/uploads/game/index.html" width="800" height="600"></iframe>実際に作ったゲームをプレイしてみよう！
完成版「ポメちゃんの大冒険」はブラウザで今すぐプレイ可能！
※現在のゲームはPCブラウザ専用で、操作はキーボードのみ対応（スマホ未対応）です。スマホ対応版は今後のアップデートで検討中です。
ぜひ、ポメちゃんと一緒に街を冒険して、飼い主との感動の再会を目指してください。
今後の拡張アップデート計画｜ポメちゃんの冒険は続く！
「ポメちゃんの大冒険」は、まだまだ進化できます。
すでに遊べる状態ですが、今後はさらに世界観や体験の奥行きを加えていけたら良いなと思います。
- 💬 会話イベントでストーリー展開
- 🌧 天候変化（雨や晴れ）と行動制限
- 🐾 新キャラ「白ポメちゃん」追加予定
- 💾 セーブ＆ロード機能の追加
- 📱スマホ操作対応 / 仮想スティック or ボタン操作の追加
ChatGPTを使ってゲーム制作するメリットと注意点
メリット
- コーディング経験不要で2Dゲームが作れる
- ストーリーと操作を伝えるだけで動くゲームが作れる
- 自分の世界観をそのままAIゲームにできる
- エラーもChatGPTがサポート・修正可能
初心者でも、丁寧にChatGPTと会話しながら進めれば、世界に一つのゲームが完成します！
注意点
- ファイルの権限設定（644）で画像表示トラブル回避
- スプライトは64×64px / 透過PNGが最適
- サーバー構成はシンプルに（img/などで統一）
実装時の注意点と対処法
製作中にバグやエラーが起きても、諦める必要はありません。前の安定バージョンに戻って、ひとつひとつ修正を繰り返すことで、必ず完成に近づいていきます。焦らず、着実に進めることが成功への鍵です。
🔧 解決方法・進め方
製作中にバグやエラーが起きても、諦める必要はありません。前の安定バージョンに戻って、ひとつひとつ修正を繰り返すことで、必ず完成に近づいていきます。焦らず、着実に進めることが成功への鍵です。
- 「安定した元データ」を保存しておく
- バージョン管理（ZIPやGitHub）で壊れていない状態をキープ
- 変更は一度に1箇所だけ＋テスト
- 小さな単位で修正し、都度動作確認を行う
- エラー発生時は“直前の保存”に戻る
- バックアップから復元して効率的に開発継続
「ChatGPT ゲーム 作成」では、一歩ずつが成功の鍵！
まとめ：ChatGPTのプロンプトで誰でも2Dゲームクリエイターに！
ゲーム制作はもう特別な人のものではありません。ChatGPTと画像生成AIを活用すれば、初心者でも2Dゲームを自作できる時代です。
ChatGPTへ「あなたは高度なプロンプトエンジニアです」と
入力するところから、すべてが始まります。
「自分のアイデアをゲームにしたい」「ペットや物語を形にしたい」そんな夢がある方は、今日から冒険を始めてみてください。
ChatGPTの基本プロンプトやゲーム制作の準備については、前編の記事で詳しく解説しています。
