AIプログラミング入門!2Dローグライクアクションゲームを秒で作る方法【初心者向け講座】

こんにちは

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

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

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

今回紹介するゲーム

ゲームの素材を用意する

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

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

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

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

つぎの通りAIに伝えます

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

つぎの通り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プログラム作成のカットツールを使用します。 このツールのページは概要欄に載せているのでぜひご覧ください

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

歩行モーションや攻撃モーションをドラッグして赤い枠で囲みます。 次に空を飛ぶ白装束のゴースト魔法使いの画像をツールに読み込みます。 こちらも同様に必要なアニメーション部分を枠で囲んで切り出します。 続いて紫色のローブを着た鎌を持つスケルトンの切り出し作業を行います。 さらに緑色のゾンビキャラクターの画像もツールに入れます。 爆発エフェクトを含むゾンビの歩行や攻撃パターンを個別に切り出します。 最後に横向きに修正した一つ目のゴーレムの画像を読み込みます。 歩く絵のパターンや攻撃のパターンをすべて枠で囲んで素材の切り出しを完了させます。

AIを使った画像の自動切り出しについても説明しておきます。 Googleのアンチグラビティといった自律型のAIエージェント機能もあります。 これらを使えばプログラムで自動的に画像を切り出すこと自体は可能です。 しかし現状のAIでは切り出しの失敗が非常に多く発生します。 エラーが起きるたびに修正の指示を出すと余計に時間がかかってしまいます。 そのため現状は自分で範囲を選択して手動で作業する方が確実です。 結果的に自らの手で切り出す方がはるかに効率良くゲーム制作を進められます。

第四部 背景素材の生成とAIによるプログラミング

次はゲームの舞台となる背景画像を作ります。
今回はダンジョンを舞台に設定します。
そのため壁と床のテクスチャ画像を生成します。
ジェミニのチャット欄にプロンプトを入力します。
ドット絵やボクセルの表面に貼るテクスチャーというキーワードを指定します。
お城の地下をイメージした少し明るめの灰色茶色を指定します

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

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

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

ダンジョンというキーワードも忘れずに盛り込みます。
これらの指示により綺麗な石畳の壁の画像が完成しました。
これでゲームに必要な画像素材がすべて揃いました。

ここからはAIを使ったプログラミングの工程に入ります。
グーグルAIスタジオのサイトに移動します。
モデルはジェミニスリーポイントワンプロプレビューを選択しています。
左側のプロンプト入力欄に作ってほしいゲームの仕様を記述します。
今回はバイブコーディングの手法を用いて一気に複雑なコードを生成します。
入力するプロンプトはかなりの長文になります。
そのため動画内ではテキストをスクロールする形で紹介しています。
具体的な指示内容の一部を解説します。
スリージェイエスやオービットコントロールズを使用したフロントエンドのゲーム作成を指示します。
外部アセットは一切使用しない条件を付けます。
完全に動作する一つのエイチティーエムエルファイルとして出力させます。
画面のレイアウトやスタイルシートの細部まで指定しています。
プレイヤーのステータスや敵の行動パターンも細かく定義します。
この長文プロンプトは概要欄のブログページにアップロードしています。
パラメータなどをカスタマイズできる形で公開しています。
ご自身のゲーム制作にぜひご活用ください。
指示の入力が完了したら右下のランボタンをクリックします。
AIが画面右側でゲームのプログラムを作り始めます。
エイチティーエムエルやジャバスクリプトのコードが次々と出力されます。
しばらく待つとプログラムの生成が完了します。
これでゲームのベースとなる一つのファイルが出来上がりました。
すぐにブラウザ上で動作確認のテストプレイに移ります。

第五部 初期テストプレイとプロンプトによるバグ修正

AIによるプログラムが完成したので初期のテストプレイを行います

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

デフォルトの円や四角のキャラクターを生成したドット絵に置き換えます

ここで画面上にいくつかの問題点が見つかりました
画像を無理やり正方形の枠に押し込もうとする処理が働いていました

そのためキャラクターの絵が縦に少し潰れて表示されています。 さらに背景の床のテクスチャにも不具合がありました。 設定した床の画像の枠がスクロールに合わせて動かないバグが発生しています

続いてゲームの基本システムと動作についても確認します

このゲームは自動で生成されるダンジョンを探索する仕組みです。 プレイヤーの攻撃アクションは自動で行われる仕様になっています。 立ち止まっている時に指定範囲内に敵がいると自動攻撃が発動します。 しかしテストプレイでは範囲外の遠い敵にも攻撃してしまう状態でした。 キャラクターの歩行アクション自体はそれなりに成立しています。 ただ全体的に動作や判定の怪しい部分が多い状況です。 そこでこれらのバグをまとめて修正するためにAIへ追加の指示を出します。 画像のアスペクト比の乱れや床の表示バグを直すようにテキストで伝えます。 さらに攻撃時の手応えを出すためのヒットストップ機能を追加します。 攻撃の当たり判定の修正も盛り込んだ長文のプロンプトを入力します。 ここでAIプログラミングにおける重要なテクニックを紹介しておきます。 プログラムを再度生成させる時はハルシネーションに注意が必要です。 対策として直前に作成したプログラムのコードファイルをプロンプトに添付します。 これによりAIが文脈を忘れず意図しないコードを生成するミスを防げます

修正版のプログラムコードが完成したので再びプレイしてみます。 画像が潰れる問題が無事に解決してキャラクターが綺麗に表示されるようになりました。 グラフィック周りの修正ができたことでより本格的なゲームらしい見た目になりました。

グラフィックは綺麗になりましたがまだ改善点があります。
ヒットストップや当たり判定にまだ違和感が残っています。
さらにストーリー性が全くないという問題もありました。
そこでエフェクトとストーリーを中心に追加で作り込みます

ゲームを盛り上げるために雷の魔法エフェクトを追加します。
エフェクトはAIで事前に画像だけを作っておきます。
それを添付ファイルとしてプログラムに読み込ませます。
複雑な処理は事前に分けておくとAIが混乱しにくくなります。
これらの素材やプログラムもブログにアップロードしています。
最後にゲーム全体の雰囲気を整えて完成形に仕上げます。
ダンジョンの暗さを表現するため画面の四隅を暗くしました。
新しく追加したテロップ機能の動作も確認します。
ゲーム開始時にストーリーの文章がしっかり表示されました

戦闘では派手な雷のエフェクトが画面に現れます。
雷の描写はまだ少し不自然な部分が残っています。
動画上では録画ソフトの影響で画面がコマ落ちして見えます。
しかし実際のゲーム画面ではサクサクと滑らかに動きます。
敵の攻撃を避けるローリングの動作も確認しました。
ローリングは一つの絵を回転させて使い回しています。
AIに前転の全コマを描かせるのは非常に難易度が高いです。
今のところは画像をコピーして回す方が早く作れます。
これで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ファイルとして出力してください。

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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