AIプログラミング初心者向け!2Dベルトロールアクションゲームを秒で作る方法

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

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

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

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

>> 「Google AI Studio」のサイト

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

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

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

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

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

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

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

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

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

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

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

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

はじめに、ゲーム背景として違和感が出ないように、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でキャラ分割ツールをつくる

キャラ画像がつくり終わったので、次はキャラ画像をアニメーション用に分割します

パターン数が多いため、画像の分割ツールを自作します

次のとおり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）でくっきりと描画する処理を入れてほしい

プログラムが完成したので、さっそくダウンロードしてプレイします

できあがったプログラムを実行すると、キャラが動き、画像がハッキリあらわれるようになりました

修正版のエディタでもう一度テストプレイをします

キャラクターが背景になじみ、向きも変わり、敵もこちらへ向かって歩くようになりました

次は、3D背景のプログラムと2Dアクションのプログラムを合体させます

次のとおりにAIに伝えます

2つのソースを足してベルトロールアクションゲームエディタを作成 絶対に現在の機能を勝手に削除しないように※特にアニメーションは削除に注意すること

タブ、マップビューの基本構成は同じなので足してつくるように一つのタブも削除しないように

視点操作モード、アイテム配置モード、キャラ配置モードがあること

プレイ視点設定（カメラ）は回転、高さ（Y）、距離（X）の３つが必ずそれぞれ動き、設定値を変更した瞬間に編集中のマップビューの視点を上書きして反映すること、高さの設定ではカメラを水平移動させて絶対にカメラを主人公中心に回転させないように、回転の設定値のみカメラを回転させることができる、

time of dayは昼、夕暮れ、夜、朝日の間は分単位で細かく遷移すること

マップビューでは、テストプレイ前はプレイヤーが移動できる範囲に必ずピンクの移動範囲を色で示したものがあり、テストプレイ時には消えるが移動範囲外には移動できない

すべての攻撃は1コマ目が予備動作で2コマ目が攻撃なので、2コマ目以降でないと攻撃判定はない

主人公はコンビネーション攻撃ができる攻撃１→（当たったら）攻撃２のアニメーションがそれぞれ2コマで登録できるように

主人公はジャンプ中に攻撃ボタンを押すと出せるジャンプ攻撃ができる、アニメーションは1コマ

敵はHPが調整できるように
敵は特殊攻撃がそれぞれチェックボックスで登録できるように、連続攻撃（攻撃1→（当たってなくても）攻撃２→（当たってなくても）攻撃３）→敵が大きく後ろにさがる、ダッシュ移動攻撃（ダッシュアッパー）、それぞれ振りかぶりから攻撃発生の2コマが設定できるように

ボクセル配置モードではボクセル、地面テクスチャ、 アイテムタブを新しくつくる アイテムタブではボクセル配置、ボクセル削除、地面テクスチャ貼り、を選べる
アイテムタブから配置できるものは、それぞれ全て配置する時にその大きさの目安が表示される アイテムタブでは地面に貼るテクスチャを切り替えられる

地面に貼るテクスチャは上書きできる 地面に貼るテクスチャの画像はボクセル用に読み込んだ画像を貼り付けられる、貼り付けられる画像は複数登録できる

地面をドラッグでテクスチャをグリッドごとに張ることができる、貼れる場所はプレイヤーが歩けない場所など全ての地面に貼ることができる
ボクセルには当たり判定があり、貫通することや昇ることはできない
ボクセルの配置はグリッドにそって置くことができる、ボクセルは地上にしか配置できないボクセルの明るさMAXではエミットやグローのようにとても明るくなること

すべての攻撃はそれぞれ速さと攻撃する時に進む距離、相手がダメージを受けた時に下がる距離を設定できるように

全ての攻撃と当たり判定は絵の範囲になる、このため透過している部分は攻撃をくらわない 敵にダメージを連続で与えられるため、敵に無敵時間は存在しない
プレイヤーも敵も攻撃があたると待機モーション→くらいモーションになり少しくらいモーションの時震える、またプレイヤーと相手ともにヒットストップがかかり、ヒットストップの瞬間はゲーム全体が少し遅くなる

設定タブからはCPUの強さ、特殊攻撃の頻度を選択できるように

AIがつくったプログラムを実行します

立体的な背景とアクションが一つになった合体版のプログラムが完成しました

これまでつくった画像を読みこみ、マップに背景になる3Dボクセルから置いていきます

次に地面の画像を読み込みます

床用のモードに切り替えて、足元のマップに画像を敷き詰めます

これでゲームのステージができました

マップ始まりにプレイヤーを置き、右側に敵を配置します

遊びやすいようにカメラの高さや角度を微調整して、2Dアクションらしい視点を作ります

すべての準備が整い、テストプレイを始めます

プレイヤーの連続攻撃もしっかり決まり、敵も攻撃してくるようになりました

敵が一直線に向かってきすぎるという部分もありますが、基本のシステムは完成しました

あ