HTML1ファイルだけで動作する、Project Warlock系のFPSプロトタイプを作ってください。

目的は完成品ではなく、まずワイヤーフレーム状態で 「3D舞台＋2D敵＋2D銃」 という構成が成立するか確認することです。

【必須条件】

・HTML1ファイルのみで動作 ・外部サーバー不要 ・Three.js使用可 ・PCブラウザ向け ・一人称視点FPS ・マウスで視点移動 ・WASDで移動
・Shiftで少し高速移動 ・壁をすり抜けない ・ESCでマウスロック解除

【舞台】

舞台はすべて簡易3D形状で構成してください。

・床 ・壁 ・天井 ・通路 ・小部屋

現段階ではテクスチャを使用せず、 床・壁・天井は色の違う単純な面または箱で表現してください。

見た目は完全なワイヤーフレームだけでなく、 形状が把握しやすい簡易グレーBOX表示にしてください。

必要であればワイヤーフレーム表示ON/OFFも付けてください。

【マップ構成】

マップはコード内の2次元配列またはJSONデータから生成してください。

例

0 = 空間 1 = 壁 2 = 敵 3 = アイテム 4 = 出入口

というように、後から簡単に編集できる構造にしてください。

マップ生成処理とFPS処理はできるだけ分離してください。

【敵】

敵は3Dモデルを使用しません。

2Dの板ポリゴンまたはSpriteを使用し、 常にプレイヤー方向を向くBillboard方式にしてください。

現段階では画像は不要です。

敵は色付きの四角形または簡単な人型シルエットで表示してください。

敵には最低限以下を実装してください。

・待機 ・プレイヤー発見 ・接近 ・攻撃 ・HP ・死亡

ただしAIは単純で構いません。

以下の仕様は実装すること 敵はゲーム開始後3秒間は攻撃してこない 敵は壁を貫通して移動できない

【銃】

銃は3Dモデルではなく、 画面下部中央に固定された2D表示にしてください。

現段階では画像を使わず、 単純な図形で銃の位置を表現してください。

左クリックで射撃。

射撃はRaycast方式で構いません。

敵に命中するとHPが減るようにしてください。

【HUD】

最低限、

・HP ・弾数 ・照準 ・FPS表示

を表示してください。

【プロトタイプ確認用UI】

画面右上などに小さなデバッグUIを作ってください。

以下をON/OFFできるようにしてください。

・ワイヤーフレーム表示 ・敵AI ・当たり判定表示 ・FPS表示

また、

「敵追加」 「敵全削除」 「プレイヤー位置リセット」

のボタンも付けてください。

【重要】

今回は見た目を作り込まないでください。

目的は以下の確認です。

・3D舞台をプログラムで生成できるか ・FPSとして移動しやすいか ・2D敵が3D空間で違和感なく見えるか ・2D銃表示が成立するか
・Raycast射撃が成立するか ・将来的にテクスチャを貼る構造へ発展できるか

コードは後から拡張しやすいようにしてください。

特に、

マップ生成 プレイヤー制御 敵AI 射撃 UI

を可能な範囲で関数・クラス単位に分けてください。

既存コードがある場合でも無関係な部分は勝手に削除しないでください。

まずは「遊べる簡易FPSプロトタイプ」として完成させてください。

添付した「FPS v3 バグ修正.html」をベースに改修してください。

HTML1ファイル構成を維持してください。

今回は以下の4機能を追加してください。

・ランダムマップ生成 ・マップテクスチャ設定 ・敵アニメーション ・武器アニメーション

既存機能は削除せず、現在正常に動作している敵AI、当たり判定、画像ライブラリ、保存・読込などを壊さないでください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

1.  「マップ」タブを追加 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

現在の右メニュー

画像 プレイヤー 敵設定 設定

を

画像 プレイヤー 敵設定 マップ 設定

の5タブにしてください。

【マップタブ】

以下を配置してください。

■ ランダムマップ設定

・マップ横サイズ ・マップ縦サイズ ・壁密度 ・敵配置数

・「ランダムマップ生成」ボタン

「ランダムマップ生成」を押すと、新しいマップデータを自動生成し、その場で3Dマップを再構築してください。

単純に各マスを完全ランダムで壁にするだけではなく、プレイヤーが移動可能なマップになるようにしてください。

最低限、以下を保証してください。

・外周は必ず壁 ・プレイヤー開始地点を1か所生成 ・開始地点が壁の中にならない ・開始地点から移動可能な空間を確保する ・敵は壁の中に配置しない
・敵はプレイヤー開始地点と重ならない ・敵配置地点へプレイヤーが到達可能であること
・孤立した完全に到達不能なエリアを極力作らない

迷路生成方式など、到達可能性を保証しやすい方式を使用して構いません。

生成結果は現在のMAP_DATA相当の2次元配列として管理してください。

【マップ再生成時の重要事項】

現在表示されているマップを正しく破棄してから新しいマップを生成してください。

再生成前に、

・既存の壁Mesh ・床Mesh ・天井Mesh ・wallBoxes ・wallMeshes ・enemySpawnPoints ・現在配置されている敵
・敵のProjectile

など、古いマップに依存する情報を正しく初期化してください。

再生成後に、

・古い壁が残る ・透明な当たり判定が残る ・床や天井が二重になる ・古い敵が残る ・古い敵スポーン地点が残る

といった状態が発生しないようにしてください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2. マップテクスチャ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

マップタブに、

・壁テクスチャ ・床テクスチャ ・天井テクスチャ

の設定欄を追加してください。

画像タブの「画像ライブラリ」に登録されている画像から選択できるようにしてください。

「適用」ボタンを用意してください。

選択した画像をそれぞれ

壁 床 天井

のThree.jsマテリアルへ適用してください。

画像未指定の場合は、現在のデフォルト色を使用してください。

テクスチャは必要に応じてRepeatWrappingを使用し、不自然に1枚の巨大画像が引き伸ばされる状態を避けてください。

既存のAssetManagerの画像・Texture管理を利用してください。

AssetManagerが所有している共有Textureを、MapGenerator側からdisposeしないでください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 3. 敵アニメーション ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

現在の「敵設定」タブを拡張してください。

敵1種類につき画像1枚だけではなく、状態ごとの画像を登録できるようにしてください。

【登録できる画像】

・待機画像 ・移動画像 ・攻撃画像 ・被弾画像 ・死亡画像

すべて画像ライブラリに登録されている画像から選択してください。

未指定の状態については、

「待機画像を代用」

するようにしてください。

つまり、5種類すべて用意しなくても敵を作れるようにしてください。

【敵状態との連動】

現在のEnemyの状態に合わせて表示画像を自動変更してください。

idle → 待機画像

chase → 移動画像

attack → 攻撃画像

takeDamage時 → 被弾画像を短時間表示

dead → 死亡画像

被弾画像は一時的に表示し、その後現在のAI状態に対応する画像へ戻してください。

死亡後は死亡画像を表示したままにしてください。

【重要】

今回は本格的なスプライトシート再生機能までは必要ありません。

まずは

状態ごとに1枚の画像を切り替える方式

にしてください。

将来的に複数フレームアニメーションへ拡張しやすいデータ構造にしてください。

既存の

・近接 ・遠距離 ・突進

の攻撃パターンは維持してください。

敵AIのロジック自体は変更しないでください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 4. 武器アニメーション ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

現在の「プレイヤー」タブを拡張してください。

左手と右手それぞれについて、

・通常画像 ・発射画像

を画像ライブラリから設定できるようにしてください。

例：

右手

通常画像：gun_idle.png 発射画像：gun_fire.png

通常時は通常画像を表示してください。

射撃した瞬間だけ発射画像へ変更し、短時間後に通常画像へ戻してください。

現在存在する射撃時の武器移動アニメーションも残してください。

つまり射撃時には、

通常画像 ↓ 発射画像 ＋ 現在の反動アニメーション ↓ 通常画像

となるようにしてください。

左手についても同じ仕組みにしてください。

「なし」を選択した場合は現在と同じように非表示にしてください。

発射画像が設定されていない場合は通常画像のまま反動アニメーションだけ実行してください。

現在の

・弾薬 ・fireRate ・Raycast ・敵へのダメージ ・左右武器表示

などの射撃ロジックは変更しないでください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 5. 保存・読込 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

JSON保存対象へ今回追加した情報も含めてください。

保存するもの：

・現在のランダムマップデータ ・マップサイズ ・壁密度 ・敵配置数 ・壁テクスチャ ・床テクスチャ ・天井テクスチャ ・敵タイプごとの状態画像設定
・左右武器の通常画像 ・左右武器の発射画像

JSONを読み込んだ場合は、保存時と同じマップ・テクスチャ・敵設定・武器設定を復元してください。

既存の保存データとの互換性も可能な範囲で維持してください。

古いJSONに新しい項目が存在しない場合はデフォルト値を使用し、エラーで停止しないようにしてください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 6. UIについて ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

現在のレトロFPS風デザインを維持してください。

右メニューの開閉方式も変更しないでください。

タブが5個になるため、タブ名が潰れたり重なったりしないようにしてください。

必要ならタブ文字を少し小さくしてください。

画像選択には既存の画像ライブラリを利用し、同じ画像を何度もアップロードさせる設計にはしないでください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 重要な制約 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

・HTML1ファイルを維持する ・既存機能を削除しない ・既存UIを必要以上に変更しない ・既存の敵AIを壊さない ・プレイヤー操作を壊さない
・当たり判定を壊さない ・射撃Raycastを壊さない ・画像ライブラリをそのまま利用する
・Texture管理はAssetManager中心とする ・共有Textureを誤ってdisposeしない ・JSON保存・読込を壊さない
・マップ再生成を何度行っても古いMeshや当たり判定が残らないようにする ・機能追加後も既存のデバッグ機能を使用できるようにする

完成後はコードの一部分だけではなく、修正済みHTMLファイル全体を出力してください。

添付した Fps v4_mapfix(1).html を直接解析したうえで改修してください。

新規に別のFPSを作り直すのではなく、現在のコードをベースとして拡張してください。

今回の改修は、

1.  既知バグの修正
2.  プレイヤー武器アニメーション改善
3.  敵アニメーション簡略化
4.  Tracer / 着弾エフェクト
5.  敵のファイヤー / エネルギー攻撃
6.  法線マップ自動生成
7.  JSON保存・復元対応

までを含みます。

1. 最重要方針

今回もっとも重要なのは、

高機能化よりも、設定完了までの時間を短くすること

です。

設定できる項目を大量に増やさないでください。

プログラム側で自動判断できるものは、可能な限り自動化してください。

ユーザーに、

  - Loop設定
  - フレームイベント設定
  - Normal Map画像の管理
  - idle / hurt / dead画像の個別登録
  - 発射タイミングの細かい指定
  - Normal MapのX/Y反転
  - Blur
  - フレームごとのイベント設定

などを毎回させないでください。

理想は、

敵1種類、武器1種類を数十秒～1分程度で設定できること

です。

2. 既存機能を維持する

以下の既存機能を削除しないでください。

  - ランダムマップ生成
  - 壁・床・天井
  - InstancedMeshによる床・天井
  - 壁衝突判定
  - プレイヤー移動
  - 敵AI
  - 近接攻撃
  - 遠距離攻撃
  - 突進
  - 敵スポーン
  - 画像ライブラリ
  - 武器表示
  - Raycast射撃
  - HUD
  - JSON保存
  - JSON読み込み
  - ワイヤーフレーム
  - Hitbox
  - サイドバー
  - 各タブ
  - Pointer Lock
  - マップテクスチャ
  - 敵配置数設定

現在正常に動いている処理を壊さないようにしてください。

3. 発見済みバグの修正【必須】

機能追加より前に、以下の既知バグ・問題を必ず修正してください。

「確認したが問題なし」と省略せず、現在コードを実際に追跡して修正してください。

3-1. 画像テクスチャ読込

AssetManager.addImage() では、

Imageのloadイベントを設定してから img.src を代入してください。

現在のような、

img.src = dataUrl ↓ img.onload = ...

という順番にはしないでください。

Data URLやキャッシュ画像でもThree.js Textureが確実に更新されるようにしてください。

3-2. Pointer Lock終了時のカーソル消失

Chrome / Edgeで、

ゲーム開始 ↓ Pointer Lockでカーソル非表示 ↓ その状態でページ・タブ・ウィンドウを閉じる ↓ 別タブでもカーソルが見えなくなる

問題が実際に発生しているため修正してください。

pointerlockchange だけに依存せず、

  - pagehide
  - beforeunload
  - visibilitychange
  - blur
  - pointerlockerror

など適切な終了経路でPointer Lock解除・カーソル復旧を行ってください。

document.body.style.cursor = 'auto' などもフォールバックとして使用してください。

3-3. マウス視点操作の引っ掛かり

現在の mousemove 内で毎回Camera Quaternionを直接更新する方式を改善してください。

movementX / movementY を一時蓄積し、

Gameの requestAnimationFrame 側で1フレームに1回まとめて視点へ適用してください。

可能なブラウザでは、

requestPointerLock({ unadjustedMovement: true })

を試してください。

非対応の場合は通常Pointer Lockへ自動フォールバックしてください。

マウス感度設定も追加・維持してください。

不要なスムージングは追加しないでください。

3-4. 敵配置数0

敵配置数を0に設定した場合、本当に0体で生成してください。

0をfalse扱いしてデフォルト4体へ戻してはいけません。

現在存在する Number.isFinite() を使用した処理を壊さないでください。

3-5. マップ再生成時の残留物

ランダムマップを再生成するとき、

  - 敵
  - Projectile
  - Tracer
  - 着弾エフェクト
  - 火花
  - 煙
  - 弾痕
  - ファイヤー攻撃
  - エネルギー攻撃

など旧マップに属する一時オブジェクトを完全にクリアしてください。

古いエフェクトが新しいマップへ残らないようにしてください。

3-6. 複数画像化後の画像削除

敵・武器アニメーションが複数画像配列になるため、

単一imageIdだけを確認する削除判定では不十分です。

frames配列のどこかで使用されている画像は削除できないようにしてください。

3-7. プレイヤー着弾Raycast

射撃Raycastの対象を、

  - 敵Hitbox
  - 壁
  - 床
  - 天井

にしてください。

床・天井はInstancedMeshであるため、

着弾地点の面法線を正しくワールド座標へ変換してから着弾エフェクトへ渡してください。

これにより、

壁 床 天井

すべてに正しい方向で、

  - 火花
  - 煙
  - 弾痕

を表示してください。

3-8. 壁際移動

現在の、

  - 円形XZ衝突判定
  - X / Z分離移動
  - 移動量分割

を維持してください。

以前発生していた壁角での引っ掛かりや大きな巻き戻りを再発させないでください。

3-9. Z-fighting

床・天井を壁セルへ生成しない現在の仕様を維持してください。

壁下面・上面と床・天井が完全同一平面になってZ-fightingする問題を再発させないでください。

3-10. テクスチャ表示再発防止

マップテクスチャの読み込み・適用処理を変更した場合でも、

  - 壁
  - 床
  - 天井

の既存テクスチャ表示を壊さないでください。

4. プレイヤータブを簡略化する

現在は左右それぞれ、

  - 通常画像1枚
  - 発射画像1枚

という構造です。

これを複数画像アニメーション対応に変更します。

ただしUIを複雑化しないでください。

右手武器

基本UI：

  - 通常アニメーション画像
  - 発射アニメーション画像
  - X位置
  - Y位置
  - Scale

左手武器

  - 使用する ON/OFF
  - 通常アニメーション画像
  - 発射アニメーション画像
  - X位置
  - Y位置
  - Scale

必要なら左右同期を追加して構いません。

5. 武器画像は画像ライブラリから複数選択

新しくPCから毎回ファイルを読み込ませるのではありません。

既存の画像ライブラリを利用してください。

例えば、

「通常画像を追加」

または

「発射画像を追加」

を押すと画像ライブラリが開き、

複数の登録済み画像を選択できるようにします。

例：

gun_001.png gun_002.png gun_003.png gun_004.png

を選択した場合、

001 → 002 → 003 → 004

の順番で自動再生してください。

ファイル名は自然順ソートしてください。

1枚なら静止画。

複数枚ならアニメーションです。

6. 武器アニメーション動作

通常

通常画像が1枚の場合：

静止表示。

複数枚の場合：

自動ループ。

発射

発射画像が複数の場合：

左クリック時に1回再生。

最後まで再生したら自動的に通常画像へ戻す。

ユーザーにLoop ON/OFFを設定させないでください。

内部で、

通常 = loop 発射 = one-shot

と自動設定してください。

7. 固定CSS反動を廃止

現在、

.weapon-left.firing

.weapon-right.firing

によって、

translateY rotate scale

を固定適用しています。

この固定反動は廃止してください。

武器画像そのものの差分アニメーションを邪魔するためです。

発射アニメーション画像によって反動を表現します。

8. フレームごとの複雑な編集は通常UIに出さない

以前検討していた、

  - 各フレームX
  - 各フレームY
  - 各フレームScale
  - Rotation
  - Duration
  - 発射イベント
  - muzzleイベント
  - tracerイベント

などは、

今回の通常UIには出さないでください。

まずは画像差分だけでアニメーションを作れるようにします。

内部構造は将来拡張可能にして構いません。

9. プレイヤー武器のマズルフラッシュ

プレイヤー武器の発射画像そのものに、

すでにマズルフラッシュが描かれている

ことを前提とします。

そのため、

  - 追加のマズルフラッシュ画像
  - Muzzle X
  - Muzzle Y
  - マズルサイズ
  - マズル寿命

などをプレイヤータブへ追加しないでください。

武器画像そのものを使用します。

10. プレイヤーTracer

プレイヤー射撃の命中判定は、

現在のRaycast方式を維持してください。

実弾オブジェクトを大量生成しません。

構造：

Raycast

当たり判定

Tracer

見た目

と分離します。

Tracerは、

画面中央の射線付近から、

Raycast命中地点または最大射程方向へ、

非常に短時間表示される細い発光線として描画してください。

通常UIでは、

  - Tracer ON/OFF
  - 表示率

程度で十分です。

太さ、寿命、明るさなどは適切な固定値にしてください。

設定項目を増やしすぎないでください。

11. プレイヤー着弾エフェクト

壁、床、天井へ命中した場合、

  - 短い着弾フラッシュ
  - 火花
  - 少量の煙
  - 弾痕

を表示してください。

敵に命中した場合は壁用弾痕を出さないでください。

床・天井でも面の向きを取得して正しく表示してください。

大量のオブジェクトを残さないでください。

弾痕は上限数を設け、

古いものから削除してください。

12. 敵タブを大幅簡略化

現在存在する、

  - idle
  - chase
  - attack
  - hurt
  - dead

の5種類の画像設定欄を廃止してください。

通常ユーザーが設定する敵アニメーションは、

歩き 攻撃

の2種類だけにします。

UI：

敵の名前

攻撃パターン

HP

移動速度

歩きアニメーション [画像ライブラリから追加]

攻撃アニメーション [画像ライブラリから追加]

アニメーション速度

遠距離攻撃エフェクト

[敵タイプを登録]

程度にしてください。

13. 敵の歩きアニメーション

歩き画像は画像ライブラリから複数選択。

例：

walk_001.png walk_002.png walk_003.png walk_004.png

なら4フレームアニメーション。

自然順ソート。

敵が移動している間は自動ループします。

敵が停止している場合

idle画像を別途設定しません。

敵が停止した場合は、

歩きアニメーションの先頭フレーム

を静止表示してください。

これによりidle設定を不要にします。

14. 敵の攻撃アニメーション

攻撃画像も画像ライブラリから複数選択。

攻撃時に1回再生。

終了後、

歩きアニメーションまたは歩き先頭画像へ戻します。

Loop設定をユーザーにさせないでください。

自動的にone-shotとします。

15. hurt / dead画像設定は廃止

今回は、

hurt

dead

のアニメーション登録欄は不要です。

被弾

既存の短時間の色変化など、簡易フィードバックで構いません。

死亡

現在の死亡処理を維持してください。

死亡アニメーション追加は将来機能とします。

設定項目を増やさないことを優先します。

16. 敵遠距離攻撃エフェクト

敵登録UIに、

「遠距離攻撃エフェクト」

を追加してください。

選択肢：

  - 通常
  - ファイヤー
  - エネルギー

の3種類。

サンダーは今回入れません。

17. 通常遠距離攻撃

現在のProjectile方式を残してください。

既存の単純なProjectileを、

「通常」

として使用します。

既存機能との互換性を維持するため削除しません。

18. ファイヤー攻撃

Three.js上で実装してください。

見た目は、

敵 ↓ 火球生成 ↓ プレイヤー方向へ飛翔 ↓ 着弾 ↓ 爆発

とします。

火球は、

  - 高輝度の中心
  - オレンジ～赤の外周発光
  - 飛翔中の小さな炎粒子
  - 短い残光

を持たせます。

着弾時は、

  - 強い短時間フラッシュ
  - オレンジ系火花
  - 少量煙
  - 円形の衝撃波

を発生させます。

以前作成したThree.jsエフェクトサンプルのファイヤー表現を参考にしてください。

ただし大量のGeometry / Materialを毎フレーム生成し続けないようにしてください。

19. エネルギー攻撃

Three.js上で実装してください。

構造：

敵 ↓ 短いチャージ ↓ エネルギー弾発射 ↓ 残光 ↓ 着弾 ↓ 衝撃波

チャージ時には、

  - 中心発光
  - 周囲を回転する小さいエネルギー粒子

を表示。

飛翔時には、

  - 白～青緑の中心
  - 紫～青の外周
  - 短い残光

を表示。

着弾時には、

  - 強い発光
  - 粒子
  - 二重程度の衝撃波

を表示してください。

20. 敵攻撃とダメージ処理を分離

エフェクトの見た目とゲーム判定を密結合させすぎないでください。

例えば、

enemy.executeAttack()

↓ attackEffect = fire

↓ EffectManager.spawnFire(...)

という構造にしてください。

既存のEnemy AIそのものを全面的に作り直さないでください。

21. EffectManagerを導入

今回追加する、

  - Tracer
  - 着弾
  - 火花
  - 煙
  - 弾痕
  - ファイヤー
  - エネルギー

を一元管理できる EffectManager を追加してください。

Gameの animate() から、

effectManager.update(dt)

を毎フレーム呼び出してください。

マップ再生成時は、

effectManager.clear()

で残留物を完全除去してください。

22. 法線マップを自動化

現在の壁・床・天井テクスチャ設定を維持します。

ただし各テクスチャの近くに、

「凹凸効果を追加」

または

「法線マップ自動適用」

ボタンを追加してください。

重要：

ユーザーにNormal Map画像を読み込ませません。

Normal Map画像の選択欄も作りません。

Normal Mapプレビューも不要です。

23. 法線マップ内部処理

例えば壁画像を設定後、

[凹凸効果を追加]

を押したら、

カラー画像 ↓ Canvas ↓ グレースケール ↓ 周囲ピクセル明度差 ↓ XYZ法線へ変換 ↓
THREE.CanvasTextureまたはTHREE.Texture ↓ material.normalMap

まで内部で自動処理してください。

ユーザーは生成画像を管理しません。

床・天井も同じです。

24. マテリアル

Normal Mapを使えるように、

必要に応じて、

MeshLambertMaterial

から

MeshStandardMaterial

へ変更してください。

ただし、

  - 従来テクスチャ
  - InstancedMesh床
  - InstancedMesh天井
  - 壁表示

を壊さないでください。

Normal Map未使用時も従来と同等に表示してください。

25. 法線設定UI

通常UIには、

壁画像 [画像]

[凹凸効果を追加]

床画像 [画像]

[凹凸効果を追加]

天井画像 [画像]

[凹凸効果を追加]

程度で十分です。

強度を入れる場合でも、

1本の簡単なスライダー程度にしてください。

X反転、Y反転、Blur、Normal画像選択などの高度設定は通常画面へ出さないでください。

26. 共通フレームアニメーション処理

敵と武器で、

完全に別々のフレーム再生ロジックをコピーして作らないでください。

内部では共通の軽量な AnimationClip / FrameAnimator を使用してください。

例えば、

AnimationClip { frames: [imageId, imageId, imageId...], fps: 10, loop: true }

程度で構いません。

今回、

フレームごとの細かい位置情報やイベントは必須ではありません。

重要なのは、

複数画像を渡せば自動で順番に表示できること

です。

27. アニメーション速度

敵：

  - 歩き速度
  - 攻撃速度

武器：

  - 通常速度
  - 発射速度

を変更できるようにしても構いません。

ただしUIを増やしすぎないでください。

可能なら、

「アニメーション速度」

1つの値で十分です。

28. 画像削除判定を更新

現在の画像ライブラリでは、

使用中の画像を削除できないようチェックしています。

複数画像アニメーション対応後は、

単一ID比較だけでは不十分です。

武器や敵の、

frames配列

の中に画像IDが存在するか確認してください。

使用中なら削除させないでください。

29. JSON保存

今回追加する内容はJSON保存対象にしてください。

最低限、

武器

  - 左右ON/OFF
  - 通常フレーム画像ID配列
  - 発射フレーム画像ID配列
  - X
  - Y
  - Scale
  - アニメーション速度
  - Tracer ON/OFF
  - Tracer表示率

敵

  - 歩きフレーム画像ID配列
  - 攻撃フレーム画像ID配列
  - アニメーション速度
  - 遠距離攻撃エフェクト種類

マップ

  - 壁画像
  - 床画像
  - 天井画像
  - 壁Normal ON/OFF
  - 床Normal ON/OFF
  - 天井Normal ON/OFF

を保存してください。

30. Normal Map自体は保存不要

Normal Mapは元画像から再生成できるため、

巨大なBase64 Normal画像をJSONへ保存する必要はありません。

保存するのは、

normalEnabled: true

などの設定だけで構いません。

JSON読み込み時に自動再生成してください。

31. 旧JSON互換

現在の、

weapons.left.idle

weapons.left.fire

weapons.right.idle

weapons.right.fire

や、

enemyTypes.images.idle

enemyTypes.images.chase

enemyTypes.images.attack

などの旧データを読み込んでもエラーにしないでください。

旧データの場合は、

単一画像ID ↓ frames配列1枚

へ自動変換してください。

例：

idle: "img_123"

なら、

frames: ["img_123"]

として扱います。

32. パフォーマンス

エフェクト実装では特に注意してください。

毎フレーム大量に、

new SphereGeometry

new Material

new Texture

を生成しないでください。

可能な範囲で、

  - Geometry共有
  - Material共有
  - Object Pool
  - Sprite再利用

を使用してください。

エフェクト終了後は適切に非表示または再利用してください。

どうしてもdisposeする必要がある一時リソースはdisposeしてください。

33. UIで絶対に避けること

以下のようなUIにしないでください。

敵

idle画像 chase画像 attack画像 hurt画像 dead画像

をすべて設定させる。

Normal Map

Normal Map画像選択 Normal Mapプレビュー X反転 Y反転 Blur Normal画像保存

など大量の項目を通常UIへ並べる。

武器

Frame1イベント Frame2イベント Frame3イベント Muzzle event Tracer event Fire event

などを毎回ユーザーに設定させる。

これらは今回の目的に反します。

34. 今回の完成形

プレイヤー

画像ライブラリ ↓ 通常画像を複数選択 ↓ 発射画像を複数選択 ↓ 位置と大きさを調整 ↓ 完成

敵

名前 ↓ 攻撃パターン ↓ HP / 移動速度 ↓ 歩き画像を複数選択 ↓ 攻撃画像を複数選択 ↓ 遠距離ならエフェクト選択 ↓ 登録

マップ

壁画像を選択 ↓ 必要なら凹凸効果を追加

床画像を選択 ↓ 必要なら凹凸効果を追加

天井画像を選択 ↓ 必要なら凹凸効果を追加

これで完了するようにしてください。

35. 最終目標

このツールは、

「細かい設定が大量にできるエディタ」

ではなく、

「画像を登録したらすぐFPSとして動かせるエディタ」

を目指します。

自動化できる処理をユーザーに設定させないでください。

設定項目の追加には常に、

「この項目は本当にユーザーが毎回設定する必要があるのか？」

を考えてください。

必要がなければ内部で自動処理してください。

36. 完成後の確認項目

実装後は必ず、

1.  JavaScript構文エラーがない
2.  初期起動できる
3.  Pointer Lock開始・解除できる
4.  ウィンドウ・タブ終了後にカーソルが正常復旧する
5.  マウス視点操作が滑らか
6.  ランダムマップ生成できる
7.  敵数0で0体になる
8.  プレイヤー移動できる
9.  壁際移動で引っ掛かりが再発していない
10. Z-fightingが再発していない
11. 射撃できる
12. 敵へRaycast命中する
13. 壁へ着弾する
14. 床へ着弾する
15. 天井へ着弾する
16. Tracerが動く
17. 火花・煙・弾痕が動く
18. 敵スポーンできる
19. 敵AIが動く
20. 武器複数画像アニメーションが動く
21. 通常アニメーションから発射アニメーションへ移行できる
22. 発射終了後に通常へ戻る
23. 敵歩きアニメーションが動く
24. 敵停止時に歩き先頭画像が表示される
25. 敵攻撃アニメーションが1回再生される
26. ファイヤー攻撃が動く
27. エネルギー攻撃が動く
28. マップ再生成後に古いエフェクトが残らない
29. Normal Map自動生成が動く
30. 壁へNormal Mapが反映される
31. 床へNormal Mapが反映される
32. 天井へNormal Mapが反映される
33. Normal Map OFFでも従来表示が壊れない
34. 画像ライブラリ削除判定が複数フレームに対応している
35. JSON保存できる
36. JSON再読み込みで設定が完全復元される
37. Normal Mapが再読み込み時に自動再生成される
38. 旧JSONでも致命的エラーにならない
39. 使用中Texture / Geometry / Materialの無駄な大量生成がない
40. コンソールに重大なエラーが出ない

まで確認してください。

見た目だけのモックではなく、実際に使用できる完成状態にしてください。

新しくゼロからゲームを作るのではなく、これまでAIで作ったプログラムを読み込ませて、新しい機能を追加していきます

今回作るのは、ノベルゲームとアクションゲームです

まずノベルゲームでは、部屋の移動に3Dダンジョンを追加します

これまでは普通に画面を切り替えて移動していましたが、今回は一人称視点で3D空間を歩けるようにします

最初にGoogle AI Studioを開き、一人称視点の3D迷路を作ってもらいます

次のことをAIにつたえます

AIにはHTML1ファイルで動くこと、キーボードで移動できること、最初はワイヤーフレームで作ることを伝えます

以下の仕様で主観視点3DマップをHTML1ファイルで生成すること

//キーボードで移動できること
//ワイヤーフレームでつくること
//テクスチャーメニューで壁にテクスチャを貼ることが可能

いきなり完成したゲームを作ろうとすると、どこに問題があるのか分かりにくくなります

そこで最初はワイヤーフレームだけのシンプルな3D迷路を作ります

AIにメッセージを入力すると、すぐにプログラムの作成が始まります

完成したHTMLファイルを実行してみると、一人称視点で移動できる3D迷路が表示されました

壁や通路はシンプルですが、キーボードを使って迷路の中を移動できます

これで3D部分の基本となるプログラムができました

次は、この3D迷路をこれまで作ってきたノベルゲームエディタに組み込みます

ノベルゲームのプログラムと3D迷路のプログラムをAIに読み込ませます

そして、ノベルゲームから3Dダンジョンへ移動できるようにすること、3Dダンジョンの形を編集できるようにすることを伝えます

AIが2つのプログラムを確認し、新しいプログラムを作ってくれます

ノベルゲームに全ストーリーAI出力の左となりに3Dダンジョン編集メニューを追加すること

ノベルゲームに全ストーリーAI出力の左となりに3Dダンジョン編集メニューを追加すること

//3Dダンジョン編集ではシーンプレビューで実際に移動できること
//3Dダンジョン編集ではシーンプレビューがつくった3Dダンジョンに切り替わること
//現在のメニュー真ん中が切り替わり、3Dダンジョンを2Dブロックでつくれること
//現在あるゲームの機能は絶対に削除しないこと

今回は2つのファイルを1つにまとめて出力されたため、メモ帳などを使ってそれぞれのファイルに分割して保存します

保存したファイルを実行すると、これまでのノベルゲームエディタに3Dダンジョンの機能が追加されました

さらに中央に表示されたブロックを組み替えることで、3Dダンジョンの形も編集できます

これならプログラムを直接書き換えなくても、ゲームに合わせて通路や部屋を作ることができます

ただし、この状態ではまだワイヤーフレームに近く、ノベルゲームの舞台としては少し寂しく見えます

そこで次は、壁や床、天井に画像を貼り、3Dダンジョンを洋館のような雰囲気に変えていきます

次は3Dダンジョンに画像を貼り、洋館のような雰囲気に変えていきます

現在の3Dダンジョンは移動やマップの編集はできますが、壁などの見た目はとてもシンプルです

そこで壁や床などに好きな画像を登録できる機能を追加します

Google AI Studioにプログラムを読み込ませ、3Dダンジョンの壁や床、天井にテクスチャを登録できるようにしてほしいと伝えます

以下の通りファイルを改修すること
//コマンドの追加の実行する内容で3Dダンジョンに移動を追加
//3Dダンジョン編集ウィンドウで「高さ」の隣にシーンの出入口の設定ボタンを追加
//3Dダンジョン編集ウィンドウで、天井、壁、床のテクスチャ読み込みボタンをつけること、テクスチャの読み込みは画像タブの画像から読み込むことができること
//人物タブで各表情に画像が表示されること
//背景画像をよみこんでいなくても、画像タブで左右の位置ボタンをクリックした時にその画像が表示されること
//機能は絶対に削除しないこと

テクスチャとは3Dの壁などに貼り付ける画像のことです

プログラムが完成したら、次は実際に使用する画像を用意します

今回はChatGPTを使って洋館風の画像を作ります

まずは壁の画像です

3Dダンジョンの壁に使うため、洋館の壁を真横から見た画像になるように伝えます

普通のイラストでは斜めから見た画像になることがありますが、壁に貼り付けるため、できるだけ正面から見た画像にすることがポイントです

以下の条件で画像を生成すること
//3Dダンジョンの壁にテクスチャとして使用する
//真横から見た画像
//洋館の壁
//比率は正方形であること

これで洋館らしい壁の画像ができました

続いて天井を作ります

天井の場合は下から見上げた画像になるようにChatGPTへ伝えます

以下の条件で画像を生成すること

//3Dダンジョンの天井にテクスチャとして使用する 
//真下から見た画像 
//洋館の天井 
//比率は正方形であること

最後に床を作ります

こちらは反対に、床を真上から見た画像になるように伝えます

以下の条件で画像を生成すること
//3Dダンジョンの床にテクスチャとして使用する
//真上から見た画像
//洋館の床
//比率は正方形であること

これで壁、天井、床の3種類の画像がそろいました

作った画像を3Dダンジョンに読み込み、それぞれの場所へ設定します

すると、シンプルだった3Dダンジョンが洋館のような見た目に変わりました

同じ3Dマップでもテクスチャを変えるだけで、かなり雰囲気が変わります

さらにノベルゲームで使用するキャラクター画像も読み込みます

キャラクターごとに画像を設定し、画面に表示する位置や大きさを調整します

ストーリーについても、すべて自分で考える必要はありません

今回のノベルゲームエディタには、AI用のストーリーを作るための機能を用意しています

この機能を使ってAIにストーリーを考えてもらい、ゲームへ設定します

これでキャラクター、ストーリー、3Dダンジョンがそろいました

実際にゲームを動かしてみると、ストーリーの途中から3Dダンジョンへ入れるようになっています

ワイヤーフレームだったときと比べると、洋館らしい雰囲気もかなり出てきました

しかし、このままでは3Dダンジョンに入ったあと、別の場所へ移動するための出口がありません

そこで次は3Dダンジョンに出口を追加して、出口に入ると別の部屋へ移動し、ストーリーの続きを進められるようにします

次は3Dダンジョンに出口を追加していきます

現在の状態でも3Dダンジョンの中を自由に移動できますが、出口がないため、その先へ進むことができません

そこでGoogle AI Studioにプログラムを読み込ませ、3Dダンジョンに出口を追加してほしいと伝えます

以下の通り改修すること
//「出入口設定」ボタンをクリックした後のXY設定をマップで選択ボタンにすること、マップで選択された場所は2Dマップ上で赤表示になること、マップ選択ボタンで2Dマップをクリック後は出入口の向きを設定できてその向きのマスにプレイヤーは出る、入る時はその方向から入るとシーン移動する
//出入口設定ウィンドウでは出入口の壁テクスチャを選択できるように
//設定済みの出入口をクリックすると再度場所を選ぶことができる、ただ現在のゴミ箱マークは消さないし、ゴミ箱クリックで削除できる機能はそのままにすること
//入口から入った後のシーン移動後はそのシーンのイベント一覧に従いイベントが実行されるように

出口に入ると別の部屋へ移動し、そのままストーリーの続きを進められるようにします

プログラムが完成したら、次は出口に使う画像を用意します

今回は洋館の雰囲気に合わせて、ChatGPTで扉の画像を作ります

最初に作った画像は少し小さく見えたため、より存在感が出るように両開きの大きな扉へ変更しました

ゲーム素材として使うため、できるだけ正面から見た画像になるように作ります

以下の条件で画像を生成すること
//3Dダンジョンのとびらにテクスチャとして使用する
//真横から見た画像
//洋館の扉
//比率は正方形であること

これで出口用の画像も完成しました

さっそくプログラムを実行して、扉の画像を読み込みます

3Dダンジョンの出口に扉を設定し、ストーリーも準備します

ゲームを最初から実行してみます

ストーリーを進めていくと、途中から3Dダンジョンへ移動します

ダンジョンの中を進むと、先ほど設定した出口の扉が見えてきます

その扉まで移動すると、しっかり別の部屋へ移動できました

さらに移動したあと、そのままストーリーの続きを進めることもできます

これでノベルゲームの中に、実際に自分で歩いて探索できる3Dダンジョンを組み込むことができました

普通に背景を切り替えて部屋を移動するだけの場合と比べると、ゲームらしい演出がかなり強くなります

また、今回の方法ならダンジョンの形やテクスチャを変えることで、洋館以外の場所も作ることができます

例えば地下迷宮、研究施設、宇宙船、学校など、画像を変えるだけでも違った雰囲気を作れます

ここまででノベルゲーム側の大きな追加機能は完成です

続いては、これまで作ってきたアクションゲームを改良していきます

今回は新しく海とマグマのステージを追加します

最初に海のステージから作ります

いきなりゲーム本体を変更するのではなく、まずは海だけを表示する簡単なプログラムをAIに作ってもらいます

Google AI StudioにHTML1ファイルで動くことを伝え、海の波や水面の動きが分かる風景を作ってもらいます

HTML1ファイルで以下の3Dワールドを生成すること
//海岸
//波と地面は分かれておらず自然の砂浜のように砂浜の上にも波は打ち寄せている
//波が打ち寄せる幅は調整できる
//unrealengineの3Dビュー画面のようにwasdqeとマウス左ドラッグで視点の移動をおこない、自由にマップをみることができる

プログラムが完成したら実行してみます

すると画面全体に海が表示され、波が動いているような風景ができました

このように最初に背景だけを別のプログラムとして作っておくと、イメージを確認してからゲーム本体へ組み込むことができます

次は同じ方法でマグマのステージも作っていきます

次はマグマのステージを作っていきます

海のステージと同じように、まずはマグマの風景だけを表示するプログラムをAIに作ってもらいます

Google AI StudioにHTML1ファイルで動くことや、マグマらしい動きや雰囲気を入れることを伝えます

HTML1ファイルで以下の3Dワールドを生成すること
//地獄の海岸、赤黒い浜辺のような足場の場所と海のマグマ
//黒い大きな岩の山が何個かある
//unrealengineの3Dビュー画面のようにwasdqeとマウス左ドラッグで視点の移動をおこない、自由にマップをみることができる

プログラムが完成したら、さっそく実行して確認します

すると赤く光るマグマが広がり、海とはかなり違った雰囲気の風景ができました

これで海とマグマの2種類の背景がそろいました

次はこの背景を、これまで作ってきたアクションゲームに組み込んでいきます

まず海のプログラムとアクションゲームのファイルをGoogle AI Studioに読み込ませます

そして、現在のステージを海のステージに変更してほしいと伝えます

このとき、これまで使えていた部屋や通路などの機能は残したまま、背景だけを海の雰囲気に変えるようにします

以下の通り、ゲームファイルを改修すること

//現在のワールドをビーチのワールドに
//壁は波にすること、基本設定に波など現在設定できるものを移動すること

AIがプログラムを修正したら、完成したファイルを実行します

実際にプレイしてみると、これまでのゲームの仕組みを残したまま、ステージ全体が海の雰囲気に変わりました

部屋の中を移動したり、通路を進んだりすることもできます

次は同じ方法でマグマのステージを作ります

今度は先ほど作ったマグマのプログラムとアクションゲームのファイルをAIに読み込ませます

そしてステージをマグマの雰囲気に変更してほしいと伝えます

以下の通り、ゲームファイルを改修すること
//現在の壁をマグマの海と黒岩の壁にすること
//足場は茶色の土にすること

完成したプログラムを実行すると、今度はステージ全体が赤く光るマグマの世界に変わりました

ゲームの仕組みはほとんど同じでも、背景や演出を変えるだけでプレイしたときの印象はかなり変わります

ここまでで海とマグマのステージをそれぞれ作ることができました

次はこの2つを1つのゲームにまとめます

海のステージとマグマのステージが入ったファイルをAIに読み込ませ、ゲームの途中でステージを移動できるようにしてほしいと伝えます

以下のマグマと海のファイルを以下の通り追加すること

//javascriptとHTMLの2ファイルに分割すること
//現在の石の壁とマグマと海の3バージョンをダンジョンとして選択できること
//基本設定でマップの登場する順番を調整できるようにすること
//フロアの2体の敵を倒すと次のマップに移動する
//マグマの現在の壁をマグマの海と黒岩の壁にすること足場は茶色の土にすること
//海のマップは壁は波にすること、基本設定に波など現在設定できるものを移動すること
//マップ以外の機能は絶対に変更しないこと

プログラムが完成したら、もう一度ゲームを実行します

最初は海のステージから始まり、ゲームを進めると別のステージへ移動できるようになりました

移動すると背景や雰囲気が大きく変わり、マグマのステージが表示されます

1つのステージだけで進むゲームよりも、途中で見た目が大きく変化することでメリハリが出ます

また、同じ仕組みを使えば森や雪山、砂漠などのステージを追加することもできます

AIに背景のプログラムを作ってもらい、それを既存のゲームに組み込んでもらうことで、少しずつステージを増やしていくことができます

ただし、ステージが増えただけではまだ大きな変化がありません

そこで次はボスキャラを追加します

マグマのステージをボス戦の場所にして、大きな敵や攻撃エフェクトを追加していきます

次はボスキャラを追加していきます

今回はマグマのステージをボス戦の場所にして、これまでよりも迫力のある場面を作ります

まずはボスキャラの画像を用意します

ChatGPTを開き、ボスキャラの見た目や雰囲気を伝えて画像を作ります

2Dアクションのドット絵のピクセルスプライトシート 
#サイドビューのみ、他方向は不要 
//大きい2足歩行のブタのボスモンスター 
//小さな足で破けたアメリカの陸軍のアーミー服を着ている
//ガニマタで正面に向かって歩いている（9コマ）
//怒って両手を上げる（5コマ）
//ペルソナのゲームにインスパイアされた
//文字、枠、はいれない
//上記のモーション
//各モーションに対応するフレームがあること
//純白背景
//ゲームボーイカラーのドット絵 
//ウルトラSD２頭身キャラ！  
//とても顔が大きい
//超コミカル
//手足は全体の十分の一

最初にできた画像がイメージと少し違った場合は、そのまま使わずに修正していきます

大きさや形、色、表情などを伝え直すことで、少しずつイメージに近づけることができます

このキャラの目の黒目を無くして
服を紫色に

今回は何度か調整して、ボスらしい大きなキャラクター画像を作りました

このスプライトシート上段で
キャラの幅が等間隔になっていないので修正すること
全部で3段にして等間隔になるように修正すること

次はボスが使う攻撃を作ります

今回はファイヤーボールを飛ばす攻撃を追加します

Google AI StudioにHTML1ファイルで動くことや、クリックするとファイヤーボールが飛ぶようにすることを伝えます

燃え盛る炎のファイヤーボールをHTML1ファイルで生成できるか
マウスクリックで左から右にとぶように
画面に15個出ても重たくならないように

炎が動いているように見えるエフェクトも入れてもらいます

プログラムが完成したら実行します

クリックすると画面にファイヤーボールが表示され、前へ飛んでいくようになりました

これでボスが使う攻撃の基本部分ができました

続いてボスキャラに動きを付けます

1枚の画像だけでは動いているように見えないため、アニメーション用の画像を準備します

作った画像を読み込み、動きごとに必要な部分を切り分けて保存します

例えば待機している状態や攻撃している状態など、複数の画像に分けておくことでアニメーションとして使いやすくなります

素材がそろったら、これまで作ったアクションゲームにボスを追加します

ゲーム本体のファイル、ボスキャラの画像、攻撃用のプログラムをAIに読み込ませます

そしてマグマのステージにボスが登場することや、ファイヤーボールを使って攻撃することを伝えます

以下の通り修正すること
//基本設定で「クリアの敵数」ゲージを設置、敵を1体から全部の間で次のステージ遷移をコントロールできるように
//基本設定で「ボスステージ」を設置、ステージ切り替え数いくつでボスステージになるかコントロールできるように
//ボスステージをつくること、ボスステージはマグマステージで1部屋だけにして縦60、横60マスにすること
//ボスステージはボスが1体とザコ敵が5秒に1体登場して全部で3体まで登場するように

//ボスの攻撃は添付ファイルのような大きな炎を6個全方向に飛ばす攻撃である
//アニメタブでボスの歩き4コマと攻撃3コマ設定できるように、ボスの巡回はプレイヤー巡回だがゆっくりとする
//ボスの大きさは普通の敵よりも大きく調整できるように
//基本設定タブで敵の大きさとは別にボスの大きさを調整できるように
//絶対に機能を勝手に削除しないように
//ボスはヒットストップしないように

完成したプログラムを実行してテストします

ゲームを進めると、これまでと同じようにステージが切り替わります

海のステージを進んだあと、マグマのステージへ移動すると大きなボスキャラが登場します

さらにボスから炎が飛んでくるようになり、普通のステージとはかなり違った雰囲気になりました

背景を変えるだけでも印象は変わりますが、大きな敵や専用の攻撃を加えることでボス戦らしさがさらに強くなります

ただし、この状態ではまだ少し迫力が足りません

そこで最後はボス専用のエフェクトや新しい攻撃を追加して、さらに見栄えを良くしていきます

最後にボス戦をさらに強化していきます

現在の状態でもマグマのステージに大きなボスが登場し、ファイヤーボールで攻撃してきます

ただし実際にプレイしてみると、まだ少し迫力が足りないように感じます

そこでボス専用のエフェクトと、新しい攻撃を追加します

今回は敵を一定数倒すとレベルが上がり、新しい技を使えるようにします

レベルアップすると、赤いレーザーを上から落とせるようにしました

AIに現在のゲームプログラムを読み込ませ、一定数の敵を倒したときにレベルアップすることと、新しい攻撃を追加することを伝えます

//ボスが攻撃する瞬間、赤くなり炎につつまれるように。その炎に触れた場合ふっとぶように
//ボスがダメージを受けるとヒットストップはかからないが、他の敵と同じようにシェイクするように
//ステージクリアの分だけ敵を倒した瞬間、ストップがかかるように。まったくストップがかからない場合はわけがわかない作りになってしまう。ストップがかかる時間は基本設定タブで調整できるように（0.1〜1秒）
//敵を一定数倒すとレベルアップするように、添付の炎の感じがプレイヤーの雷エフェクトのように青い炎の柱になるが攻撃2発目で炸裂するように、雷の攻撃と置き換わる。レベルアップに必要な数は基本設定タブで調整できるように（1〜100）
//現在の機能は絶対に削除しないように

さらにレーザーが画面上から落ちてくるようにして、通常の攻撃とは見た目が大きく変わるようにします

プログラムが完成したら、さっそくゲームを実行して確認します

敵を倒していくとレベルが上がり、新しいレーザー攻撃が使えるようになりました

これまでの攻撃だけのときと比べると、画面の変化が大きくなり、ゲームらしい派手さも出てきます

ボス戦でもファイヤーボールやレーザーなど複数の攻撃が表示されるため、かなり雰囲気が変わりました

今回追加した機能自体は、それぞれを見るとそれほど大きなものではありません

しかし背景を海やマグマに変えたり、ボスを追加したり、攻撃エフェクトを増やしたりするだけでも、ゲーム全体の見た目は大きく変化します

ノベルゲームでも同じです

普通に画面を切り替えるだけだった移動を3Dダンジョンに変えることで、探索している感覚を加えることができました

さらに壁や床の画像を変えれば、同じプログラムでもまったく違う場所として使うことができます

このようにAIを使えば、最初からすべてのプログラムを書く必要はありません

まず簡単な機能を作り、それを現在のゲームに追加しながら少しずつ完成度を上げていくことができます

今回もプログラムだけでなく、壁や床、扉、ボスキャラなどの画像もAIを使って用意しました

プログラムと画像の両方をAIで作れるため、ゲーム制作の知識が少ない場合でも試しながら形にしやすくなっています

また、今回作った仕組みをそのまま使う必要もありません

3Dダンジョンの画像を変えたり、別のステージを追加したり、ボスの攻撃方法を変更したりすることで、自分のゲームに合わせて自由に改造できます

今回のように既存のゲームへ機能を少しずつ追加していけば、AIだけでもゲームの内容をかなり広げることができます

このブログでは、これからも無料で使えるAIを中心に、ゲームやゲーム制作ツールを作る方法を紹介していきます

ぜひ実際にAIへメッセージを入力して、自分だけのゲーム作りに挑戦してみてください

こんにちは

この動画ではAIでゲームを超簡単につくる方法を紹介します

今回はAIをつかったローグライクアクションゲームの作り方を紹介します

AIをつかうので簡単に高度なゲームをつくることができます

Youtubeでも紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

使用したツールとプログラムは次のリンクからダウンロード＆プレイできます
ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

今回紹介するゲーム

ゲームの素材を用意する

主人公キャラのスプライトシートをつくる

2Dローグライクアクションゲームなので、ドット絵のキャラをつくります

画像生成にはGeminiを使用します

Geminiのサイトを開きプロンプトを入力します

主人公はレジスタンスの男性戦士という設定にします

つぎの通りAIに伝えます

//2D横アクションRPGゲームのドット絵
  //歩く（8コマ）（細かくモーションを動かす）
  //ライフル銃を腰構えのポーズで歩く（8コマ）（全ての絵が別になるように、右足と左足が重なる瞬間、右足と左足がそれぞれ前になる瞬間を必ずふくめること）
  レジスタンスの男性戦士、髪の毛はミディアムロングの金色、服は青のジャケット、黒のズボン
  //予備動作→正拳突き
  //予備動作→大きくアッパーカット
  //前回り受け身、ローリング
  //上記のモーション
  //画面上には相手のキャラや別のキャラクターは出さない
  //線などのエフェクトはつけない
  //各モーションに対応するフレームがあること
  //ウルトラSD 2頭身キャラ！
  //純白背景
  //ゼルダの伝説にインスパイアされた
  //RPGのペルソナに登場するような敵キャラ
  //眼鏡はつけていない

しっかりプレイヤーの画像が生成できました

それぞれのモーションがしっかりと表現されています

指示した足の動きのコマ割りも完璧に描画されました

これで主人公キャラクターの素材準備は完了です

敵キャラのスプライトシートをつくる

ChatGPTはピクセル画像がキレイに出やすいです

最初の敵としてゾンビのキャラクターを作成します

プロンプトでゾンビキャラの特徴をAIに伝えます

画像生成にはChatGPTのサイトを使用します

次のとおりAIにつたえます

//2D横アクションRPGゲームのドット絵
  //ゾンビの歩き（6コマ）
  //予備動作→噛みつき攻撃（5コマ）
  //予備動作→おそいかかる（5コマ）
  //爆発（3コマ）
  //上記のモーション
  //画面上には相手のキャラや別のキャラクターは出さない
  //線などのエフェクトはつけない
  //各モーションに対応するフレームがあること
  //ウルトラSD 2頭身キャラ！
  //純白背景
  //ゼルダの伝説にインスパイアされた
  //RPGのペルソナに登場するような敵キャラ
  //ゾンビ、

しっかり絵ができました

しかし、足のアニメーションで不足しているのがあります

指示通りにゾンビのドット絵が生成されました

しかし歩行アニメーションに必要な足が揃った瞬間の絵がありませんでした

そこで足りない画像を追加で作る必要があります

この修正作業にはGeminiを使用します

（※　最近はかなり改善されましたが、ChatGPTは足がそろった画像をつくるのが苦手です）

ジェミニに先ほどのファイルを渡して作成を依頼します

次のとおりAIにつたえました

一番上の段の歩きが足が揃った瞬間がないので、足が揃った瞬間の絵を2つ入れて

しっかり足のそろったアニメーションができました

これでしっかりと足が揃った絵を作ることができました

続いて同じように他のモーションの絵を作ります

アニメーションの絵はプロンプトでコマ数を指定します

コマ数を入れることで絵の細かさをコントロールできるからです

次は比較のためにジェミニでゾンビ絵を作ってみます

先ほどチャットジーピーティーに渡したのと同じメッセージを入力します

しっかり画像ができましたが帽子が不自然です

帽子をとるようにAIに伝えます

生成された画像を見るとゾンビが帽子を被っていました

帽子は不要なので消すように伝えて、もう一度作り直します

しっかり帽子をかぶっていないゾンビができました

帽子をかぶっていないゾンビをつくることができました

次はゴーストっぽいキャラをつくります

さらに敵キャラをつくります

つぎの通りAIにつたえます

//画面上には相手のキャラや別のキャラクターは出さない
//線などのエフェクトはつけない
//各モーションに対応するフレームがあること
//ウルトラSD 2頭身キャラ！
//純白背景
//ゼルダの伝説にインスパイアされた
//RPGのペルソナに登場するような敵キャラ
//ゴースト拳法家

しっかり敵キャラができました

次は飛んでいるゴーストの魔法使いを作ります

ゲームに組み込む際は画像の背景を透過させる必要があります

あとで切り取りやすくするための工夫をプロンプトに入れます

背景を白くするようにと明確に命令しました

次のとおりAIにつたえます

//2D横アクションRPGゲームのドット絵
  //浮遊しながら歩く（6コマ）
  //予備動作→噛みつき攻撃（5コマ）
  //予備動作→叫ぶ（5コマ）
  //爆発（3コマ）
  //上記のモーション
  //画面上には相手のキャラや別のキャラクターは出さない
  //線などのエフェクトはつけない
  //各モーションに対応するフレームがあること
  //ウルトラSD 2頭身キャラ！
  //純白背景
  //ゼルダの伝説にインスパイアされた
  //RPGのペルソナに登場するような敵キャラ
  //骸骨魔法使い、足はない

しっかり敵キャラがあらわれました

続いてスケルトン騎士の作成に進みます

こちらは再びChatGPTを使用して作成しました

次のとおりAIに伝えます

//歩く(6コマ)（細かく足をすりっとこと）
  //歩く(6コマ)（細かく足をすりっとこと）
  //空中爆発する
  //上記のモーション
  //画面上には相手のキャラクターの大きさをつそろえる
  //目が光っている悪い魔法使い
  //予備動作→パンチ (4コマ)
  //予備動作→噛みつく (4コマ)
  //歩く(6コマ)（細かく足をすりっとこと）
  //スーパーファミコンの2D横スクロールゲームのドット絵
  //サイドビューのみ、他方向は不要
  //スケルトン
  //すべてのキャラクターの大きさをそろえる
  //目が光っている悪い魔法使い
  //予備動作→パンチ (4コマ)
  //予備動作→噛みつく (4コマ)
  //歩く(6コマ)（細かく足をすりっとこと）
  //ウルトラSD 2頭身キャラ！
  //純白背景

キレイなドット絵のスケルトン戦士があらわれました

やはりChatGPTの方がキレイで描きこまれたドット絵を作りやすいようです

しかし今回も足が揃った絵が出力されませんでした

歩いている時に足が揃っているパターンをつくりなおします

歩いている時に足が揃っているパターンをつくります

Geminiで作り直します

しっかり歩きのスプライトシートが完成しました

次はしっかり足が揃った瞬間の絵を作ることができました

最後にゴーレムの敵キャラクターを作成します

次のとおりAIにつたえます

//2D横アクションRPGゲームのドット絵
//歩き（6コマ）
//予備動作→目からビームを出射構え（5コマ）
//予備動作→目を大きく開ける（5コマ）
//ダメージのくらいポーズ（3コマ）
//上記のモーション
//画面上には相手のキャラや別のキャラクターは出さない
//線などのエフェクトはつけない
//各モーションに対応するフレームがあること
//ウルトラSD 2頭身キャラ！
//純白背景
//ゼルダの伝説にインスパイアされた
//RPGのペルソナに登場するような敵キャラ
//ゴーレムサイクロプス

絵があらわれましたが、このままでは使えません

AIに指示を出してゴーレムのドット絵を生成しましたが、ゴーレムは正面を向いてしまいました

横向きになおすために、次のとおりAIにつたえます

2Dアクションサイドビュー用に横向きにすべてのスプライトを修正できるか

しっかりゲーム用のゴーレム風の敵キャラが現れました

今度はしっかり横向きになったゴーレムがあらわれました

一通りのアニメーション素材が完成しました

ここからは完成した画像を個別のゲーム用素材に切り出す作業です

このカットツールは無料で配布しています

ぜひ使ったり、改造してみてください

>> 「ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ」のページ

ブログの配布ページで公開しているカットツールを使用します

まずは生成した主人公キャラクターのドット絵を読み込みスプライトシートから切り抜きます

歩行モーションや攻撃モーションをドラッグして赤い枠で囲みます

次に空を飛ぶ白装束のゴースト魔法使いの画像をツールに読み込みます

こちらも同様に必要なアニメーション部分を枠で囲んで切り出します

続いて紫色のローブを着たスケルトンの切り出し作業を行います

同じく魔法を出しているイメージを重点的に抽出します

つづいて画像のゾンビキャラの切り出しをします

さらに緑色のゾンビキャラクターの画像もツールに入れます

爆発エフェクトを含むゾンビの歩行や攻撃パターンをバラバラに切り出します

すべてのキャラの切り出しが終わりました

最後に横向きに修正した一つ目のゴーレムの画像を読み込みます

歩く絵のパターンや攻撃のパターンをすべて枠で囲んで素材の切り出しを完了させます

GoogleのAntigravityなどの自律型のAIエージェント機能を使えば自動的に画像を切り出すことが可能です

しかしまだまだ切り出しの失敗が多く発生します

そのため現状は自分で範囲を選択して手動で作業する方が確実です

AIで背景画像をつくる

次はゲームの舞台となる背景画像を作ります

今回はダンジョンを舞台に設定するので、壁と床の石の模様のテクスチャ画像を生成します

ジェミニのチャット欄にプロンプトを入力します

次のとおりAIにつたえます

#ドット絵
#ボクセルの表面に貼るテクスチャーを生成
#お城の地下の白めの岩壁
#ダンジョン
#上記の画像を生成

壁っぽいテクスチャーが完成しました

壁っぽいテクスチャーが完成しました

このクオリティならゲームにつかうことができそうです

つづいて床の画像をつくります

色は同系色のみに限定して石畳の地面を描画させます

#ドット絵
#ボクセルの表面に貼るテクスチャーを生成
#お城の地下の少し明るめの灰色茶色の石畳の地面（色は同系色のみ）
#ダンジョン

これでゲームに必要な画像素材がすべてそろいました

キレイな石畳の壁の画像が完成しました

AIでゲームのプログラムをつくる

AIでゲームのプログラムを一気につくります

>> 「Google AI Studio」のサイト

グーグルAIスタジオのサイトに移動して、つくるゲームをつたえて一気にプログラムをつくります

次のとおりAIにつたえます

あなたは世界最高峰のフロントエンドエンジニア兼ゲームクリエイターです。 Three.js (r128)、OrbitControls、HTML5
Canvas 2D API を使用して、「3Dボクセルダンジョン エディタ兼ローグライクアクションゲーム」を1枚のHTMLファイル（CSS,
JS込み）で作成してください。

外部アセット（画像ファイル等）は一切使用せず、デフォルトグラフィックは全て内部のCanvas 2Dで動的生成してください。
以下の【超詳細・完全網羅仕様書】に記載された内容（パラメータ、計算式、UI構造、色、タイマー、描画座標、状態遷移、編集ビューアの挙動、カメラとキャラの相対関係など）を1文字の妥協や省略も許さず、100%完全に実装してください。コードが非常に長大になることは許可します。省略は絶対に禁止です。

【1. 全体レイアウトとCSSスタイル仕様】

  - body要素: margin: 0; overflow: hidden; background-color: #1e1e1e; font-family:
    sans-serif; color: #eee; display: flex; flex-direction: column;
    height: 100vh;
  - 上部ツールバー (#toolbar): 高さ50px, 背景 #333。左にタイトル、右にトグル式のプレイボタン（#btn-toggle-play）。通常時は赤色（#e53935）、プレイ中は緑色（#4CAF50）。
  - メイン領域 (#workspace): flex-grow: 1; display: flex; height: calc(100vh - 50px);
  - 左側3Dシーンビュー兼ゲーム画面 (#game-container):
    Three.jsのCanvasを描画。通常（編集中）はマップ構造や2Dスプライトの配置を自由なカメラ操作（OrbitControls）で確認・俯瞰できるエディット用の3Dプレビューアとして機能し、テストプレイ中は実際のゲーム画面となる。
      - 左上HUD (#ui-overlay): ステータス（編集中は黄色、プレイ中は緑色）と操作説明4行。
      - 左下HUD (#weapon-hud): プレイ中のみ表示。武器名と弾数。背景半透明黒。
      - 右下アクションパッド (#action-pad): プレイ中のみ表示。丸いDODGEボタン(青)とWEAPONボタン(緑)。
  - 右側サイドバー (#sidebar): 幅350px、背景
    #252526。上部に5つのタブ切り替えボタンを配置。全てのメニュー文言は日本語で記述すること。

【2. サイドバーUIの完全実装】

  - 画像読み込み: <input type="file"
    multiple>で画像を配列プールに格納。64px四方の枠にサムネイルとファイル名をリスト表示。クリックで青枠選択状態にする。
  - ダンジョン画像:
    選択中画像を表示する高さ250pxのCanvas。黒半透明を重ね、ドラッグで矩形選択（赤枠）。「壁に適用」「床に適用」で選択範囲を128x128の非表示Canvasに切り出し、THREE.CanvasTexture
    にしてマテリアルを更新。
  - アニメーション:
    <details>と<summary>によるアコーディオン。プレイヤー近接、プレイヤー銃、敵6種のセクション。各セクションに「歩行1〜4」「攻撃1〜2」のプレビューimgと非表示ファイルinputをグリッド配置。選択時に64x64
    Canvasに上書きしテクスチャ再構築。
  - 基本設定 (input type="number"): プレイヤーサイズ(0.8, step:0.1)、移動速度(0.15,
    step:0.01)、敵サイズ(0.8, step:0.1)、ホーミング弾寿命(3.0秒,
    step:0.5)、残像アタック寿命(0.7秒, step:0.1)、カメラ高さ(1.5,
    step:0.5)、カメラ角度(45度, step:5)、カメラ遠近(6.0,
    step:0.5)、COLS(60)、ROWS(60)、部屋最大数(10)、敵発見ディレイ(0.5秒)、被弾回復ディレイ(0.7秒)。「適用して再生成」ボタン。ゲーム開始時は初期値でマップを生成して3Dビューに表示。
  - 敵設定: 敵6種の出現ウェイト（初期値：レーザー15, ホーミング15, ダッシュ15, 全方位15, 散弾25, ピストル15）。

【3. マップ生成・部屋・通路・ブロック充填・床と影のアルゴリズム】

1.  COLS(60) × ROWS(60)の2次元配列 map を 1(壁) で、roomMap を -1 で初期化。
2.  最大設定数（初期10）まで、幅10〜17、高さ10〜17の部屋をランダム生成。既存部屋と重ならなければ床(0)にし、roomMap に部屋IDを振る。
3.  部屋の中心同士をL字通路(0)で繋ぐ。**通路の幅は必ず「2マス幅」**にする。通路部分の roomMap は -1 のまま。
4.  主人公の初期位置: インデックス0の部屋の中心座標。
5.  3Dメッシュ構造（内部充填の徹底）: map が 1 の座標には、表面だけでなく壁の裏側やマップの端まで例外なく全て
    BoxGeometry(1, 2, 1) の壁メッシュをY=1.0で配置し、空間を隙間なく埋め尽くす。
6.  幅優先探索で床からの距離を計算し、距離1は明度1.0、距離2は0.15、距離3以上は明度0.0のマテリアルを適用。床は
    BoxGeometry(1, 0.2, 1) (Y=0.1)を配置。床上面の高さはY=0.2となる。
7.  めり込み防止: キャラクター（プレイヤー・敵）のY座標は、床上面からのめり込みを防ぐため常に 0.2 + (スケール / 2) に固定すること。
8.  足元影とZ-Fighting対策:
    プレイヤーと敵の足元には、丸い半透明グラデーションの影（PlaneGeometry(0.8, 0.8)）を配置する。床とのZ-Fighting（ちらつき）を防ぐため、影のY座標は床上面のすぐ上（Y=0.202）に配置し、マテリアルには必ず
    depthWrite: false と transparent: true を設定すること。

【4. 3Dビューアの挙動とカメラ・キャラの相対関係（超重要）】

OrbitControls を導入する。

  - 初期配置（マップ生成直後・ゲーム開始時）:
    ゲーム開始直後の非プレイ（編集中）状態であっても、プレイヤーキャラクターおよび自動生成された各部屋の敵キャラクターは、3D空間上に漏れなく初期配置された状態で表示（可視化）されていなければならない。カメラは、プレイヤー初期位置から見て、基本設定のパラメータ（高さ、角度、距離）に基づき、以下の式で後方上空に配置される。
    rad = (カメラ角度 * Math.PI) / 180 camera.position.set(startX, playerY + カメラ高さ +
    カメラ距離 * Math.sin(rad), startZ + カメラ距離 * Math.cos(rad));
    controls.target.copy(player.position);
  - 非プレイ時（編集中 isPlaying === false）の挙動:
    マップ生成の確認やエディット機能として非常に重要な役割を持つ。OrbitControlsの機能が完全に解放され、マウスドラッグによる自由な視点回転・パン・ズームが可能となる。自動追従は完全に停止する。
    プレイヤーキャラクター及び各部屋に配置された全ての敵キャラは、一切アニメーションせず（テクスチャは1枚目の歩行コマ0に固定して停止）、移動やAIによる索敵・攻撃などのアクションも完全に停止する。ロックオンマーカーも非表示とする。
    キャラクターは全て
    THREE.Sprite（ビルボード）で構成されているため、編集中にカメラをどの角度に回転させても、常にカメラ（画面）の真正面を向き続ける（足元の影のみ床に張り付いた状態を維持）。
  - プレイ中（稼働時 isPlaying === true）の挙動:
    OrbitControlsのターゲットを毎フレームプレイヤー座標に強制固定する。カメラ位置は基本設定から算出した理想位置に対して、0.1
    のlerp（線形補間）で滑らかに追従移動させる。
      - 手前壁の透明化: Z座標がプレイヤーより 0.5〜2.5 手前でX座標差が 1.0 以下の壁は、透明度0.45 (depthWrite:
        false) のマテリアルに毎フレーム差し替え、プレイヤーを視認可能にする。

【5. 部屋の出入り・視界・敵の行動制限（超重要）】

  - visitedRooms (Setオブジェクト)を用意し、ゲーム開始時に部屋0を登録する。
  - 毎フレーム、プレイヤーの現在座標から currentRoomId を取得。-1以外で未登録なら visitedRooms に追加。
  - 可視性: 床メッシュと敵グループは、自身の roomId が visitedRooms に含まれている場合のみ visible = true
    になる（編集中は全体の確認のため、全床・全敵を強制的に visible = true とする）。
  - ロックオンと索敵の制限: プレイヤーが部屋内にいる（currentRoomId !==
    -1）時のみ、同じ部屋にいる敵だけを対象に索敵・ロックオン判定を行う。プレイヤーが通路（currentRoomId
    === -1）にいる時は、一切のロックオンと攻撃が行われない。
  - 敵の行動制限: 敵は自身の部屋が visitedRooms
    に入ると描画されるが、プレイヤーが自分と同じ部屋にいる時だけ攻撃行動（弾撃ち、ダッシュ等）を実行する。プレイヤーが通路に逃げたり別部屋にいる時は、敵は攻撃を止め、部屋内をランダムに徘徊（速度0.02）するだけの待機状態に戻る。

【6. プレイヤーの操作・自動攻撃・武器・ダッシュアタックの挙動】

  - Spriteで描画。Y座標は前述の通り 0.2 + (サイズ / 2)。
  - WASD移動と矢印キー（基本速度0.15）。左移動時テクスチャ反転。
  - ロックオンの更新タイミングと解除（超重要）:
      - ロックオン対象となる最短の敵の「検索と更新」は、プレイヤーが移動（WASDキー入力）を行っている間のみ実行される。
      - 停止中、対象の敵がいればロックオンマーカーを表示する。ロックオンマーカーのグラフィックは、128x128の Canvas
        で黄色、線幅6、円と十字線を描画し、不透明度0.8のテクスチャを適用する。マーカーの3D空間における描画サイズは、物理ジオメトリサイズ
        PlaneGeometry(1.2, 1.2)（直径1.2相当）とし、対象の足元の床に重なり（Z-fighting）なく表示すること。
      - マーカー表示中、プレイヤーはその敵の方を自動で向き、対象を固定したまま自動攻撃を開始する。
      - 自動攻撃によって対象の敵を倒した場合、ロックオンマーカーは即座に消失する。プレイヤーが再び移動キーを入力して状態をリセットするまでは、他の敵を自動的に再ロックオンすることはない。（連戦を防止するハック&スラッシュ仕様）
  - 近接（2段階攻撃：ダッシュアタック）:
      - 射程5.5, ダメ2, CD650ms。攻撃アクションは明確な2段階で構成される。
      - 第1段階（接近と振り上げ）:
        攻撃開始時、対象の敵に向かって直線的にダッシュする。ダッシュ速度は「プレイヤーの基本速度の6倍」とする。この間（開始150ms未満）のアニメーションはコマ4（剣の振り上げ）を表示。
      - 第2段階（ダメージ判定と振り下ろし）:
        移動処理において「敵との距離が0.6以下になる（命中）」「最大移動距離(5.0)を消化しきる（外れ）」「壁に衝突する（外れ）」のいずれかを満たすとダッシュを終了する。ダッシュ終了時に敵がいればダメージを与え、アニメーションはコマ5（剣の振り下ろし）へ遷移する。
  - 銃: 同じ部屋内の敵でロックオン時のみ攻撃、射程8.0, ダメ1,
    CD300ms。装弾数6、リロード1500ms。水色丸弾(速度0.4)。1回の射撃につきコマ4を表示する。

【7. 敵のAIと6種の挙動】

  - 部屋に2〜3体配置。HP3（頭上に緑のHPバースプライト）。
  - 発見: 同部屋で距離10未満になると白くフラッシュし、設定ディレイ時間後に攻撃開始。
  - 被弾とヒットストップ仕様（超重要）:
    敵が攻撃を喰らった瞬間、攻撃者の逆方向へ1.0ノックバックする。その後、**「350msのヒットストップ時間」**が発生し、この間は敵の移動処理・AI・攻撃アクションが完全に動作停止状態となる。さらに、この350msの間は敵キャラクターがその場で左右上下に細かく不規則に激しく揺れる「シェイク振動（最大幅0.12程度）」を発生させ、被弾時の衝撃表現を再現すること。ヒットストップが解除された後、設定されたディレイ時間（初期値0.7秒）が経過するまでは敵の攻撃アクションがブロックされる。また、死亡時は350ms間赤くなり、その後消滅する。敵の攻撃CDは2200ms。
    1.  レーザー(紫): 弾スケール(0.2, 0.7, 1), 弾速0.28。
    2.  ホーミング(水): 弾スケール(0.4, 0.4, 1), 弾速0.06。lerp(0.05)で追尾。寿命は設定値。
    3.  ダッシュ(橙): 速度0.12で400ms間プレイヤーへ突進。接触ダメージ。
    4.  全方位散弾(緑): 45度刻みの8方向へ弾速0.08。
    5.  散弾3方向(赤): 正面と左右0.4ラジアンの3方向へ弾速0.12。
    6.  ピストル残像(白): 自身の現在テクスチャを複製(透明度0.6)し、弾速0.24で射出。寿命は設定値。

【8. デフォルト画像の精密描画 (Canvas 2D)】

画像未アップロード時は内部Canvasで生成。

  - プレイヤー近接:
    黄色の円(顔)、足(上下移動)。第1段階の攻撃(コマ4)で斜め上の鋭い振り上げ剣線、第2段階(コマ5)でダイナミックな振り下ろしの三日月状の剣線（水色・線幅6）を描画。
  - プレイヤー銃: 灰色の銃身、攻撃コマ（コマ4）でオレンジと白が幾重にも重なる派手なマズルフラッシュ。
  - 敵各種:
    指定色(紫,水,橙,緑,赤,白)の円。白四角に黒目の挑戦的な目。攻撃コマ（コマ4〜5）で怒りの赤目になり、外側に力を蓄えるような白い円弧のオーラを描画。

上記仕様の計算式・条件・ビューアの挙動・状態遷移などを1字1句漏らさず、完全に動作する1つのHTMLファイルとして出力してください。

しっかりプログラムをつくることができました

プログラムが完成したらダウンロードして、実行しましょう

AIでつくったプログラムと画像を合わせてテストプレイしてみた

AIがつくったプログラムと素材を合わせました

AIでつくったプログラムの起動します

ブラウザ上のゲーム画面を開いて自作の画像素材を読み込ませます

しっかりキャラをうごかして、攻撃することができます

しかし、キャラクターの絵が縦に少し潰れて表示されてしまいました

画像を無理やり正方形の枠に押し込むことが原因のようです

また、背景の床のテクスチャにも不具合があり、設定した床の画像がスクロールに合わせて動きません

ゲームの基本システムと動作についてもバグがあるようです

つくったプログラムをさらにブラッシュアップする

またGoogle AI Studioでつくります

さきほどのプログラムを添付して、プログラムをつくります

バグをまとめて修正するためにAIへ指示を出します

さらに攻撃時の手応えを出すためのヒットストップ機能を追加します

プログラムを再生成する時はハルシネーションを防ぐために、直前に作成したプログラムを添付します

現在はAIが勘違いしたコードの生成を防げます

つぎのとおりAIにつたえます

あなたは世界最高峰のフロントエンドエンジニア兼ゲームクリエイターです。

以下の修正を添付ファイルにすること

修正する際に独断で現在の機能を絶対に削除しないこと

1文字の妥協や省略も許さず、100%完全に実装してください。

-----------------------------

敵の巡回の動きが少ないので、巡回タイプをアニメーションタブでそれぞれの敵キャラに設定できるように
アニメーションタブの敵キャラのそれぞれのアニメーション部分に一括読み込みボタンを置き、一括でアニメーションを割り当てられるように

廊下は暗くせず、常に普通の部屋と同じ明るさで表示すること

一番内側の壁しか表示されていない、二番目の壁も表示して、半分の暗さで描かれるように


キャラが壁にめり込む、特に手前の壁はめり込むことによりキャラが見えなくなるバグが発生している
また、左と右の壁の当たり判定が異なっているバグを修正し、すべの当たり判定を同じにすること

敵は2回以上の攻撃でやられるように


キャラの比率が元のアスペクト比率ではない

プレイヤーのドッジ（回避）がシフトボタンとボタンで動作できないので、できるように、またアニメーション（２コマ）も近接で設定できるように、回避行動の移動量は2キャラ分で、基本設定から調整できるように

床と壁の画像は読み込めるが、ダンジョンタブで赤枠が固定されておりドラッグで範囲を選択できない

ロックオン表示していない時でも攻撃してしまっている、攻撃とロックオンは必ず射程範囲内のみ

移動している時にロックオン、止まって攻撃発動

銃に攻撃判定がない、銃も近接攻撃と同じように敵はヒットストップがかかる

基本設定で近接攻撃のロックオン範囲を決められるように、デフォルトの範囲は６キャラ分

プレイヤーの攻撃は2段攻撃であり、2段目の攻撃に敵にヒットストップとシェイクがかかっていない

敵がダメージをくらった時は少しだけヒットバックがかかる

基本設定の部屋最大数の項目と入れ替え「部屋数」として部屋の数をランダムとしないこと、デフォルトは８とする

しっかりプログラムが完成したので、プレイしてみます

修正版のプログラムコードが完成したので再びプレイしてみます

画像が潰れる問題が無事に解決してキャラクターが綺麗に表示されるようになりました

しかし、ヒットストップや当たり判定にまだ違和感が残っています

さらにストーリー性が全くないので、エフェクトとストーリーを中心に追加で作り込みます

この素材は次のページにアップロードしています

>> 「ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ」

今回は、雷の魔法エフェクトを追加します

ゲームプログラムと一度につくるとエフェクトの作りこみが甘くなるので、別にエフェクトはつくりました

雷エフェクトファイルをゲームプログラムと一緒に添付してAIでプログラムをつくります

つぎのとおりAIにメッセージをつたえます

2段目.htmlファイルに次の修正をおこなうこと

新しくストーリータブを追加、ストーリータブでは背景とテロップ内容を書くことができる、これによりゲーム前にビジュアルノベルのように背景と画面下にメッセージボックスが表示され、終了しだいゲームが始まる
添付ファイルの雷とサンダーのエフェクトのようなエフェクトをプレイヤーの2段目の攻撃にいれること

しっかり雷エフェクトがゲームに登場しました

しっかり雷のエフェクトが攻撃した時にあらわれます

しかし、まだエフェクトが小さいようです

また画面全体の雰囲気が平坦です

画面にさらに変化をあたえたいとおもいます

次のとおり、AIにメッセージをつたえます

作成したプログラムに次の修正をくわえること
プレイヤーの2段目の攻撃のサンダーのエフェクトを画面上から雷のように発生するエフェクトに変更
ダンジョンの雰囲気を出すために画面四隅から暗くするように変更し基本設定で暗さを調整できるように

完成したゲームプログラムをプレイしてみます

しっかり雷のエフェクトが攻撃した時にあらわれて派手に光るようになりました

プレイヤーのアクションやドット絵もキレイにうつります

このブログでは、今後もAIを活用したゲーム作りのノウハウを配信していく予定です

ぜひゲームつくりにチャレンジしてください

ここまでご覧いただきありがとうございます

Youtubeも合わせてご覧ください
>> イラスト55 @ クリエイティブ情報を紹介

・・・となやんでいませんか？

こんにちは！

この記事では、AIを使って2Dの忍者アクションゲームを作る方法を紹介します

プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください

Youtubeでも紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームは次のリンクからプレイできます（予定）
>> ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

今回紹介するゲームのプログラム

今回この記事で紹介したゲームのプログラムです

キャラクターの画像をつくる

Geminiに移動してプレイヤーの画像をつくります

プレイヤー作成編の手順です

Geminiの入力画面を開き、ドット絵スプライトシート生成用のテキストを入力します

つぎのとおり、服の色、動きなどをAIに伝えます

2Dアクションのドット絵のピクセルスプライトシート
#サイドビューのみ、他方向は不要

//服は少し明るい青色

//立ち上がりから十字斬り（10コマ）
//走っている（5コマ）
//ジャンプしている（5コマ）
//しゃがんでいる（2コマ）
//ダメージを受けている（4コマ）
//ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた
//文字、枠、はいらない
//上記のモーション
//各モーションに対応するフレームがあること
//純白背景

入力欄下の送信ボタンを押して画像を生成させます

生成結果として白背景のスプライトシートが出力されます

次に、敵キャラクターであるサイバーパンク風のヤクザをつくります

引き続きGeminiにプロンプトを入力します

SFCレベルの2Dアクションのドット絵のピクセルスプライトシート、サイドビューのみ、他方向は不要、サイバーパンクのヤクザ、敵キャラクター、SDキャラ、描き込みすぎないように、歩いている9コマ、パンチ5コマ、ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた、文字や枠はいらない、上記のモーション、各モーションに対応するフレームがあること、純白背景、と指定して送信します。

画面上に紫髪のキャラ画像が出力されますが、

もう少し悪っぽくするために、サングラスをかけている、という追加テキストを入力して送信し、サングラスを装着した状態に修正されたスプライトシート画像を生成させます

続いて、2種類目の敵キャラクターである暗殺忍者を生成します。Geminiの画面で、SFCレベルの2Dアクションのドット絵のピクセルスプライトシート、サイドビューのみ、他方向は不要、サイバーパンクの小さめの暗殺忍者、敵キャラクター、小さめキャラ、SDキャラ、描き込みすぎないように、赤いしのびの服、ジャンプ5コマ、ジャンプしながら切りかかる5コマ、ダッシュ7コマ、ベルツナとSFCの忍者龍剣伝のゲームにインスパイアされた、文字や枠はいらない、上記のモーション、各モーションに対応するフレームがあること、純白背景、と指定して送信します。動画で使ったAIへのメッセージは概要欄のページにアップしてある旨が表示されます。生成された画像を確認すると頭部に銀髪が見えていたため、これから作る背景と色が重なってしまうことを理由に全域を赤に変えるため、赤い頭巾をかぶっているので、顔と髪の毛は頭巾で隠れている、という追加指示を送信します。全体が赤色に変更された画像が生成され、これを保存します。

キャラクター画像が揃ったところで、画像切り抜き作業に入ります。ブラウザ上で動作する独自の切り抜きWebツールを開きます。

このツールは過去の動画でも使用してきたもので、掲載ページは概要欄にあります。最初に、青い忍者のスプライトシートを切り抜きます。ファイルを選択ボタンから青い忍者の画像ファイルを読み込みます。そのままでは背景の白がゲームに映り込んでしまうため、ツール上部のマジック消しゴムを選択し、背景の白い部分をクリックして背景を透明の格子柄にします。続いて走るアニメーションの切り出しを行います。エリア選択ガイド機能を使用し、走る動作のエリアをドラッグして枠とマス目で囲みます。囲んだ部分をクリックして保存ボタンを押すことで、切り抜いた画像がバラバラに保存されます。

次に攻撃である十字斬りのアニメーションを切り出します。剣の絵が重なっていて枠で囲むことができないため、自由選択ツールに切り替えます。手動で範囲選択を行い、1つずつ囲んでダウンロードしていきます。

次に、1種類目の敵であるヤクザの画像を切り抜きます。ツールに画像を読み込み、歩きポーズのエリアをガイド枠で囲みます。たくさん囲んでいますが実際に使うのはこの中の4枚だけであり、最低でも歩きは4枚、攻撃は2枚あればなんとかなるという解説が入ります。必要なコマを選択してダウンロードします。最後に、2種類目の敵である赤い忍者の画像を切り抜きます。赤い忍者の画像をツールに読み込み、画面上に超高速で切り分けていきますというテキストが表示される中、ジャンプ、ジャンプ攻撃、ダッシュなどの各アニメーションコマを素早く範囲選択して切り出し保存を完了させます。

キャラクターの切り抜きがすべて終わった後、ゲームの背景画像を作成するためChatGPTを開きます

AIがわかりやすいように、パワーポイントでつくった図をプロンプト入力欄に添付します

テキスト欄には、
2D横スクロールのアクションゲームの背景、サイバーパンク風のビル、正面画像、ピクセルアート

と入力して送信します

ここからマップエディターの開発に入ります。Google CloudのPlaygroundを開き、Gemini 3.1 Pro Previewのモデルを選択します。プロンプト入力欄に、ピクセルタイルマップエディターを生成すること、という指示を入力し、左側をビューワー、右側をメニュータブとする画面構成や、画像の切り出し機能、レイヤー切り替え機能などを細かく指定して送信します。生成されたコードをダウンロードしてブラウザで実行します。初期状態のエディターを試すと、画像が小さいマス目に強制縮小されてしまう問題が発生します。そのため、左側のビューワーに展開した時にビューワーの拡大縮小ができ画面外に画像が隠れないように、画像を切り出した時または画像を貼り付けるときに切り出した大きさに最も近い大きさのタイルマップとして一気になるように気をつけて、という追加修正プロンプトを送信します。さらに、各3つのレイヤーで明度やコントラストの調整、レベル補正とトーンカーブの調整、Bloom発光効果の調整などができるよう機能追加を指示してプログラムを再生成させます。

新しくなったエディターをブラウザで開きます。背景画像を読み込み、枠で切り抜いたパーツを配置していきます。一番後ろの後景レイヤーには大きな街の画像を配置してレベル補正機能で全体を暗く設定します。中景レイヤーには分割したビルのパーツを配置します。一番前の前景レイヤーにはプレイヤーが移動できる足場や建物を配置して明るく補正し、どこを歩けるのか分かりやすくします。

次に、アクション部分のプロトタイププログラムを作成します。PlaygroundでGemini 3.1 Pro Previewを開き、忍者アクションゲームの基本動作の作成、ファミコンアクションへのこだわり動作、として慣性効果による滑らかな減速、しゃがみや攻撃時の硬直動作、しゃがみ判定、刀攻撃エフェクト、壁張り付きなどを指定し、HTMLファイルで出力させます。作成されたプログラムをブラウザで実行し、シンプルなブロックの画面で左右移動やジャンプ、刀攻撃、壁張り付きができることを確認します。

続いて、このプロトタイプとマップエディターを1つに統合する作業を行います。Playgroundで2つのコードファイルを添付し、添付したファイルの機能を組み合わせたコードを作成すること、マップエディットファイルの機能の削除は絶対に行わないこと、アニメタブを追加してプレイヤーや敵のアニメーション画像を設定できるようにすること、ゲームタブにテストプレイボタンを追加すること、といった指示を入力して送信します。生成された統合プログラムを開き、判定モードタブで足場の画像上に赤い矩形を描いて当たり判定を設定します。アニメタブで切り出しておいた各キャラクターの画像ファイルを割り当て、ゲームタブでマップ上にプレイヤーと敵を配置してテストプレイを開始します。しかし、停止時の設定が抜けており立ち止まっていても走り続けてしまう点や、壁登りアニメーションがない点などの課題が判明します。

最後の大規模修正を行います。PlaygroundでGemini 3.1 Pro Previewを開き、画像切り出しはパーツ単位で削除しないように、パーツ配置の時はグリッド間隔を調整できるように、レイヤーデータに当たり判定レイヤーを追加し前景の当たり判定を削除すること、絶対に機能を削除しないこと特にトーンカーブを削除しないように、といった非常に長い修正プロンプトを送信します。生成された最終プログラムを起動します。背景画像を読み込んでグリッドやスケールを調整して配置し、新設された当たり判定レイヤー機能でマウスドラッグによって精密な赤い当たり判定枠を設定していきます。キャラクター判定タブでは下部のアニメーションエディターを使ってコマの並び替えやサイズを調整します。すべての配置を終えてテストプレイを開始すると、ネオン看板が輝く街並みで当たり判定が正常に機能し、青い忍者がジャンプや攻撃、壁張り付きを行いながら敵と戦う本格的な2Dアクションゲームが完成して動画は終了します。

２つの添付したファイルの機能を合体させたコードを示せ
テストプレイ以外ではマップエディットファイルの機能で動作すること
//添付のマップエディットファイルの機能の削除は絶対に行わないこと
//右はマップエディットファイルのメニューはそのまま引き継ぐこと
//左はマップエディトファイルの動作をそのまま引き継ぐこと
//右の画像タブで読み込んだ画像の透過は読み込み後も保持され、マップエディットでも透過されること
//選択タブに画像を範囲選択消去ボタンを置くこと
//右のタブメニューにゲームとアニメのタブを追加すること
//アニメタブではプレイヤーと敵のアニメーションを追加できる
//プレイヤーのアニメーションは移動を4コマ、ジャンプ中を１コマ、刀で攻撃を４コマ、しゃがみを１コマ
//歩きのみの敵のアニメーションは歩き４コマ、パンチ２コマ
//銃攻撃の敵のアニメーションは歩き４コマ、銃２コマ
//ジャンプの敵のアニメーションは走り４コマ、ジャンプ中１コマが追加できるように
//それぞれのアニメは画像を読み込んだら、表示されるように
//前景は接触判定があり、中景、後景は当たり判定がないように
//アニメタブではそれぞれのキャラの画像の一括読み込みができる
//ゲームタブではプレイヤーの移動速度、ジャンプの高さ、攻撃範囲を調整できる
//敵の移動速度、ジャンプの高さを調整できる
//マップ全体の横幅を設定できる
//プレイヤーとそれぞれの敵の配置ボタンがある
//ゲームタブにテストプレイボタンがある
//テストプレイでは添付したアクションファイルの動作でキャラクターが動くこと
//テストプレイでは壁に張り付いている時に、十字キーでキャラクターは動くことのないようにする

ピクセルタイルマップエディターを生成すること
//右側が開閉式のメニューでありメニュータブがならんでいる
//左側がビューワーであり、ピクセルタイルを置くことができる
//右側タブメニューについて（画像タブ、画像選択タブ、レイヤータブに分かれている）
//画像タブでは、画像の読み込みボタンと画像の切り出しボタンがある、画像を読み込むと左のビューワ画面が画像切り出しビューに切り替わり切り出しを行うと通常のビューワーに戻る（切り出しはドラッグで範囲指定の他、数値でワクの大きさを指定することもできる）
//画像選択タブでは画像タブで切り出した画像を画像として見ることができる、また画像をクリックしてビューワーをクリックするとタイルとして置くことができる
//レイヤータブでは前景、中景、後景を切り替えることができる

FC忍者龍剣伝のような2D横スクロールアクションゲーム

//ジャンプ、移動、刀で攻撃、壁に張り付きができる

//下キーでしゃがみがあるように 壁は張り付いたらキーをはなしてもおちないように



//左側のビューワーに展開した時にビューワの拡大縮小ができ、画面外に画像が隠れないように

//画像を切り出した時、または画像を貼り付けるときに切り出した大きさに最も近い大きさのタイルマップとして一気にはりつくように


各3枚のレイヤーで以下のことが調整できるように

//明度、コントラストの調整
//レベル補正とトーンカーブの調整
//ブラー：ぼかし半径（Radius）の調整
//Bloom（発光）：閾値（Threshold）および発光強度（Intensity/Radius）の調整
//レイヤーごとの不透明度（Opacity：0～100%）および描画モード（Normal, Multiply, Additive/Screen 等）の変更



忍者龍剣伝のリュウハヤブサのような2Dアクションのピクセルスプライトシート 
//服は少し明るい青色

//刀を横振りしている（手前の腰から左手の片手で刀を抜き、上に向かって切り上げる、最後は奥の肩以上に剣先が上がっている状態で腕が伸びきった状態）（（5コマ） 
//手裏剣を奥の方の片手で横投げしている（5コマ） 
//走っている（5コマ）
//ジャンプしている（5コマ）
//しゃがんでいる（2コマ）
//ダメージを受けている(4コマ)
//ペルソナのゲームにインスパイアされた

ではさっそくプレイヤー画像を作っていきます
今回はGeminiを使います
AIに立ち姿やしゃがみなどアクションゲームに必要な動きを伝えます
するとゲームで使えそうなキャラクター画像ができました
続いて敵キャラクターを作ります
敵の特徴をAIに伝えて画像を作ります
キャラクターはできましたが少しおとなしい感じがします
そこでサングラスをかけるようにAIへ指示します
するとサングラスをかけた敵キャラクターができました
次は敵の忍者を作ります
忍者の特徴をAIに伝えて画像を作ります
こちらもしっかりキャラクターができました
ただ髪の毛の色がこれから作る背景と重なりそうです
そこで髪の毛をすべて赤に変更します
AIに指示すると髪の毛がすべて赤になりました
あまり忍びという感じはしませんが敵っぽいので今回はこれで進めます
キャラクターがそろったので次はゲームで使う画像に切り出します
一枚の画像からキャラクターの動きごとに画像を分けていきます
今回はこれまでの動画でも使ってきた切り抜きツールを使います
掲載ページはこの記事の中で紹介しています
まずプレイヤーの画像から切り出します
元の画像には白い背景があります
このままだとゲーム画面にも白い部分が出てしまいます
そこでマジック消しゴムを使います
白い背景を透明にします
次に走るアニメーションの画像を切り出します
必要な部分をワクで囲みます
囲んだ部分をクリックして保存します
これをくり返して一枚ずつ画像を作ります
次は攻撃アニメーションを切り出します
ここでは剣の画像が重なっています
そのため普通のワクではうまく囲めません
そこで自由選択ツールを使います
必要な部分を囲んで範囲を選択します
そして一枚ずつ保存していきます
続いて敵キャラクターの準備をします
同じように歩きの画像をワクで囲みます
ここでAIを使ってキャラクターを作る時の問題があります
AIは一枚の画像を作るのはかなり得意です
しかし歩いている時の足が重なった画像は苦手です
歩きのアニメーションではこうした画像も必要になります
そのためAIが作った画像を一枚ずつ確認することが大切です
キャラクターの切り出しが終わったので次は背景を作ります

この記事では、AIを使った「2.5D横スクロールアクションゲーム」の作り方を紹介します

AIをつかうので簡単に高度なゲームをつくることができます

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

使用したツールとプログラムは次のリンクからダウンロード＆プレイできます

ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

今回紹介するゲームのプログラム

このページのつくり方を動画で紹介しています

ゲームの実際の動きが確認できます

Google AI Studioでゲームのプログラムを作る

「Google AI Studio」のサイトでプログラムをつくります

>> 「Google AI Studio」のサイト

はじめに「Google AI Studio」のサイトにアクセスをしてください

背景用の3Dボクセルを配置・編集するためのプログラムを生成します

次のとおりに伝えて、Runのボタンをクリックします

\HTML1ファイル
\ボクセルエディタ
\ボクセルに添付ファイルのような画像を読み込みテクスチャーとして貼り付けられる
\マップビューではクリックでボクセルをマップに何個でも置くことができ、ボクセルクリックで消すことができる
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューを展開する
\マップビューモードとボクセル配置モードで切り替えられるように
\画像ドラッグ添付ファイルの画像を矩形選択で画像を部分選択してボクセルに貼れる
\画像をドラッグして矩形選択する時に展開する画像は全体表示されるように
\メニューはタブで、「ボクセルの画像選択」、「ボクセルの調整」、「空の調整」がある
\ボクセル配置はグリッド線にスナップするため、グリッド線にそってしか置くことができない
\空の調整はタイムオブデイ・システムで
\ボクセルの調整タブではボクセルの高さ幅、明るさを調整できる

プログラムの生成がおわったらダウンロードします

プログラムの生成が完了したら、ファイルをダウンロードします

続いて、できあがったエディターの3Dボクセルに貼り付けるための画像を生成します

背景用の建物の画像をAIで生成する

言葉で伝えるのがムズかしい時は、画像をアップするとスムーズにいきます

背景用の画像を、パワーポイントで作ったイメージ図とテキストからAIで生成します

AIに次のメッセージつたえます

\HTML1ファイル
\ボクセルエディタ
\ボクセルに添付ファイルのような画像を読み込みテクスチャーとして貼り付けられる
\マップビューではクリックでボクセルをマップに何個でも置くことができ、ボクセルクリックで消すことができる
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとボクセル配置モードで切り替えられるように
\画像ドラッグ添付ファイルの画像を矩形選択で画像を部分選択してボクセルに貼れる
\画像をドラッグして矩形選択する時に展開する画像は全体表示されるように
\メニューはタブで、「ボクセルの画像選択」、「ボクセルの調整」、「空の調整」がある
\ボクセル配置はグリッド線にスナップするため、グリッド線にそってしか置くことができない
\空の調整はタイムオブデイ・システムで
\ボクセルの調整タブではボクセルの高さ幅、明るさを調整できる

しっかりとした建物の絵が完成しました

完成した画像は先ほどのプログラムの3Dボクセルに貼り付けて、立体的な背景をつくっていきます

プログラムを実行して3D背景を組み立てる

AIで生成したプログラムを実行しました

はじめに、ゲーム背景として違和感が出ないように、3Dボクセルの大きさを調整します

先ほど生成した「建物の画像」をプログラムに読み込みます

読み込んだ画像を、3Dボクセル用の表面の絵として貼る準備をします

ちょうどいいボクセルがあらわれました

画面上にクリックするとボクセルのビルをつくることができます

時刻のスライダーを調整すると建物がしっかりあらわれました

しっかり、先ほどつくった建物の画像が3Dのブロックとなって画面にあらわれました

このように、ボクセルをならべてゲームの背景にします

アクション部分のプログラムを作成する

じっさいにキャラが動く部分をプログラムします

続いては、ゲームのアクション部分のプログラムをつくります

2Dベルトスクロールアクションの特徴をしっかりと盛り込んだメッセージをAIに伝えます

次のとおりAIにメッセージを伝えます

\HTML1ファイル
\2D横スクロールベルトロールアクション
\テストプレイボタンでプレイできる
\マップビューではクリックで敵キャラ、プレイヤー開始位置を置くことができ、クリックで消すことができる
\マップビューでプレイヤーが歩ける場所はピンクで表示されている
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとキャラ配置モードで切り替えられるように
\新規敵キャラをつくることができ、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、を敵ごとに割り当てられる
\プレイヤータブでは、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、待機1コマを敵ごとに割り当てられる
\ゲーム基本設定タブでは、カメラ位置を角度、高さプレイヤーからの距離を調整できる
\メニューはタブで、「画像読み込み」、「敵キャラ」、「プレイヤー」「ゲーム基本設定」がある
\カメラは手前・奥には動かない、プレイヤーもカメラ手前以上は手前に移動できない

しっかりプログラムができあがりました

しっかりプログラムができあがりました

つぎはゲームに登場するキャラクターの絵をつくります

Geminiを使ってキャラの2Dスプライトシートをつくる

次はキャラの絵をつくります

次はGeminiを使って、ゲーム用の2Dスプライトシートを作ります

キャラクターの特徴と使うコマ数をGeminiに伝え、できあがる絵をイメージにできるかぎり近づけます

次のとおりAIにつたえます

//スーパーファミコンの2D横スクロールゲームのドット絵
//サイドビューのみ、他方向は不要
//RPGのペルソナの登場キャラ風、ちょい悪のギャング風、サングラスはかけていない、服は白、
//待機モーション（3コマ）
//歩き
//予備動作→パンチ(2コマ)
//予備動作→ミドルキック(3コマ)
//ジャンプキック(1コマ)
//ジャンプ中(1コマ)
//予備動作→膝蹴り(2コマ)
//つかみ→背負い投げ(3コマ)※必ず別のキャラはつけない、顔は２つにならない
//ダメージを受けて構えポーズのままのけぞっている(地上に足がついている)
//ダメージを受けてのけぞっている
//上記のモーション
//画面上には相手のキャラや別のキャラクターは出さない
//線などのエフェクトはつけない
//各モーションに対応するフレームがあること
//SD２頭身キャラ！
//純白背景

できあがった絵です

少し悪役っぽい雰囲気になってしまったので、主人公らしくなるように調整します

イメージに近い主人公が完成しました

調整をすることで、しっかりと主人公キャラクターが仕上がりました

敵キャラクターの画像をAIでつくる

ファイナルファイト風のパーカーを着ている敵キャラをつくる

次は敵キャラをつくります

ゲーム画面で区別がつきやすいように、主人公と見た目がかぶらないキャラクターにします

敵キャラが生成できました

ここからさらに微調節します

ベースとなるスプライトシートはしっかり生成できました

続いて、ダメージを受けた時のアニメーションで不足している部分の修正を行います

次のとおりAIに伝えて絵を修正します

ダメージ受け・小を追加して、構えのまま顔がのけぞるように、顔は隠さないように

しっかり敵キャラができました

しっかりダメージをうけた時のアニメーションがあらわれました

つづいて、ボクサー風の敵キャラクターをつくります

ちょっと強そうな2Dアクションにでてきそうな敵キャラをつくる

つづいてもう一体の敵キャラクターをつくります

これまでの敵キャラクターと見た目がかぶらないように、特徴を分けたメッセージをAIに伝えます

次のとおりAIに伝えます

//スーパーファミコンの2D横スクロールゲームのドット絵
//サイドビューのみ、他方向は不要
//RPGのペルソナの登場キャラ風、ちょい悪のボクサー風、アフリカ系、Yシャツと黒のネクタイ、服はズボンから出している、
//待機モーション（3コマ）
//歩き（7コマ）
//予備動作→パンチ(2コマ)
//予備動作→アッパー(3コマ)
//ダッシュアッパー(1コマ)
//ジャンプ中(1コマ)
//ダメージを受けて構えポーズのままのけぞっている(地上に足がついている)
//ダメージを受けてのけぞっている
//上記のモーション
//画面上には相手のキャラや別のキャラクターは出さない
//線などのエフェクトはつけない
//各モーションに対応するフレームがあること
//SD２頭身キャラ！
//純白背景

しっかり絵があらわれました

インパクトが少ないので、髪の毛の色を変えます

敵キャラクターのスプライトシートがしっかりあらわれました

しかり、メリハリが少ないので髪の毛の色を金色に変えます

しっかりメリハリがあるキャラをつくることができました

アニメーション用に画像を分割する

Google AI Studioでキャラ分割ツールをつくる

つづいてアニメーション用にキャラの分割ツールをつくります

Google AI Studioでプログラムをつくります

キャラ画像がつくり終わったので、次はキャラ画像をアニメーション用に分割します

パターン数が多いため、画像の分割ツールを自作します

次のとおりAIに伝えます

目的

以下の機能を備えたスプライト編集・分割ツールをHTML1ファイルで実装してください。

1. 画像編集機能（マジック消しゴム）

  - 塗りつぶし透過アルゴリズム: クリックした座標のピクセル色を取得し、隣接する近似色のピクセルを透過（Alpha=0）にする。
  - 許容値（Tolerance）設定: 0〜100の範囲で、近似色と判定する閾値を調整可能にする。
  - 履歴管理: 実行前の状態を保存し、Undo（元に戻す）ができるようにする。

2. スプライト分割ガイド（スライス機能）

  - 垂直・水平ラインの追加:     - クリックで垂直方向の分割線を追加。     -
    特定のキー（Alt等）を併用しながらのクリックで水平方向の分割線を追加。
  - ドラッグ移動: 追加済みのラインをマウスで掴んで座標を微調整できる。
  - 削除機能: 選択したラインを削除（Deleteキー等）できる。

3. 保存エリアの選択とエクスポート

  - グリッド自動生成: 配置された分割線に基づいて、画像を複数の「セル」に論理的に分割する。
  - 複数選択モード: ユーザーがクリックしたセルを「保存対象」としてハイライト選択できる。
  - 個別書き出し: 選択された各セルの領域のみを切り抜き、透過PNGとして一括、または連続してダウンロード保存する。

実装上の注意（UI不問）

  - 入力：ローカルの画像ファイル。
  - 内部処理：HTML5 Canvas または それに準ずる画像操作ライブラリを使用。
  - 状態管理：モード（消しゴム/ライン編集/エリア選択）を切り替えて操作できるようにする。

しっかりプログラムをつくることができました

プログラムができたら、ダウンロードして実行します

自作のスプライトシート分割ツールで絵をカットする

つくったツールを実行しました

さっそく画像を読み込みます

つくったツールを実行してスプライトシートを読み込みます

キャラクターを読み込んだ画面です

スプライトシートを読み込むと背景が白色になっています

背景が白いとアニメーションとして使えません

「マジック消しゴム機能」を選び、画像をクリックして背景を透明にします

分割して切り出したいキャラをかこみます

歩き、攻撃などで必要なアニメーションをえらびます

必要な絵をえらんだ後は、保存ボタンで保存することができます

つづいて敵キャラもカットしてゲームに取り込む準備をします

つくった敵キャラもカットして保存していきます

これですべての準備が終わりました

アクションゲームのテストプレイ

つくったゲームエディタを実行して

キャラクターを読みこみます

つくったエディタを起動した画面です

キャラクターをアニメーションさせるために、絵を読みこみます

ゲームを実行しました

準備ができたのでゲームを実行します

キャラクターを動かすと歩くアニメーションがしっかりあらわれます

しかし、キャラの大きさがつぶれてしまっており、画像もぼやけています

くっきり表示させるニアレストネイバー補間という処理をAIに伝えて修正します

つぎの通りAIにつたえます

アクションゲームエディタ改修

マップの視点操作が設定の視点と連動してしまっている、視点操作は設定タブと連動しない、

設定タブで数値を変えた場合、変更した設定数値のゲーム画面がマップビューで表示される

キャラを配置した時の画像は歩きの1コマ目

敵のアニメーションの待機や攻撃、歩きなど全てのコマ数をプレイヤーに合わせて

テストプレイでキャラは2.5Dになるようにマップ床から立つように 視点操作をした場合、2.5Dキャラが3D上マップ上で見えるように

歩きを4コマに 敵近づいて攻撃してくる、敵の攻撃性格を、積極的、様子み、フットワーク重視から選べるように プレイヤーは50回、敵は3回攻撃されるとやられる
HPゲージがあるように zボタンで攻撃ができる

xボタンでジャンプできる 主人公、敵ともにジャンプのアニメーションは1コマ

敵キャラタブにある配置するキャラ選択ボックスは設定タブへ
プレイヤーは一体しか配置できないためマップの別の場所をクリックするとその場所に配置しなおす、敵は配置している敵をクリックすると消えるように

ピンクの道はプレイ時にピンク色は消えるが、ピンクエリア外は移動できないように 設定タブでグリッド線のON/OFFとプレイ時のON/OFFがえらべるように

すべてのキャラ画像は右向きなので左移動の時は反転するように 画像は縦横の比率変更しないように

・使用する画像はすべてドット絵（ピクセルアート）のため、画像を拡大・縮小した際にアンチエイリアスがかかってぼやけるのを防ぐため、ニアレストネイバー補間（Nearest
Neighbor）でくっきりと描画する処理を入れてほしい

プログラムが完成しました

プログラムが完成したので、さっそくダウンロードしてプレイします

しっかり修正されて画像がクッキリでるようになりました

できあがったプログラムを実行すると、キャラが動き、画像がハッキリあらわれるようになりました

これまでつくったマップエディタとアクションエディタを合体させます

２つのファイルを添付してAIにメッセージを伝えます

修正版のエディタでもう一度テストプレイをします

キャラクターが背景になじみ、向きも変わり、敵もこちらへ向かって歩くようになりました

次は、3D背景のプログラムと2Dアクションのプログラムを合体させます

次のとおりにAIに伝えます

2つのソースを足してベルトロールアクションゲームエディタを作成 絶対に現在の機能を勝手に削除しないように※特にアニメーションは削除に注意すること

タブ、マップビューの基本構成は同じなので足してつくるように一つのタブも削除しないように

視点操作モード、アイテム配置モード、キャラ配置モードがあること

プレイ視点設定（カメラ）は回転、高さ（Y）、距離（X）の３つが必ずそれぞれ動き、設定値を変更した瞬間に編集中のマップビューの視点を上書きして反映すること、高さの設定ではカメラを水平移動させて絶対にカメラを主人公中心に回転させないように、回転の設定値のみカメラを回転させることができる、

time of dayは昼、夕暮れ、夜、朝日の間は分単位で細かく遷移すること

マップビューでは、テストプレイ前はプレイヤーが移動できる範囲に必ずピンクの移動範囲を色で示したものがあり、テストプレイ時には消えるが移動範囲外には移動できない

すべての攻撃は1コマ目が予備動作で2コマ目が攻撃なので、2コマ目以降でないと攻撃判定はない

主人公はコンビネーション攻撃ができる攻撃１→（当たったら）攻撃２のアニメーションがそれぞれ2コマで登録できるように

主人公はジャンプ中に攻撃ボタンを押すと出せるジャンプ攻撃ができる、アニメーションは1コマ

敵はHPが調整できるように
敵は特殊攻撃がそれぞれチェックボックスで登録できるように、連続攻撃（攻撃1→（当たってなくても）攻撃２→（当たってなくても）攻撃３）→敵が大きく後ろにさがる、ダッシュ移動攻撃（ダッシュアッパー）、それぞれ振りかぶりから攻撃発生の2コマが設定できるように

ボクセル配置モードではボクセル、地面テクスチャ、 アイテムタブを新しくつくる アイテムタブではボクセル配置、ボクセル削除、地面テクスチャ貼り、を選べる
アイテムタブから配置できるものは、それぞれ全て配置する時にその大きさの目安が表示される アイテムタブでは地面に貼るテクスチャを切り替えられる

地面に貼るテクスチャは上書きできる 地面に貼るテクスチャの画像はボクセル用に読み込んだ画像を貼り付けられる、貼り付けられる画像は複数登録できる

地面をドラッグでテクスチャをグリッドごとに張ることができる、貼れる場所はプレイヤーが歩けない場所など全ての地面に貼ることができる
ボクセルには当たり判定があり、貫通することや昇ることはできない
ボクセルの配置はグリッドにそって置くことができる、ボクセルは地上にしか配置できないボクセルの明るさMAXではエミットやグローのようにとても明るくなること

すべての攻撃はそれぞれ速さと攻撃する時に進む距離、相手がダメージを受けた時に下がる距離を設定できるように

全ての攻撃と当たり判定は絵の範囲になる、このため透過している部分は攻撃をくらわない 敵にダメージを連続で与えられるため、敵に無敵時間は存在しない
プレイヤーも敵も攻撃があたると待機モーション→くらいモーションになり少しくらいモーションの時震える、またプレイヤーと相手ともにヒットストップがかかり、ヒットストップの瞬間はゲーム全体が少し遅くなる

設定タブからはCPUの強さ、特殊攻撃の頻度を選択できるように

AIがつくったプログラムを実行しました

はじめに3Dボクセルからマップに置きます

AIがつくったプログラムを実行します

立体的な背景とアクションが一つになった合体版のプログラムが完成しました

これまでつくった画像を読みこみ、マップに背景になる3Dボクセルから置いていきます

地面の画像をよみこみ、地面に置いていきます

次に地面の画像を読み込みます

床用のモードに切り替えて、足元のマップに画像を敷き詰めます

これでゲームのステージができました

キャラクターを置いてテストプレイの準備をします

マップ始まりにプレイヤーを置き、右側に敵を配置します

ゲーム画面の高さと、傾きを整えます

遊びやすいようにカメラの高さや角度を微調整して、2Dアクションらしい視点を作ります

テストプレイしてみます

すべての準備が整い、テストプレイを始めます

プレイヤーの連続攻撃もしっかり決まり、敵も攻撃してくるようになりました

敵が一直線に向かってきすぎるという部分もありますが、基本のシステムは完成しました

あ

・・・となやんでいませんか？

こんにちは！

この記事では、これまでのやり方からさらにバージョンアップしたAIでアドベンチャーゲームをつくる方法を紹介します

これまでノベルゲームの作り方は紹介しましたが

AIが進歩したことで、さらに簡単に、もっと高度なゲームがつくれるようになりました

プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームは次のリンクからプレイできます（予定）

ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

今回紹介するゲームのプログラム

今回この記事で紹介したゲームのプログラムです

今回つくるアドベンチャーゲームの流れ

今回の動画と記事の流れは、AIにいきなりゲームの完成品をつくらせるのではなく、

「微調整がやりやすいゲームエディタ」をHTML1ファイルで作り、

そこから少しずつゲームを完成に近づけていくスタイルです

プログラミング未経験者でも挫折しにくい作り方です

ではさっそくAIプログラミングをはじめます！

まずはゲームエディタをAIで生成する

GoogleAI Studioにアクセスして、

AIにメッセージと画像をアップロードします

前回のAIプログラミングと同じように、

自動でプログラムがつくりやすい「Google AI Studio」のサイトに移動します

メッセージボックスに、以下のプロンプトと画像を一緒に入力します

次の通りのノベルゲームエディタをHTML1ファイルで生成して ユーザインタフェースは添付ファイルを参考につくって

【UI構造】

1. ヘッダー: 「プロジェクト保存」「テストプレイ（本当にプレイできる）」ボタン
2. メイン（3カラム）:
   • 左: マッププレビュー。背景画像を設定できる
   • 中: イベントリスト。新規作成ボタンと、作成済みイベント（トリガー名、コマンド数、編集/削除ボタン）を表示
   • 右: 「アイテムリスト」と「スイッチ（フラグ）リスト」がつくれる

【イベント編集モーダル】 イベント新規作成/編集時に次が設定できる

• イベント名
• イベントがはじまる（トリガー）設定: a) シーン開始時 b) マップクリック（マップ上で指定した範囲をクリックするとはじまる） c) スイッチON時
• コマンドリスト:
  • メッセージ表示
  • 背景変更
  • 画像変更
  • キャラクター表示/非表示
  • スイッチのON/OFF
  • アイテム取得/使う
  • 条件分岐（スイッチやアイテムの状況による分岐）

AIへメッセージと一緒に渡した画像です

AIのバージョンアップにより、画像を添付することで画面レイアウトが、とても高い再現度で作れるようになりました！
　　

ゲームエディタのプログラムの生成が終わったら、ダウンロードボタンをクリックしてHTMLファイルを保存します

エディタを起動してテストプレイ

つくったエディターのプログラムです

背景用の画像をよみこみました

ダウンロードしたファイルを実行すると、すぐにエディタ画面が現れました

さっそく背景画像を読み込みます

これまで作った画像を入れてみましたが、しっかりと画面に現れました

イベントをつくり、物語を作ることができます

次に、イベントを追加します

あらかじめ用意したメッセージを入力しました

テストプレイすると背景画像にテキストがあらわれました

テキストは進めることができます

準備ができたのでテストプレイをしてみます

しっかりメッセージがあらわれる、ノベルゲームの基本の動きができあがりました！

ここまでのまとめ

AIにレイアウト画像を読み込ませるだけで、あっという間にアドベンチャーゲーム開発用の「土台（エディタ）」を作ることができました

ここから先は、このエディタに「キャラクターの絵」や「背景画像」をどんどん追加して、本格的なゲームに仕上げていきます

素材をつくる！AIを使い分けて背景とキャラを生成する

ChatGPTで「ピクセルアート」の背景を作る

ChatGPTでゲーム背景をつくることをつたえます

ゲームの「土台（エディタ）」ができたら、次はそこに命を吹き込む背景とキャラクターが必要です

今回は、それぞれの得意分野に合わせて複数のAIを使い分け、一気に素材を揃えていきます

まずはゲームの舞台となる背景画像から作っていきます

背景画像の生成、特にドット絵（ピクセルアート）が得意なChatGPTのサイトへ移動しましょう

メッセージに次のことを伝えて生成します

アドベンチャーゲーム用の背景画像、ボロボロだけどおしゃれなめちゃめちゃ散らかったゴーストがでそうな部屋の画像 ピクセル画像で

ミステリアスな背景が完成しました

しっかりとアドベンチャーゲームの空気感を持った、味のある背景画像が生成されました

これをダウンロードして保存します

Sea Artでキャラクターのイラストを作る

キャラクターのタッチをコントロールしやすいSeaArtのサイトをつかいます

>>「SeaArt AI」のサイト

次に、ゲームの主役となるキャラクターを作ります

絵のタッチを細かくコントロールできるSea Artというサイトで、キャラクターの絵を生成します

モデルを決めて、キャラクターの特徴をつたえて生成します

今回は後がやりやすいように、次の通りAIにメッセージをつたえます

白い短い巻き毛のエルフ、大きく口を開けた可愛い笑顔、背景は白、男の子

今回はこのキャラクターをつかいたいと思います

しっかりクオリティの高いキャラクター画像が生成できました

1人のキャラクターのいろいろな表情をつくる

キャラクターのイラストから色々な表情をつくります

次は同じキャラクターの「怒った顔」や「悲しい顔」などの表情をつくります

今回は、パターン絵がつくりやすい、Google Geminiでつくります

生成したキャラクターをアップロードして、次の指示を出して表情を一度につくります

このキャラのスプライトシートをつくってほしい
中には４パターン、、笑顔を右上、驚いている顔を左上、笑っている顔を右下、怒っている顔を左下に、添付画像のように角度をつけて
画面に４体のみ（上半身のみ）
背景は透過で生成してほしい

しっかり、同じキャラクターの別々の顔が4パターン完成しました

同じキャラクターでそれぞれの表情のスプライトシートができました

しかし、カバンをもっているのでカバンを消します

黒のバックをなくすことをAIにつたえます

しっかりカバンのないキャラクターのみのスプライトシートが生成できました

探偵キャラを「ChatGPT」で直接生成する

日本風のかわいい動物キャラがつくりやすい「ChatGPT」をつかいます

続いて、物語の主役となる「探偵キャラクター」を作っていきます

今回はChatGPTを使い、最初から「表情のバリエーション」と「キャラクターの特徴」をセットで指示して生成します

AIの進化により、一度の指示で複数の表情を並べた画像（スプライトシート形式）を、高いクオリティで描き分けてくれるようになっています

次のとおりメッセージをつたえます

アドベンチャーゲーム用に日本のアニメキャラ風のSDキャラのシャーロックホームズ探偵風薄い青い色の猫、青い目（赤い蝶ネクタイ）のスプライトシートを生成して、笑顔を右上、驚いている顔を左上、笑っている顔を右下、怒っている顔を左下に 画面に4体のみ（上半身のみ）、

エフェクトは入れないで

背景は透過で生成してほしい

表情を分けてキャラクターをつくることができました

しかし、すべて青色になってしまいました

表情をしっかり分けてキャラクターをつくることができましたが、すべて青色です

キャラクターの色を変えて、メリハリをつけたいと思います

次のとおりAIにメッセージをつたえます

「猫の色はこのままでいいが、コートと帽子はよくある探偵っぽい色にしてほしい」

しっかりキャラクターをつくることができました

Photoroomで背景透過とサイズ調整

背景を消すことができるサイトにアクセスします

>> 「Photoroom」のサイト

生成した画像は背景を透明にして、キャラクターを一つ一つ分ける必要があります

今回は「Photoroom」という背景をAIで消すことができるサイトをつかいます

アップロードしただけで自動で背景を透明にしてくれました

ここからキャラクターを分けます

画像をアップロードするだけでAIが自動的にキャラクターを判断して、背景を一瞬で透明にしてくれます

背景が消えたら、一枚の画像にまとまっている表情をそれぞれ別の画像として分ける作業に入ります

画面にある切り抜き編集ボタンから手動モードを選択します

消しゴムのような感覚で使えるブラシツールを使って、切り出したい表情以外の部分を消していきます

ブラシサイズを調整してキレイに消します

表情を分けることができましたが、スペースが大きくできてしまいました

このままではキャンバスのサイズが大きすぎるのでキャンバスのサイズを変更します

横幅500にして、サイズを変更します

「サイズ変更ボタン」をクリックして、ゲーム用にキャンバスの横幅を500ピクセルに設定します

位置を整えてダウンロードします

サイズを変更したら、キャラクターがキャンバスの中央に配置されるように位置を調整し、ダウンロードします

つくったキャラクターすべて同じ方法で切り分けます

一つの表情の画像が完成したら、残りの表情パターンについてもまったく同じ手順を繰り返します

それぞれの表情だけを残すように手動で切り抜き編集を行います

サイズと位置を整えたら一つ一つダウンロードしていきます

別のキャラクターも同じ方法で切り分けてダウンロードします

別の素材として用意した「猫の探偵」のキャラクターイラストについても、同じ切り分け作業をします

ゲーム内で表情を切り替えたときにサイズがバラバラで違和感が出ないようにします

キャンバスサイズを横幅500ピクセルに揃えることが、ゲーム全体のクオリティを高めるための重要なポイントです

プロンプトの再利用で「絵のタッチ」を統一する

次は冒険に欠かせない「アイテム素材」を準備していきます

ゲーム制作で大切な、背景・キャラ・アイテムの雰囲気がバラバラにならないようにします

今回はUSBメモリや日記、ライターなどを作っていきます

背景画像を生成した時の絵をベースにして、「USBメモリ」や「日記」といったキーワードを入れ替えてAIに指示を出します

こうすることで、同じ世界観のアイテムを違和感なくそろえることができます

次のようにAIにメッセージをつたえます

この背景画像に合うライター、USBメモリー、ペンダント、鍵、日記、をスプライトシートで生成してほしい

気になる部分はAIに直接「リテイク」を出す

しっかり画像が生成できました

さらにアイテムっぽくなるように修正します

AIが生成した「ライター」の画像は最初から火がついた状態でした

「ポケットに入れて持ち運ぶアイテム」として火がついているのは少し不自然です

AIに直接「ライターの火を消して」と伝えるだけで、そのままの形で希望通りに修正してくれます

次のとおりAIにメッセージを伝えます

ライターは火を消して、USBは普通のUSBで紫色（ボロボロな感じ）、日記はどくろマークを消してほしい

しっかり修正することができました

Photoroomでゲーム用素材へ仕上げる

一つ一つ切り分けます

アイテムの画像も、キャラクターの時と同じように背景を消してゲーム用に仕上げていきます

まずは画像をアップロードして、アイテムを一つ一つ切り分けていきます

このアイテムもキャンバスのサイズをキャラと同じ「500」に合わせて、ゲームに読み込んだときにサイズがキレイにそろうようにします

続いて、USBメモリなど他のアイテムも同じように分割していきます

これで必要な画像がすべて揃いました！

次はプログラムを作り直して、いよいよアイテムをゲームに登場させます

プログラムを再構築して、ゲームを高度化する！

まずバグを修正するメッセージをつたえます

素材がすべて揃ったので、いよいよこれらを動かすためのプログラムをAIに作り直してもらいます

１回目はバグ修正、２回目は機能追加の２段階でつくりなおします

次の通りAIにメッセージを伝えます

マッププレビュー画面で背景がすべて表示されないので、表示されるように

画像タブ、人物タブをアイテムタブ、スイッチタブの部分につくって

人物タブでは人物を登録できるように、人物画像は普通、笑い、怒り、驚き、が登録できるように
画像タブでは画像を一括で管理できるように、背景画像以外はここで管理する

人物タブで人物の位置を左の時、右の時でマッププレビューでＸＹ、大きさのスライダーを動かして
変更できるように、調整する時はキャラの画像が表示された状態でできるように

イベントトリガーのマップクリックのドラッグができない
イベントをつくると再度編集できないので編集できるように

常にゲーム画面右にアイテム一覧があるように、アイテムは画像と名前が表示されている
アイテムを使うときはアイテム一覧が少し明るくなるように

コマンドの追加画面を大きくして
メッセージコマンドに他のコマンドのマクロボタンをすべて追加して
ただマクロにしたコマンドは必ずコマンド追加画面からも追加できるようにして

メッセージで#nextで次の画面にいく仕様にプラスして、#　を打つと登録されている人物の名前が表示されて、#nextと同じように次のメッセージ画面にうつり、メッセージ左上に話している人物の名前が出るようにして
メッセージの中で「#use」でアイテムを使うコマンドができるようにして

メッセージコマンドでマクロをテキスト打ちしたらゲームが完結するように
メッセージコマンドをつくってほしい

１回目でつくったプログラムも添付してメッセージを送信します

今回はAIに以下の高度な機能をリクエストしました：
・ストーリー用マクロ: AIが物語を自動で組み立てやすくする仕組み
・クリックイベント: 画像をクリックするとイベントが発生する処理
・アイテム一覧（インベントリ）: 拾ったアイテムを確認できるメニュー
・名前表示機能: メッセージウィンドウに誰のセリフか表示する機能

次のとおりAIにメッセージを伝えます

背景は初期状態は設定した背景を表示するように
人物が表示されている時は必ずメッセージウィンドウを表示して
メッセージウィンドウ左上の名前はメッセージウィンドウから飛び出ず、
少し太字になるくらいでメッセージウィンドウの左上にでるように
別のキャラメッセージになったらメッセージページが変わるように

人物画像の位置調整の時に画像左右反転を入れて

アイテム一覧はメッセージウィンドウと同じような色で縦長で
常にゲーム画面右側メッセージウィンドウのとなりにあるように（画像アイコンつき）
アイテム一覧とキャラはかぶらないように

画像は複数選択で追加できるように

Javascriptデフォルトのメッセージポップアップは極力出さないように

メッセージをエンターキーでおくれるように
マクロでアイテムを追加する時にキャラ表示と同じように
プルダウンで選択できるように

スイッチはON,OFFではなく、変数のように数字を入れられるように

コマンドリストはクリックで再度編集できるように

マップクリックイベントをつくるとき、マップをドラッグして領域指定ができない
イベントのトリガーに
変数自動実行（変数条件）を加えて
また、マップクリックは画像クリックでも発生できるように
そして画像は人物と同じように拡大と配置ができるように
（画像クリックをマップに配置する時にはコマンドウィンドウを消し、マップが広く見れるように
）
会話で選択肢が選べるように
イベント一覧の部分にシーンタブとイベント一覧タブをつくり、
シーンによってイベント一覧と背景画像が切り替わるように
メッセージコマンドでAIがメッセージ（マクロつき）を生成できるように
AI生成用の入力、出力ボタンを追加して（出力ファイルをＡＩに投げるとマクロの説明それまでのＩＤなどがＡＩにわたり、ストーリーを自動生成できるように）

「AI用ボタン」でGeminiにストーリーを作らせる

生成された新しいプログラムをダウンロードして実行してゲーム画面を立ち上げます

画像の追加も、一度に複数のファイルを読み込めるようになり、開発効率が劇的にアップしています

生成ボタンをクリックして、AIが新しく作り直してくれたプログラムをダウンロードし、さっそく実行してみます

新しいエディタでは、画像を追加する際に一度に複数の画像をまとめて読み込めるようになりました！

これで素材登録の手間が省け、開発スピードがさらにアップします

素材を読み込んだら、画面を作っていきましょう

まずはそれぞれの人物キャラクターを作成し、表情（差分）を割り当てていきます

その後、作成しておいた背景画像を読み込んで表示させます

背景に合わせて、キャラクターの大きさや立ち位置をそれぞれ微調整して、自然な画面レイアウトに仕上げていきます

背景とキャラの配置が終わったら、アイテムもそれぞれ登録して、いよいよ「イベント」を作っていきます

メッセージウィンドウに、新しく作った「AI生成用メッセージコピーボタン」が追加されています

このボタンをクリックすると、AIが自動でストーリーを生成するためのテキストデータがコピーできます

コピーした内容をそのままGoogle Geminiのテキストボックスに貼り付けて、ストーリーの生成をお願いします

すると、生成ボタンをクリックするだけで、Geminiがゲーム内で動くマクロ（表情変化などの命令）付きのストーリーを自動で作成してくれます

完成したストーリーのテキストをコピーして、ゲームエディタのテキストボックスに貼り付けます

設定ができたので、一度テストプレイしてみましょう

キャラクターが登場し、スムーズに会話が進んでいきます。……が、ここで問題発生！

なんと、画面上に同じキャラクターがダブって複数登場してしまうという仕様上のバグが見つかりました

再び「Google AI Studio」に戻り、修正用のプログラムを作ってもらいます

プロンプト（指示出し）の一番上に「人物名をもとに、同じ人物を重複して表示しないように」という命令を追記して生成します

次のとおりAIにメッセージを伝えます

　#人物名で人物を表示すると右側の自分のキャラと被るので、
　#人物名で人物を表示しないように

イベントトリガーの画像クリックで画像を配置する時、
もっと小さく画像を配置できるように

イベントトリガーでマップドラッグで範囲を指定する時に
マップをドラッグできない

メッセージウィンドウを消すマクロをメッセージコマンドに入れて

AIでメッセージを生成する時に何のイベントトリガーから
発生しているか伝えるようできるか

メッセージコマンドでクイズのような４つまでの言葉の選択肢を選べるようにできるか

先ほどと同じようにキャラクターを登録し、イベントを作っていきます

まずは「初めのイベント（導入の会話）」を作り、続けて「画像クリックイベント」を作ります

アイテム画像をエディタに登録し、マップ（背景）の中の自然な位置にアイテムを配置します。今回は良い場所にアイテムを置くことができました！

配置が完了したら、これに対するメッセージ（ストーリー）を作っていきます

AIとのやり取りでストーリーを微調整する

「AI用テキスト」ボタンで作ったメッセージをGeminiに渡し、ストーリーを作ってもらいます

今回もしっかりとしたシナリオができました

続いて、「画像クリック用（アイテムを見つけた時）」のイベントテキストもコピーしてGeminiに渡します

この時、「さっきのイベントの続きになるように」と追加で設定して生成させます

しっかりストーリーが繋がって生成されたのですが、テキストを読んでみると一つ違和感が

AIが「日記が棚の中にある」という内容にしてしまっていたのです

画面上ではソファの上に配置したので、これでは辻褄が合いません

そこでGeminiに直接「日記はソファの上にあります」と伝えて修正をお願いします

しっかりと「ソファの上に日記がある」という自然なストーリーに書き換えてくれました！

こういった柔軟な軌道修正ができるのが本当に便利ですね

完成した2つのストーリーテキストをコピーして、エディタのそれぞれのイベントに貼り付けます

最終テストプレイ！ついにゲームが完成

すべての準備が整ったので、通してテストプレイをしてみましょう！

しっかりとストーリーが進行し、配置した画像をクリックしてイベントが動く、本格的なアドベンチャーゲームが完成しました！

AIを組み合わせることで、ゲーム制作のハードルは驚くほど下がっています

ぜひ皆さんもオリジナルゲームを作ってみてくださいね！

このブログ（およびYoutube）では、今後もAIを活用したゲーム作りのノウハウを配信していく予定です

ここまでご覧いただきありがとうございます

Youtubeも合わせてご覧ください

・・・となやんでいませんか？

こんにちは！

この記事では、AIだけでアクションゲームをつくる方法を紹介します

プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームプログラムは次のリンクからダウンロードできます

ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

AIプログラミングでつくったゲームの紹介

今回つくったゲームがじっさいに動いています

今回の画面に映っているのは、ジャングルを舞台にしたクラシックな横スクロールアクションゲームです

プレイヤーが左右に移動し、3段ジャンプで敵をかわしながら進むシンプルだけど楽しめるゲームです

今回の記事の流れは、AIでゲームを一気に完成させるのではなく、

まず「微調整がすごくやりやすいゲームエディタ」をHTML1ファイルで作って、

そこからマップ作成 → 素材追加 → アニメーション → 敵AI と、少しずつ完成に近づけていくスタイルです

プログラミング未経験者でも挫折しにくい作り方です

最後まで一緒に試してみてください！

まずはゲームエディタをAIで生成する

Google AI Studioは自動でAIでプログラムをつくれるサイトです

>> 「Goole Ai Studdio」のサイト

前回と同じく、Google AI Studioをつかってゲームをつくります

メッセージボックスに以下のプロンプトを入力します

2DアクションゲームエディタをHTML1ファイル（単一のHTMLファイル）で生成してください。
機能は以下の通り：

• 2DアクションゲームエディタをHTML1ファイルで生成して
• 正方形のブロックを置いてマップが作れる、1画面縦12マスになるブロックの大きさ
• プレイヤーも置くことができる
• 置いたものは削除できる
• ドラッグでブロックを連続で置くことができる
• テストプレイボタンがあり、左右移動と3段ジャンプができる

プログラミング生成がおわったらダウンロードします

生成が完了したら「ダウンロード」ボタンをクリックしてHTMLファイルを保存し、ブラウザで開いてみましょう

エディタ画面が表示され、ドラッグで地面やブロックを置いたり、プレイヤーを配置してゲームをつくることができます

テストプレイの画面です

歩いてジャンプするアクションゲームのような動きができます

テストプレイをしてみると歩いてジャンプする、

基本的なアクションゲームの土台が完成しました！

キャラクターと背景の素材をAIで生成

プレイヤーキャラクターのピクセルイラストを生成する

次にビジュアルを強化します

ChatGPTのサイトにアクセスします

>> 「ChatGPT」のサイト

ピクセルアートが得意なChatGPT（DALL·E搭載のバージョン）を使います

次のプロンプトを入れてキャラクター画像をつくります

横スクロール2Dアクションゲームのキャラをつくりたい ランボー風ゲームのメタルスラッグに出てくるようなキャラで24×24のキャラのスプライトシートを生成して、すべてのシーンは銃を構えているように、歩いているシーンだが一枚はアニメーションで必要なので足が揃っている絵を入れて（足が揃っていても銃をかまえている）、ダッシュしているシーン、背景は透過で枚数は16枚以上つくってほしい

生成できましたが、右足が前の画像がありません

最初に生成されたものがすべて左足が前の場合があります

その場合は「右足が前の歩行アニメーションを追加して、足がクロスする自然な歩きモーションに修正してください」と指示してください

このように再生成するとなおることが多いです

しっかり足がクロス、右足が前の画像が生成されました

敵キャラクターのピクセルイラストを生成する

敵キャラも同じようにつくります

次のプロンプトを入れます

横スクロール2Dアクションゲームの敵キャラをつくりたい サングラスをかけた少しワルな感じの兵士でメタルスラッグに出てくるような敵キャラで24×24のキャラのスプライトシートを生成して、すべてのシーンは銃を構えているように、歩いているシーンだが一枚はアニメーションで必要なので足が揃っている絵を入れて（足が揃っていても銃をかまえている）、背景は透過で
枚数は16枚以上つくってほしい

しっかり敵キャラが生成できました

背景のピクセルイラストを生成する

ゲームにマッチする背景もつくります

次のとおりAIにつたえます

2Dアクション、
ピクセルのタイル、
背景画像を生成してほしい、
ジャングルで横から見ている視点、横長にしてほしい

しっかり背景画像が生成できました

これでプレイヤー、敵、背景の基本素材が揃いました！

素材の加工（背景透過と個別切り抜き）

クリックしてつくった絵をアップロードします

>> 「PhotoRoom」のサイト

生成されたスプライトシートは背景が白や色付きの場合が多いので、Photoroomを使い背景をカットして一つ一つキャラを分けます

キャラクターをアップロードして、

切り抜き編集ボタンをクリックします

キャラクターをアップロードするとAIが自動的に背景をカットしてくれます

ブラシサイズを変えて、使うキャラのみ残します

キャラの背景がカットされて一つだけになりました

続けてサイズをゲームに合わせます

サイズを500にしました

しっかりカットできたらダウンロードして、

他のモーションもつくります

歩いていて足がそろっているイラストです

逆の足が前に出ているイラストです

歩行モーション用に必要な「足が揃っている」「左足前」「右足前」のイラストも、それぞれ個別に切り抜いて保存します

プレイヤーキャラも、同じようにスプライトシートを読みこみます

ゲームでつかうパターン以外を消します

右足を前に出したパターンのみカットしました

続いて左足だけ前にでているパターンをカットしました

足がクロスしているパターンもカットします

これで敵とプレイヤーキャラクターのアニメーションの準備ができました

プレイヤーキャラクターも同じ手順で切り抜き完了です

完成度の高いゲームプログラムを再生成

カットしたパターンをゲームに登場させるプログラムをつくります

素材が揃ったので、Google AI Studioに戻ってより進化したプログラムを作成します

次のようにプロンプトを入れます

次の機能を追加してほしい

タイルマップ画像を読み込み、ドラッグで範囲を決めて地面ブロックの画像として使えるように

プレイヤー画像を読み込み歩いている画像、止まっている画像を置き換えられるように、歩いているパターンは4枚登録できるように

壊れるブロックが設置できるように（地面ブロックと同じ方法で画像登録できる）

敵キャラをつくり、プレイヤーを見て2秒たったら銃をうつ（玉は真横のみ）

AIがつくったプログラムをダウンロードします

プログラムをプレイしてみました

生成されたHTMLファイルをダウンロードして開くと、エディタ画面が大幅に進化しています

次のことができるようになりました

・キャラクター画像と敵画像の読み込み機能
・ブロックの配置
・プレイヤーと敵の配置

プレイヤー、敵キャラそれぞれイラストを読み込みます

右に背景画像を読みこみ、

タイルのようにおいてマップをつくりました

テストプレイしてみました

しっかりとキャラがアニメーションしますが、
キャラの背景に色がついてしまってます

テストプレイをすると、歩行アニメーションが動き、敵がプレイヤーを見て銃を撃つアクションが追加されています！

ただし、プレイヤーと敵キャラの背景が透明になっていないので修正する必要があります

Google AI Studioでプログラムを修正します

エディタ画面では、キャラクター画像や敵キャラ画像を読み込み、ブロックを配置してテストプレイが可能になりました

しかし、キャラクターの背景がまだ透明になっていない問題がありました

そこでGoogle AI Studioに戻り、
以下の内容をAIに伝えてプログラムを修正します：

プレイヤー、敵キャラの背景を透過に
プレイヤーが玉を打てるように
画面をもっと横を長くできるように
敵がプレイヤーに向かって歩くように
プレイヤー、敵キャラの画像登録を一度に複数ファイル選択できるように（登録後にドラッグで順番を入れ替えられる）る

修正したプログラムをプレイしてみました

生成されたHTMLファイルをダウンロードして起動すると、背景がきれいに透明になり、プレイヤーの攻撃も追加されました

ただし、敵キャラが空中を歩いてしまう不具合が発生したので、次回の修正でしっかり地面に接地させるように調整します

ここまでのまとめ

これで、エディタでマップを作りながら、アニメーションするプレイヤーと敵が登場し、

銃を撃ってくるシンプルな2D横スクロールアクションゲームの原型が完成しました

マップを広げてアクションをもっと追加する

爆発アニメーションを作成

ChatGPTでさらに素材をつくります

ここからゲームをさらに楽しくするために、素材を増やしていきます

アクションゲームに欠かせない爆発エフェクトを作ります

次のとおりAIに伝えます：

爆発スプライトシートを生成して

しっかりスプライトシートが生成できました

PhotoRoomのサイトでアニメーション用に絵をカットします

生成したスプライトシートから、PhotoRoomを使って爆発アニメーション用に4枚とりだします

必要な爆発だけ残してカットします

一つの画像の大きさは、幅を300、高さを500にします

小さな爆発をカットしました

少し大きめの爆発をカットしました

次の煙へつなぐために、煙が入った大きめの爆発をカットしました

最後の煙のみで消えかけているのをカットしました

これで自然な爆発アニメーションの準備が完了しました

背景の画像を横に広げる

「Krea.ai」は背景をのばして絵を描いてくれます

>> 「Krea.ai」のサイト

前回生成したジャングル背景を、より長く横スクロールアクションゲームのように広げます

「Krea.ai」というリアルタイムの画像編集や自然な画像拡張ができるAIサイトです

右にドラッグするだけで背景をAIが描いてくれます

元の画像のハジが暗いので、

真ん中が暗くなっていますが、しっかり画像を広げられました

拡張部分もジャングルが続き、クオリティの高い横長背景が完成しました！

プレイヤーのダッシュアタック用画像

これまでつかった画像から一枚だけのこしてカットします

プレイヤーキャラクターのダッシュモーション用に、1枚の画像を用意します

PhotoRoomで背景を透過処理し、ダッシュ中のポーズをきれいに切り抜いて保存します

ダッシュアタックにつかう画像をカットしました

これで必要な素材がすべて揃いました

最終的なプログラム修正（大幅アップデート）

これまでのプログラムをアップロードして

あたらしいプログラムをつくりなおします

Google AI Studioに戻り、前回生成したプログラムファイルをアップロードして、

一気に次の指示を伝えます

最後のプロンプト（そのままコピーして使用可能）：

2Dアクションの添付ファイルを同じくHTML1ファイルにして次のことを編集してほしい
マップエディタ部分の下にスクロールバーをつけてさらに横方向に編集できるようにして
またマップエディタ部分の下につけたスクロールバーの下に画面右にマップを拡張できるボタンをつけて
上のバージョン表記を消して
背景画像を設定できるように、背景画像の大きさは縦幅を合わせて
レイヤーを前面（地面とかプレイヤー）、背景に分けて必ずどっちも表示させて
背景の彩度をコントロールできるように
キャラクター、敵の静止画ボタンを削除して歩きから止まっている画像を使って
壊れるブロックを壊すと、敵を倒すと、爆発するようにして
爆発画像は4枚登録できるようにして
敵が出す弾のスピードは0.4秒にして、プレイヤーはHPゲージがあり10回被弾でHP0になるように
プレイヤーの攻撃を銃からダッシュアタックにして、ボタンをおすと素早く前に進みながらの攻撃で（ダッシュ距離、速度をコントロールできるように）またダッシュ中は無敵で空中でもできるように
ダッシュ画像も1枚登録できるように

生成が終わったらHTMLファイルをダウンロードして起動します

テストプレイの結果

ダウンロードしたエディタです

つくった画像ファイルを読みこんで、マップにブロックとして置いていきます

プレイヤーや敵キャラ、爆発の画像を読みこんでアニメーションとして設定します

マップ拡張ボタンをクリックしてマップを広げます

つくった画像があらわれて、マップを広げることができました

テストプレイすると、しっかりダッシュアタックできるゲームが完成しました！

テストプレイをすると、ジャングルの広いステージをダッシュで駆け抜け、

爆発を巻き起こしながら敵を倒す、本格的なアクションゲームになりました！

まとめ

このように、AIだけで、2D横スクロールアクションゲームのエディターをここまで秒で作り上げることができました

AIプログラミングの強みは「少しずつ修正しながら完成に近づけられる」点です

不具合が出てもすぐにプロンプトで直せますし、欲しい機能を追加指示するだけでどんどん進化します

これからもAIを使って、さまざまなゲーム開発に挑戦していきたいと思います！

・・・でも「何からやればいいかわからない」と悩んでいませんか？

今回はAIでゲームを制作する方法を解説します

今回は簡単にできる、2.5D横スクロールアクションのつくり方を紹介します

プログラミングをしなくてもカンタンにつくれます

ぜひチャレンジしてください！

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームは次のリンクからプレイできます

>> 「AIゲームのプレイ＆ガレージ」

AIプログラミングでつくったゲームの紹介

今回つくった2.5Dアクションゲームエディタです

このエディタでは3Dマップをつくることができ、2Dの敵キャラを置くことができます

このページでつくり方を紹介するゲームのエディターです

このエディタをGoogle AI Studioでサクッとつくり、アクションゲームをつくります

AIプログラミングサイトでゲームのお試しバージョンをつくる

Goole AI StudioのサイトでAIにプログラムをつくってもらいます

>> 「Google AI Studio」のサイト

はじめはAIコーディングがやりやすいGoogleAIStudioのサイトに移動します

メッセージボックスにつくるプログラムをタイプしてAIに伝えます

ダウンロードしたゲームエディタをプレイします

プログラムの生成が終わったらダウンロードボタンをクリックしてください

即実行できるHTMLファイルがダウンロードできます

テストプレイをしてみよう

うごくゲームエディタがあらわれました

実行するとエディタ画面が現れます

AIに伝えた通り、マウス操作で地面を変えることができます

また、敵配置ボタンをクリックして敵を配置することができます

テストプレイもしっかり動かすことができます

テストプレイをしてみましょう

しっかりジャンプができて、敵に玉をあてることができます

アクションゲームとして基本的な動きはするプロトタイプをつくることができました

ここからキャラの絵の差し替えとアニメーションをつくりたいと思います

ゲームキャラをピクセル＆ドット絵にする

ピクセル＆ドット絵のゲームキャラをつくる

ピクセルキャラをGoogle Geminiのサイトでつくります

>> 「Gemini」のサイト

スプライトシートをつくることができました

Google Geminiがスグに画像を生成してくれました

このスプライトシートから画像を分割します

画像編集サイトでゲーム用に背景を透過にする

Photopeaのサイトは高機能のオンライン画像編集サイトです

>> 「Photopea」のサイト

背景除去は色々な方法があるので、二つのパターンを紹介します

一つ目は応用がきく画像編集ソフトの方法です

「トリミングツール」で、つかわないキャラをカットします

編集画面に変わったら、左のメニューからトリミングツールをクリックして

必要なキャラだけ残します

投げ縄ツールで不要な部分をカットします

背景を一度にすべて選択して消します

次に選択ツールで背景をドラッグして一度に選択します

右クリックのメニューから他の部分をカットします

しっかり背景が消えました

ピクセル画像からプレイヤーキャラのアニメーションをつくる

キャラの歩いているアニメーションをつくります

>>「Grok」のサイト

Grokのサイトにアクセスしてアニメーションをつくります

画像ファイルをアップロードします

アニメーションさせたい言葉をいれます

アニメーションが完成したらダウンロードします

アニメーションから画像を取り出します

>>「Online Video Screensho」のサイト

このサイトは動画ファイルから画像をとりだすことができるサイトです

再生しながらゲームのキャラアニメーションに必要な画像をとります

すべて終わったらダウンロードボタンをクリックしてダウンロードします

背景を消すサイトにアクセスします

つづいてアニメーションから取り出した画像の背景を透明にします

このサイトはアップロードした瞬間に背景を消すことができます

これでプレイヤーキャラの必要なイラストはそろいました

敵キャラのピクセルアニメーションをつくる

敵キャラのピクセル画像をつくります

ワニの魔法使いであることをAIに伝えて生成します

しっかりイラストが完成しました

背景を消すサイトでキャラを一つにします

>> 「Photoroom」のサイト

背景を消すサイトで敵キャラのまとまったスプライトシートから一つずつに切りわけます

必要のないキャラをブラシで消します

一体のみになったらダウンロードします

Grokでアニメーションをつくります

>> 「Grok」のサイト

歩くアニメーションができました

ゲームのピクセルアニメーションにするために、画像を抽出します

>> 「Online Video Screenshot」のサイト

３体のキャラクターの背景をけします

敵キャラが現れるように、プログラムをつくりなおします

Google AI Studioでプログラムをつくりなおします

プログラム生成がおわったら、ダウンロードします

あたらしく作ったプログラムです

ピクセル画像つきのキャラクターがあらわれました

しかし、画像が明るすぎます

しっかりプレイヤーも敵もアニメーションするゲームになりました

玉もエフェクトがつきましたが、かなり不自然です

プレイヤーのイラストもすごい明るく、左右に動いた場合、反転しません

ここから、背景がないのでこの2Dマップを3Dにして背景を地形でつくりつつ

ボスを登場させて2Dアクションから2.5Dアクションにブラッシュアップさせたいと思います

2Dマップを3Dマップに変える＆2.5Dゲームにする

ボスキャラクターのピクセル画像をつくる

はじめにボスキャラをつくります

ピンク色のワニ魔法使いであることをつたえます

しっかりつくることができました

しっかり生成できたので、アニメーションをつくる準備をします

これまでと同じように一体ずつ分けます

>> 「Photoroom」のサイト

切り抜くために画像をアップロードしたら

必要なキャラ以外をカットします

一体だけ残して、他はすべて消します

しっかり消すことができました

Grokのサイトでピクセル画像をアニメーションさせます

>> 「Grok」のサイト

Grokのサイトにボスキャラをアップロードして、歩くアニメーションをつくります

敵キャラをアップロードするとアニメーションの画面になります

下のメッセージボックスにアニメーション用のテキストをいれます

ちょっとここじゃないって所に口が現れましたが

気にせず進みます

アニメーションのスクリーンショットをとり、画像をとり出します

>> 「Online Video Screenshot」のサイト

アニメーションのスクリーンショットをとれるサイトに移動します

アニメーションからイラストを切り出して

歩いている動きのためのスクリーンショットを全てとります

ゲームで歩くアニメーションにするために、取り出した画像です

とり出した画像をアップロードして背景を消します

これでボスキャラの準備ができました

次は、これまでと同じ方法で、とり出した画像の背景を透明にします

アクションエディタをつくりなおして3Dマップにする

Google AI Studioのサイトにもどり、

2Dマップから3Dマップエディタにするためにプロンプトをつたえます

次のポイントでAIにつたえます

・プレイヤーや敵を配置・移動できるのは「一直線上（2D軸）」のみ

・水面の高さ、時間帯、時間経過のスピードを自由に調節できる機能を追加すること

・メニューバーを操作している間は、誤ってマップを編集できないようにすること

・作成したボスキャラを配置できること

・PNG8形式以外の画像でも、正しい明るさで表示されるように修正すること

AIがつくったプログラムをダウンロードします

完成したゲームのテストプレイ

しっかり2.5Dアクションとして動くゲームが完成しました

Youtubeでは動いているゲームを見ることができます

AIが生成した新しいプログラムを実行すると、進化したエディタが起動します

ここで、先ほど作成したプレイヤーや敵、ボスの画像を読み込み、マップ上に配置していきます

配置が終わったら、実際にテストプレイをしてみましょう！

背景は奥行きのある3Dでありながら、キャラクターはしっかり2Dアクションとして動く、本格的な「2.5Dアクションゲーム」の完成しました

設定した時間経過の機能を使えば、ゲーム内で昼から夜へと景色を変化させることもできます

さらにクオリティを上げるには？

YouTube動画の方では複雑になるので省略しましたが、こんな感じのカスタマイズも可能です

• 背景に2.5Dのオブジェクト（木や建物など）を配置
  
• 3Dマップの地面にテクスチャ（模様）を貼って質感をリアルにする

このように、AIを活用すればプログラミングの深い知識がなくても、見栄えのする本格的なゲームを短時間で作成できます

ぜひ、ご自身のオリジナルキャラクターを使ってゲーム制作に挑戦してみてください！

・・・でも「何からやればいいかわからない」と悩んでいませんか？

今回は AIを使って弾幕縦スクロールシューティングゲームを一瞬で作る方法 について紹介します

プログラミング未経験でも、ノートPCとネットがあれば制作できる方法で紹介しています

ぜひチャレンジしてみてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIのゲーム制作でつかうサイトの紹介

Google AI StudioはAIプログラム機能に力を入れているサイトです

今回はこのサイトをつかってゲームをつくります

>> 「Google AI Studio」のサイト

今回つくるのは、弾幕系の縦スクロールシューティングゲームです

AIをつかえばゲーム制作で特に時間がかかる、プログラミング、素材作成を一気にすすめることができます

【補足】

シューティングゲームは「当たり判定」「敵の動き」「弾の制御」など本来は難易度が高いジャンルです

しかしAIプログラムならば、最初から遊べるプロトタイプをつくれるのが大きなメリットです

AIで弾幕シューティングゲームのプロトタイプをつくる

AIへ作りたいゲームをつたえる

まずは Google AI Studio（Gemini） を使って、

ゲームの土台となるプログラムを作成します

生成が完了したら、右上のダウンロードボタンから保存して実行します

【補足】

最初から完璧を目指す必要はありません

「動くかどうか」を確認できるプロトタイプを早く作ることで、これからの修正が楽になります

AIがプログラムをつくりはじめました

ダウンロードしたプログラムを実行してください

しっかりシューティングゲームが動きます

キャラクター・ボスキャラのイラスト生成

次に、ゲームに登場するキャラクターとボスキャラのイラストを作成します

黒色の服だと背景とかさなるので修正します

【補足】
ゲーム用イラストは、背景に埋もれない色と形も重要です

プレイヤーのイラストが完成しました

次はボスキャラをつくります

ボスキャラはあらかじめ生成したイラストをもとに生成しました

こちらはフリーで配布しますので、必要ならばご使用ください

イラストとテキストからボスキャラをつくります

大まかなイラストはOKなので、イラストをととのえます

しっかりボスキャラが完成しました

ゲーム背景イラストの生成

ゲームの背景をつくります

パターン画像がつくりやすい宇宙の背景にします

次は縦スクロール用の背景画像を作成します

今回は ChatGPT を使って宇宙背景を生成します

【補足】
ループ背景はGeminiよりChatGPTの方が成功率が高い印象があります

背景はシンプルな方が弾幕が見やすくなるため、描き込みすぎないのがおすすめです

完成した宇宙の背景画像です

フリーで配布するので、必要でしたらご使用ください

ゲーム音楽（BGM）の生成

ゲームBGMは「Suno AI」を使って作成します

>> 「Suno AI」の公式サイト

Suno AIはジャンルや雰囲気をテキストで入力するだけで、音楽を自動で生成できるサイトです

【補足】
BGMはゲームの印象を大きく左右します

テンポが速すぎると疲れやすいため、

弾幕ゲームでは少し落ち着いた曲も相性が良いです

３分くらいで自動で曲が完成します

音楽が完成したらダウンロードします

キャラクター画像の背景を透過する

キャラをアップロードして背景を透明にします

>> 「Photoroom」のサイト

キャラクター画像の背景は photoroom で透過します

アップロードするだけで自動で背景がなくなり、そのままPNGで保存できます

素材を組み込んだゲームプログラムを生成

プログラムをバージョンアップします

すべての素材を Google AI Studio にアップロードし、もう一度プログラムを生成します

BGMの再生、敵弾の速度調整などもまとめて指示します

イラスト変更とブラッシュアップ

キャラクターの画像を入れかえます

Geminiのサイトにアクセスしてイラストをつくります

背面になりませんでしたが、

しっかり魔法使いの白猫が生成できました

しっかり後ろ向きのキャラクターが完成しました

最後にキャラクターやエフェクトを調整し、完成度を高めます

背面猫キャラへの変更や、ボスの動き・攻撃パターンを追加します

【補足】

AIとの会話が長くなりすぎたら、
一度会話をリセットして再生成した方が早くうまくいくことがあります

ゲームをさらに改良してメリハリがあるゲームにします

AIのプログラムがおわって、キャラを入れかえたゲームです

しっかりキャラがいれかわりメリハリがあるゲームになりました

まとめ

AIを活用すれば、プログラミングの経験がなくても本格的なシューティングゲームをつくれます

ぜひチャレンジしてみてください！

AIに言葉で伝えるよりもツールをそのままアップロードすると、

より確実にアプリやゲームをつくることができます

>> 「Github」のページ

ゲーム制作で役に立つ & Youtubeで紹介した無料ツール

キャラクタースプライトシートのカット用ツール

フォトショップのように背景切り抜き＆複数分割カットができます

またアニメーションGIFができるように更新しました

雷・サンダーの魔法・電流エフェクト

AIになかなか伝わらない雷・サンダーエフェクトのJavascriptです

これを添付すればAIもこれを元につくることができます

背景用 & 拡張用のボクセルエディター

AIにファイルを添付して、ボクセルの機能をプラスするためのプログラムです

ゲーム制作記事で紹介したプログラムです

アドベンチャーゲーム・ミステリーゲームのプログラム

アドベンチャーゲームを秒で作る方法で紹介したプログラムです

使い方とつくり方は次のページで紹介しています

>> 「アドベンチャーゲームを秒で作る方法」のページ

2D横スクロールアクションゲームのプログラム

ローグライク・アクションゲームのプログラム

2Dアクションゲームを爆速で作る方法のプログラム

2Dアクションゲームの作り方で紹介していたプログラムコードです

使い方とつくり方は次のページになります

>> 「2Dアクションゲームをカンタンに作る方法」のページ

AIでノベルゲームのカンタンなつくり方のプログラム

AIでノベルゲーム爆速生成方法で紹介したプログラムです

使い方とつくり方は次のページで紹介しています

>>「AIでノベルゲーム爆速生成方法」のページ

景観アシストツール

フラクタル風景を3D空間に描画するソフト

3D空間に数式計算により美しい線形を自動で描くことができます

数字を変えてボタンをクリックすると線を描くことができます

つくった絵は保存してつかうことができます

別ページでプレイすることもできます

背景＆画像素材作成ツール！美しいフラクタル線形作成ツール

背景＆画像素材作成ツール！美しいフラクタル線形作成ツール美しいフラクタル線形作成ツール3D空間にフラクタル計算により美しい線形を自動で描くことができます各数字を変えてボタンをクリックすると線を描くことができますつくった絵は保存してつかうこと…

illust55.com

2021.09.29

炎＆オーロラのエフェクト作成ツール

炎とオーロラのエフェクトを半自動でつくることができます

つくった絵は画像として保存することができます