こんにちは

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

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

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

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

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

今回紹介するゲーム

ゲームの素材を用意する

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

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

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

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

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

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

外見はミディアムロングの金髪を指定します。
服装は青いジャケットと黒いズボンにします。
キャラクターの等身はウルトラSDの2頭身に設定します。
後の切り抜き作業のために背景は純白を指定しておきます。
顔周りの不要なエフェクトはつけないように指示します。
ここからがアニメーションを自然に見せるための重要なポイントです。
各モーションに対応するフレームのコマ数を細かく指定します。
通常の歩行モーションは8コマで構成します。
ライフル銃を腰に構えた歩き方も同じく8コマで描かせます。
このときすべてのコマの絵が別々のポーズになるように命令します。
右足と左足が重なる瞬間を必ず含めるように指定します。
右足が前にある状態と左足が前にある状態も必須とします。
それぞれの足の動きの間の瞬間を含めることで歩行アニメーションが滑らかになります。
攻撃の予備動作として正拳突きや大きなアッパーカットのポーズも作ります。
前回り受け身やローリングなどの回避アクションも追加します。
生成される画面上に相手のキャラや別のキャラが出ないように制限をかけます。
これらの必要な情報をすべてプロンプトに盛り込んでGeminiに送信します。

しっかり画像が生成できました

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

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

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

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

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

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

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

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

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

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

現在、ChatGPTは足がそろった画像をつくるのが苦手です

※最近はかなり改善されてきています

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

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

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

この修正作業にはジェミニを使用します

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

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

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

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

続いて同じように他のモーションの絵を作ります。 アニメーションの絵はプロンプトでコマ数を指定します。 コマ数を入れることで絵の細かさをコントロールできるからです

次は比較のためにジェミニでゾンビ絵を作ってみます。 先ほどチャットジーピーティーに渡したのと同じメッセージを入力します。 生成された画像を見るとゾンビが帽子を被っていました。 帽子は不要なので消すようにもう一度作り直します。

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

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

次は飛んでいるゴーストの魔法使いを作りますゲームに組み込む際は画像の背景を透過させる必要があります あとで切り取りやすくするための工夫をプロンプトに入れます

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

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

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

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

こちらは再びチャットジーピーティーを使用して作成しました

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

やはりチャットジーピーティーの方が細かく描き込まれたドット絵を作りやすいようです

しかしここでも足が揃った絵が出力されませんでした。 歩いている時に足が揃っているパターンが必要です。 さらに逆の足が前になるパターンも必要になります。 これらを作れるかどうかジェミニで作り直します。 結果としてしっかり足が揃った瞬間の絵を作ることができました。

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

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

AIに指示を出してゴーレムのドット絵を生成しました。 しかし出力されたゴーレムは正面を向いてしまっていました。 今回は2Dのアクションゲームを想定しています。 そのためキャラクターは横向きに直す必要があります。 横向きになおすように追加でプロンプトを入力します。

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

修正の結果しっかり横向きになったゴーレムが現れました。

第三部 専用ツールによるキャラクター素材の切り出し

一通りのアニメーション素材が完成しました。 ここからは完成した画像を個別のゲーム用素材に切り出す作業です。 以前の動画で紹介したAIプログラム作成のカットツールを使用します。 このツールのページは概要欄に載せているのでぜひご覧ください。

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

AIを使った画像の自動切り出しについても説明しておきます。 Googleのアンチグラビティといった自律型の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段目の攻撃に敵にヒットストップとシェイクがかかっていない

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

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

「AIをつかったプログラミングに興味がある」

「本格的なアクションゲームをつくってみたい！」

「時間がないけどゲームをつくってみたい」

・・・でも、

何からやればいいかわからない！

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

こんにちは！

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

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

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

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

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

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

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

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

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

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

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

//服は少し明るい青色

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

入力するプロンプトは、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を開きます。画面上にはパワーポイントの絵という吹出し付きでビルの配置イメージ画像が表示されており、この画像をプロンプト入力欄にアタッチします。テキスト欄には、2D横スクロールのアクションゲームの背景、サイバーパンク風のビル、正面画像、ピクセルアート、と入力して送信します。今回は背景を切って使うためたくさん作ること、パワーポイントで作った画像を使って建物の並び方を絵で伝えること、テキストで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が作った画像を一枚ずつ確認することが大切です
キャラクターの切り出しが終わったので次は背景を作ります
今回はPowerPointを使って建物の並び方を簡単な絵にします
この画像をAIに見せます
さらに2Dアクションゲームの背景として使う画像だと伝えます
すると2Dアクションゲームらしい背景ができました
次はこの背景をゲームの舞台として使うためのエディタを作ります
ここでもAIを使います
エディタの見た目や必要な機能を文章で伝えます
するとAIがプログラムを作り始めます
完成したので起動してみます
画像を置くことはできます
ただ最初は画像を並べるだけのエディタになっています
そこでさらにAIへ修正をお願いします
画像そのものを置けるようにします
そしてキャンバスを拡大したり縮小したりできるようにします
修正されたエディタを試してみます
画像をそのまま置けるようになりました
画像の順番も使えるようになりました
これで複数の画像を組み合わせてゲームの背景を作れます
しかしまだ問題があります
このままだとどこが足場なのか分かりにくいです
一枚の絵のように見えてしまいます
そこで明るさを調整できるようにAIへ指示します
レベル補正も使えるようにします
完成したものを試してみます
背景の明るさを調整できるようになりました
かなり2Dアクションゲームの背景らしくなりました
では次にゲーム本体を作ります
AIに2Dアクションゲームのイメージを伝えます
そしてゲームのプログラムを作ってもらいます
まずは基本的な動きだけを作ります
歩くことができます
ジャンプもできます
壁ジャンプもできます
最低限の動きができるゲームが完成しました
ただこのままでは見た目がさみしいです
そこで先ほど作った画像エディタと合体させます
二つのプログラムをAIに渡します
そしてエディタでアニメーションを設定できるようにします
アクション部分の調整もできるようにします
細かい機能をAIに伝えていきます
この時に使った文章はかなり長くなりました
そのためこの記事から確認できるようにしています
AIがかなり長いプログラムを作りました
さっそく動かしてみます
しっかりキャラクターが動きます
ただ止まっている時のアニメーション設定を忘れていました
そのため立ち止まっていても走り続けています
キャラクターの大きさも少し小さいです
壁登りはできます
しかし壁登りのアニメーションがありません
ゲーム全体の形はできてきました
ただまだ調整する部分がたくさんあります
そこでAIにプログラムを修正してもらいます
ここで大切なのが元の機能を消さないことです
プログラムが長くなるとAIが新しい機能を追加する時に元の機能を消してしまうことがあります
そのため新しい機能を追加しても元の機能は残すように伝えます
修正が終わったので実際にゲームを起動します
まず背景を読み込みます
ここでゲームの舞台を作っていきます
背景を設定したら次は当たり判定を設定します
Unityのように地面や壁に当たり判定を設定します
これでキャラクターがどこを歩けるのか決められます
続いてキャラクターを読み込みます
プレイヤーと敵を配置します
それぞれのアニメーションも設定します
画面の下にはアニメーションエディタを作りました
ここでアニメーションの動きや画像の順番を変えられます
各キャラクターの設定が終わったらゲームをプレイします
背景を読み込みます
プレイヤーを配置します
敵キャラクターも配置します
実際に動かしてみるとしっかりゲームとして動きました
まだ当たり判定や細かい部分には調整が必要です
それでも短い時間で忍者風の2Dアクションゲームの形を作ることができました
今回のゲーム制作ではAIに一度ですべてを作らせてはいません
キャラクターを作ります
その画像をゲーム用に切り出します
次に背景を作ります
そして背景を置くためのエディタを作ります
そのあとゲームの基本部分を作ります
最後にそれぞれを一つにまとめます
このように少しずつ作っていくことでAIを使ったゲーム制作ができます
特にプログラムが長くなってきた時は注意が必要です
新しい機能を追加する時に元の機能が消えることがあります
そのため今ある機能を残したまま新しい機能を追加するようにAIへ伝えることが重要です
今回作ったゲームはまだ完成品ではありません
当たり判定にも調整が必要です
アニメーションにも直したい部分があります
それでも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に言葉で伝えるよりもツールをそのままアップロードすると、

より確実にアプリやゲームをつくることができます

ゲーム制作で役に立つ & Youtubeで紹介した無料ツール

キャラクタースプライトシートのカット用ツール

フォトショップのように背景切り抜き＆複数分割カットができます

またアニメーションGIFができるように更新しました

雷・サンダーの魔法・電流エフェクト

AIになかなか伝わらない雷・サンダーエフェクトのJavascriptです

これを添付すればAIもこれを元につくることができます

<div class="wp-lightning-simulator-container">
    <div id="wp-lightning-control-panel">
        <h2>電流エフェクト調整</h2>
        
        <div class="wp-control-group">
            <label for="wp-thickness">太さ (Thickness)<span id="wp-val-thickness" class="wp-value-display">2.5px</span></label>
            <input type="range" id="wp-thickness" min="1" max="10" step="0.5" value="2.5">
        </div>

        <div class="wp-control-group">
            <label for="wp-brightness">明るさ (Brightness)<span id="wp-val-brightness" class="wp-value-display">120%</span></label>
            <input type="range" id="wp-brightness" min="50" max="200" step="5" value="120">
        </div>

        <div class="wp-control-group">
            <label for="wp-hue">色み (Color Hue)<span id="wp-val-hue" class="wp-value-display">195°</span></label>
            <input type="range" id="wp-hue" min="0" max="360" step="1" value="195">
        </div>

        <div class="wp-control-group">
            <label for="wp-diffusion">拡散 (Chaos / Diffusion)<span id="wp-val-diffusion" class="wp-value-display">35</span></label>
            <input type="range" id="wp-diffusion" min="5" max="80" step="1" value="35">
        </div>
    </div>

    <div id="wp-lightning-instructions">画面をドラッグ、またはクリックすると電流の始点・終点を変更できます</div>

    <canvas id="wp-lightningCanvas"></canvas>
</div>

<style>
    /* 記事の幅に合わせて全画面表示、または指定エリアに収めるラッパー */
    .wp-lightning-simulator-container {
        position: relative;
        width: 100%;
        height: 600px; /* WordPress内で扱いやすいように固定高に調整（100vhから変更） */
        background-color: #08090c;
        color: #e0e6ed;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        margin: 2em 0;
    }

    /* 他の要素のユーザー選択を邪魔しないようコンテナ内のみ制限 */
    .wp-lightning-simulator-container * {
        box-sizing: border-box;
        user-select: none;
    }

    #wp-lightning-control-panel {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 280px;
        background: rgba(15, 22, 36, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        z-index: 10;
    }

    #wp-lightning-control-panel h2 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 15px 0 !important; /* WPテーマのスタイルを上書き */
        padding: 0 0 8px 0 !important;
        color: #fff !important;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .wp-control-group {
        margin-bottom: 14px;
    }

    .wp-control-group:last-child {
        margin-bottom: 0;
    }

    .wp-control-group label {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #a0aec0;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .wp-value-display {
        color: #63b3ed;
        font-family: monospace;
        font-weight: bold;
    }

    .wp-control-group input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        background: #2d3748;
        border-radius: 3px;
        outline: none;
        margin: 0;
    }

    .wp-control-group input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 0 6px rgba(0,0,0,0.5);
        transition: transform 0.1s, background-color 0.1s;
    }

    .wp-control-group input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.2);
        background: #63b3ed;
    }

    #wp-lightningCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: crosshair;
        display: block;
    }

    #wp-lightning-instructions {
        position: absolute;
        bottom: 15px;
        right: 15px;
        color: rgba(255, 255, 255, 0.4);
        font-size: 11px;
        pointer-events: none;
        text-align: right;
        z-index: 10;
    }
</style>

<script>
(function() {
    // WordPress内での競合を防ぐため、即時関数(IIFE)でスコープを隔離
    const container = document.querySelector('.wp-lightning-simulator-container');
    const canvas = document.getElementById('wp-lightningCanvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    const sliders = {
        thickness: document.getElementById('wp-thickness'),
        brightness: document.getElementById('wp-brightness'),
        hue: document.getElementById('wp-hue'),
        diffusion: document.getElementById('wp-diffusion')
    };

    const displays = {
        thickness: document.getElementById('wp-val-thickness'),
        brightness: document.getElementById('wp-val-brightness'),
        hue: document.getElementById('wp-val-hue'),
        diffusion: document.getElementById('wp-val-diffusion')
    };

    let params = {
        thickness: parseFloat(sliders.thickness.value),
        brightness: parseInt(sliders.brightness.value),
        hue: parseInt(sliders.hue.value),
        diffusion: parseInt(sliders.diffusion.value)
    };

    function updateParams() {
        params.thickness = parseFloat(sliders.thickness.value);
        params.brightness = parseInt(sliders.brightness.value);
        params.hue = parseInt(sliders.hue.value);
        params.diffusion = parseInt(sliders.diffusion.value);

        displays.thickness.textContent = params.thickness.toFixed(1) + 'px';
        displays.brightness.textContent = params.brightness + '%';
        displays.hue.textContent = params.hue + '°';
        displays.diffusion.textContent = params.diffusion;
    }

    Object.keys(sliders).forEach(key => {
        sliders[key].addEventListener('input', updateParams);
    });

    function resizeCanvas() {
        // 全画面(window)ではなく、親コンテナのサイズに合わせる
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    let startPoint = { x: canvas.width * 0.25, y: canvas.height * 0.5 };
    let endPoint = { x: canvas.width * 0.75, y: canvas.height * 0.5 };
    let isDragging = false;

    function getEventPos(e) {
        const rect = canvas.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
        // スクロールや親要素の位置ズレを補正
        return { 
            x: clientX - rect.left, 
            y: clientY - rect.top 
        };
    }

    function handleStart(e) {
        if (e.target.closest('#wp-lightning-control-panel')) return;
        isDragging = true;
        const pos = getEventPos(e);
        startPoint = pos;
        endPoint = pos;
    }

    function handleMove(e) {
        if (!isDragging) return;
        const pos = getEventPos(e);
        endPoint = pos;
    }

    function handleEnd() {
        isDragging = false;
    }

    // イベントリスナーをwindowではなくcanvas（またはコンテナ）に絞ることで誤作動を防ぐ
    canvas.addEventListener('mousedown', handleStart);
    window.addEventListener('mousemove', handleMove);
    window.addEventListener('mouseup', handleEnd);

    canvas.addEventListener('touchstart', handleStart, { passive: true });
    window.addEventListener('touchmove', handleMove, { passive: true });
    window.addEventListener('touchend', handleEnd);

    window.addEventListener('resize', () => {
        if (!isDragging) {
            startPoint = { x: canvas.width * 0.25, y: canvas.height * 0.5 };
            endPoint = { x: canvas.width * 0.75, y: canvas.height * 0.5 };
        }
    });

    function createLightningPath(startX, startY, endX, endY, displace, minSegmentLength) {
        const dx = endX - startX;
        const dy = endY - startY;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < minSegmentLength) {
            return [{ x: startX, y: startY }, { x: endX, y: endY }];
        }

        const midX = (startX + endX) / 2;
        const midY = (startY + endY) / 2;

        const nx = -dy / distance;
        const ny = dx / distance;
        const offset = (Math.random() - 0.5) * displace;

        const actualMidX = midX + nx * offset;
        const actualMidY = midY + ny * offset;

        const nextDisplace = displace * 0.52;
        const leftPath = createLightningPath(startX, startY, actualMidX, actualMidY, nextDisplace, minSegmentLength);
        const rightPath = createLightningPath(actualMidX, actualMidY, endX, endY, nextDisplace, minSegmentLength);

        return leftPath.concat(rightPath.slice(1));
    }

    let animationFrameId;
    function animate() {
        ctx.fillStyle = 'rgba(8, 9, 12, 0.4)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        let currentEnd = { ...endPoint };
        if (startPoint.x === endPoint.x && startPoint.y === endPoint.y) {
            currentEnd.x += 0.1; 
        }

        const pathsToDraw = [];
        const mainPath = createLightningPath(startPoint.x, startPoint.y, currentEnd.x, currentEnd.y, params.diffusion * 6, 10);
        pathsToDraw.push({ segments: mainPath, type: 'main' });

        if (mainPath.length > 4 && Math.random() < 0.6) {
            const branchIdx = Math.floor(Math.random() * (mainPath.length - 2)) + 1;
            const bStart = mainPath[branchIdx];
            const angle = (Math.random() - 0.5) * Math.PI / 2;
            const length = params.diffusion * (2 + Math.random() * 4);
            
            const bEndX = bStart.x + Math.sin(angle) * length;
            const bEndY = bStart.y + Math.cos(angle) * length;
            
            const branchPath = createLightningPath(bStart.x, bStart.y, bEndX, bEndY, params.diffusion * 2, 8);
            pathsToDraw.push({ segments: branchPath, type: 'branch' });
        }

        const baseHue = params.hue;
        const glowIntensity = params.brightness / 100;

        pathsToDraw.forEach(pathData => {
            const points = pathData.segments;
            const isMain = pathData.type === 'main';

            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';

            // 1. 拡散グロー
            ctx.shadowBlur = 40 * glowIntensity;
            ctx.shadowColor = `hsl(${baseHue}, 100%, 50%)`;
            ctx.strokeStyle = `rgba(${isMain ? 20 : 10}, 80, 255, ${0.05 * glowIntensity})`;
            ctx.lineWidth = params.thickness * (isMain ? 8 : 4);
            
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); }
            ctx.stroke();

            // 2. コアグロー
            ctx.shadowBlur = 15 * glowIntensity;
            ctx.shadowColor = `hsl(${baseHue}, 100%, 60%)`;
            ctx.strokeStyle = `hsl(${baseHue}, 100%, ${65 * glowIntensity}%)`;
            ctx.lineWidth = params.thickness * (isMain ? 3 : 1.5);
            
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); }
            ctx.stroke();

            // 3. ホワイトコア
            ctx.shadowBlur = 4 * glowIntensity;
            ctx.shadowColor = '#fff';
            ctx.strokeStyle = `rgba(255, 255, 255, ${0.9 * Math.min(1, glowIntensity)})`;
            ctx.lineWidth = params.thickness * (isMain ? 1 : 0.5);
            
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); }
            ctx.stroke();
        });

        if (Math.random() < 0.04) {
            ctx.fillStyle = `hsla(${baseHue}, 100%, 50%, ${0.02 * glowIntensity})`;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        animationFrameId = requestAnimationFrame(animate);
    }

    animate();
})();
</script>

背景用 & 拡張用のボクセルエディター

AIにファイルを添付して、ボクセルの機能をプラスするためのプログラムです

景観アシストツール

フラクタル風景を3D空間に描画するソフト

3D空間に数式計算により美しい線形を自動で描くことができます

数字を変えてボタンをクリックすると線を描くことができます

つくった絵は保存してつかうことができます

別ページでプレイすることもできます

背景＆画像素材作成ツール！美しいフラクタル線形作成ツール

背景＆画像素材作成ツール！美しいフラクタル線形作成ツール美しいフラクタル線形作成ツール3D空間にフラクタル計算により美しい線形を自動で描くことができます各数字を変えてボタンをクリックすると線を描くことができますつくった絵は保存してつかうこと...

illust55.com

2021.09.29

炎＆オーロラのエフェクト作成ツール

炎とオーロラのエフェクトを半自動でつくることができます

つくった絵は画像として保存することができます

ゲーム制作記事で紹介したプログラムです

2Dアクションゲームを爆速で作る方法のプログラム

2Dアクションゲームの作り方で紹介していたプログラムコードです

使い方とつくり方は次のページになります

「2Dアクションゲームをカンタンに作る方法」のページ

AIでノベルゲームのカンタンなつくり方のプログラム

AIでノベルゲーム爆速生成方法で紹介したプログラムです

使い方とつくり方は次のページで紹介しています

「AIでノベルゲーム爆速生成方法」のページ

アドベンチャーゲーム・ミステリーゲームのプログラム

アドベンチャーゲームを秒で作る方法で紹介したプログラムです

使い方とつくり方は次のページで紹介しています

「アドベンチャーゲームを秒で作る方法」のページ

と悩んでいませんか？

この記事ではAIをつかってビジュアルノベルゲーム を即つくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームプログラムは次のリンクからダウンロードできます
>>「AIのゲームプログラムとツールの無料配布」のページ

AIで制作したビジュアルノベルゲームの紹介とつくり方の流れ

このGoogle AI Studioのサイトを使います

ノベルゲーム専用のゲームエンジンではなく、AIでゲームをつくります

ノベルゲームはティラノビルダーやRenpyなど、ビジュアルノベル作成ソフトでつくることができます

とくにRenpyは多くのユーザが使用しているソフトです

しかしビジュアルノベル作成ソフトだと使い方をおぼえるのに時間がかかります

ビジュアルノベルのプログラムをAIでつくれば、使い方をおぼえる必要がありません

また無料ですぐに作ることができるので、AIを使ったゲーム制作はとてもオススメの方法です

今回紹介するゲームサンプルコード

Youtubeとこのページで紹介しているゲームのプログラムです

位置修正ツールも配布しているのであわせて、参考にしてください

AIをつかってビジュアルノベルゲームのプログラムをつくる

ビジュアルノベルゲームのカンタンなベースプログラムをつくろう

はじめにAIプログラミングができるGoogle AI Studioのサイトに移動します

>> 「Google AI Studio」のサイト

「RUN」をクリックするとAIがHTMLプログラムを生成します

しっかりゲームが動きました

ビジュアルノベルのキャラや背景をつくろう

キャラクターを登場させるためにイラストをつくります

キャラクターが生成されましたが、帽子が派手すぎてゲームと合いません

続けてさらにいいキャラクターをつくります

今までのイラストをもとに、キャラクターをつくります

しっかりAIに伝えたとおりのキャラクターが生成できました

さらにもう一つキャラクターをつくります

生成したいイラストをAIに伝えます

同じタッチのイラストが生成できました

つづいてゲームでつかうためにキャラを分割します

>> 「My Edit」のサイト

画像をアップロードしただけで背景が透明になります

つづいて「編集ツール」からキャラを分割します

もう一キャラも同じように切りぬきます

ダウンロードした絵をさらに調整します

このサイトではPhotoShopのように細かく編集できます

なげなわツールでいらない部分を消します

つぎは魔法学園の背景をつくります

このサイトはリアルタイムで絵を生成できるサイトです

おおまかな絵からリアルなイラストをつくることができます

イラストが完成したらダウンロードします

ここまでつくった絵でプログラムをつくります

AIがプログラムをつくります

キャラがセリフに合わせて、表情が変わるようになりました

ここからはストーリー分岐やさらにストーリーをくわえます

あたらしいキャラがあらわれました

キャラの背景を透明にします

つづきのストーリーの背景をつくります

新しい素材、ストーリーをプラスすることをAIに伝えます

生成したプログラムをダウンロードします

しっかり、新しいキャラがあらわれました

しかし、大きさが少しおかしいです

ビジュアルノベルゲームのキャラ調整ツールをつくろう

キャラの位置を変えるツールをつくります

次は有名なノベルゲームツールでもかなり大変なキャラの位置調整について、

AIをつかってツールをつくり、カンタンに位置調整する方法を紹介します

ゲームファイルを読みこみます

キャラの大きさを変えた後のプログラムがあらわれます

ゲームプログラムを直接書き換えます

ゲームキャラの大きさと位置がしっかり変わりました

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

他のページでもゲーム作成を紹介しているので合わせてご覧ください

・・・と悩んでいませんか？

この記事ではAIをつかってアクションゲーム を一瞬でつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

AIでプログラムなど、生成することに特化したサイトです

今回はこのサイトでAIプログラム生成をしたいとおもいます

>> 「Google AI Studio」のサイト

Piskel：ピクセル画像のスプライトシートを分割 ＆ アニメーション

ピクセル画像のアニメーションに特化したサイトです

こまかくピクセルアニメーションのコントロールができます

>> 「Piskel」のサイト

AIで制作したゲームの紹介と流れ

今回つくるゲームがじっさいに動いてる動画です

ゲームのイメージがわかるので、ぜひ記事と一緒にごらんください

AIをつかってアクションゲームのプログラムをつくる

Google AI Studioでアクションゲームのうごきをつくる

はじめはAIコーディングがやりやすいGoogleAIStudioのサイトに移動します

「RUN」をクリックするとさっそくAIがゲームのプログラミングをつくりはじめます

AIが生成したゲームをプレイしてみよう

生成したプログラムの「敵を多くする＆敵の種類をふやす」ように変える

つぎは敵の数が少なすぎるので、増やしてゲーム画面を確認したいと思います

生成が終わったゲームをプレイすると、しっかり敵が増えたゲームになります

ボスキャラを登場させるようにAIに伝えます

生成が終わったゲームをプレイしました

AIでゲームキャラクターのアニメーションをつくる

ChatGPTのサイトにうつり、ピクセル画像のスプライトシートをつくります

スプライトシートが完成しました

つぎはこのスプライトシートの背景を透明にします

背景を透明にするために、画像の編集サイトに移動します

読み込んだと同時に背景を透明にできました

おおきさも調整します

次は透明になったスプライトシートを分割します

読み込んだスプライトシートを４つに分けます

ツールをつかってアニメーションがしっかり動くように調整します

しっかり動くようになったらダウンローダーします

画像ができたのでさっそくゲームに登場させたいと思います

Google AI Studioでプログラムをつくります

プログラム生成が終わったゲームをプレイすると、キャラクターが動くようになりました

ゲームの背景画像をつくる

つぎはゲームの背景画像をつくります

一枚の絵をさらに細かく遠くから見た感じでつくることをAIに伝えました

生成した画像をゲーム背景にすることをAIに伝えます

・背景がしっかり表示されて、ゲームっぽくなりました

つぎは敵キャラの画像をつくります

できあがりましたが、さらに自然な正面からの画像に変えたいと思います

つくった敵キャラをゲームに登場させるプログラムをつくります

プログラムにつくった画像を追加します

完成したプログラムをプレイします

まとめ

AIのプログラミングは他のページでも紹介しています、あわせてごらんください