こんにちは

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

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

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

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

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

作成したピクセル画像は次のページからダウンロードできます
アクションゲームのコミカルSDキャラ

今回紹介するゲーム

ゲームの素材を用意する

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

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 @ クリエイティブ情報を紹介