こんにちは
この動画ではAIでゲームを超簡単につくる方法を紹介します
今回は画面にでている、ローグライクアクションゲーム、の作り方を紹介します
動画の流れはプレイヤー画像をつくり、AIでプログラムをつくります
AIプログラミングでつくったローグライクゲームの紹介
キャラクターとダンジョンの素材をAIで生成
ではさっそくプレイヤー画像をつくりたいと思います
Geminiのサイトに移動しAIに画像のメッセージを伝えます
それぞれの動きの特徴をもれなく伝えました
しっかり画像があらわれました
続いて敵キャラをつくりたいと思います
ゾンビキャラの特徴を伝えます
しっかり絵はできましたが、足が揃っている画像をGeminiにファイルを渡してつくります
しっかり足が揃った絵ができました
続いて同じように敵キャラをつくります
魔法使い、ゾンビキャラクター、ゴースト魔法使い、
スケルトン騎士、
足が揃った画像がないと歩くアニメーションにはならないので、
再度geminiで追加で入れるように伝えます
一通りのアニメーション素材が完成しました
素材の加工（専用ツールでの個別切り抜き）
次は素材からキャラクターを切り出します
以前の動画で紹介したAIプログラムでつくったカットツールをつかいます
概要ランにアップロードしたページをのせましたので
ぜひご覧ください
プレイヤーキャラクターからカットをします
歩く絵のパターン、攻撃のパターンを囲んで切り出しをします
続いて敵キャラも同じように歩きの絵と攻撃の絵を囲んで絵を切り出します
絵の切り出しはGoogleのAntigravityなど自立型の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をつかってプログラミングしたいと思います
Google AI Studioのサイトに移動してつくってほしいゲームをAIに伝えます
ご覧のとおり今回はかなりの長文なので、概要ランのブログページにアップロードしました
カスタマイズできる形でプロンプトをつくりましたので、ぜひご使用ください
RunをクリックするとAIがゲームを作り始めます
つくったゲームをテストプレイしよう
では完成したようなので、さっそくプレイします
さっそく作成したキャラに絵を置き換えます
無理やり絵を正方形に押し込めようとしているので
やや絵がつぶれています
また、せっかくつくった床もワクが動かないバグです
次の修正で直したいと思います
しっかり歩きアクションとしてそれなりに成立していますが、
怪しい部分が多いですね
さっそく、まとめて修正したいと思います
ゲームの見栄えをととのえてバグをなおす
先ほどのバグと共にヒットストップ や攻撃の修正をくわえます
プログラムができあがったのでさっそくプレイしてみましょう
しっかり画像周りの修正ができてよりゲームっぽくなりました
しかし、まだ少し地味です
また、ストーリー性がまったくないので
エフェクトとストーリーを中心に入れ込みたいと思います
エフェクトはAIでつくった雷エフェクトを添付ファイルとして入れ込みます
エフェクトは事前にエフェクトだけつくって追加していく方が、高品質なものができやすいです
ではプログラムが出来上がったのでさっそくプレイしてみましょう
床、壁、そして新しいテロップ機能で絵を設定し
アニメーションで回避を含めて絵を設定してプレイします
しっかり、派手な雷のエフェクトが登場し、回避のローリングも
それっぽく動いています
しかし雷がまだ不自然です
最後に完成形として雷の発生の修正とダンジョンっぽさを入れるために
画面の雰囲気を整えます
さっそくプログラムができたのでプレイしてみましょう
どうでしょうか？
しっかりエフェクトがかっこよくあらわれ、ダンジョンっぽい雰囲気で
ゲームとして形になったと思います
このチャンネルでは今後もAIゲーム制作をアップしていきたいと思います
ここまでご視聴いただきありがとうございました。
あなたは世界最高峰のフロントエンドエンジニア兼ゲームクリエイターです。
以下の修正を添付ファイルにすること
修正する際に独断で現在の機能を絶対に削除しないこと
1文字の妥協や省略も許さず、100%完全に実装してください。
-----------------------------
敵の巡回の動きが少ないので、巡回タイプをアニメーションタブでそれぞれの敵キャラに設定できるように
アニメーションタブの敵キャラのそれぞれのアニメーション部分に一括読み込みボタンを置き、一括でアニメーションを割り当てられるように
廊下は暗くせず、常に普通の部屋と同じ明るさで表示すること
一番内側の壁しか表示されていない、二番目の壁も表示して、半分の暗さで描かれるように
キャラが壁にめり込む、特に手前の壁はめり込むことによりキャラが見えなくなるバグが発生している
また、左と右の壁の当たり判定が異なっているバグを修正し、すべの当たり判定を同じにすること
敵は2回以上の攻撃でやられるように
キャラの比率が元のアスペクト比率ではない
プレイヤーのドッジ（回避）がシフトボタンとボタンで動作できないので、できるように、またアニメーション（２ コマ）も近接で設定できるように、回避行動の移動量は2キャラ分で、基本設定から調整できるように
床と壁の画像は読み込めるが、ダンジョンタブで赤枠が固定されておりドラッグで範囲を選択できない
ロックオン表示していない時でも攻撃してしまっている、攻撃とロックオンは必ず射程範囲内のみ
移動している時にロックオン、止まって攻撃発動
銃に攻撃判定がない、銃も近接攻撃と同じように敵はヒットストップがかかる
基本設定で近接攻撃のロックオン範囲を決められるように、デフォルトの範囲は６キャラ分
プレイヤーの攻撃は2段攻撃であり、2段目の攻撃に敵にヒットストップとシェイクがかかっていない
敵がダメージをくらった時は少しだけヒットバックがかかる
基本設定の部屋最大数の項目と入れ替え「部屋数」として部屋の数をランダムとしないこと、デフォルトは８とする
コメント