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

「奥行きのある2Dゲームやベルトスクロールアクションを作ってみたい！」

・・・でも、何からやればいいかわからない！

となやんでいませんか？

こんにちは！

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

今回はゲーム制作の第一歩として、ゲームの背景となる3Dボクセルを作成していく手順を解説します。プログラミング未経験の方でもスムーズに進められる内容になっているので、ぜひ一緒にチャレンジしてみてください！

※動画でも実際の作業風景を紹介していますので、あわせてご覧ください

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

まずはGoogle AI Studioで背景用のプログラムを作成

さっそくAIを使って、ゲームの土台となるプログラムをつくります！

プログラムを生成しやすい「Google AI Studio」のサイトに移動します。

まずは、背景用の3Dボクセルを配置・編集するためのプログラムをAIに生成してもらいましょう。

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

これで背景エディタの土台ができました。さっそく実行したいところですが……貼り付けるための「背景用の画像」がまだありません。

次は画像生成AIを使って、背景の素材を作っていきます。

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

背景用の画像は、以下の2つを組み合わせて生成します。

1. パワーポイントで作った大まかなイメージ図
2. AIへのテキストの命令文（プロンプト）

今回はAIに以下のような指示を追加して生成を実行します。

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

生成を実行すると、しっかりとした建物の正面画像が完成しました！

この完成した画像を、先ほどのプログラムで作った「3Dキューブ（ボクセル）」の表面に貼り付けて、立体的な背景を作っていきます。

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

それでは、ダウンロードしたプログラムを実行してみましょう！

まずは、ゲームの背景として違和感が出ないように、3Dボクセルの大きさをしっかりと調整します

次に、以下の手順で作業を進めます

1. 先ほど生成した「建物の画像」をプログラムに読み込みます。
2. 読み込んだ画像を、3Dボクセル用のテクスチャ（表面の絵）として指定します。
3. エディタを「ボクセル配置モード」に切り替えます。
4. 画面上にクリックしてボクセルを置いてみます。

すると……！

しっかり、先ほどAIでつくった建物の画像が3Dのブロックとなって画面にあらわれました。

アクション部分のプログラムを作成する

続いては、いよいよゲームの核となる「アクション部分」のプログラムを作っていきます！

2Dベルトスクロールアクションならではの特徴（奥行きへの移動や攻撃の挙動など）をしっかりと盛り込んだ指示（プロンプト）を作成し、AIにメッセージを送信します。

次のとおりAIにメッセージを伝えます

\HTML1ファイル
\2D横スクロールベルトロールアクション
\テストプレイボタンでプレイできる
\マップビューではクリックで敵キャラ、プレイヤー開始位置を置くことができ、クリックで消すことができる
\マップビューでプレイヤーが歩ける場所はピンクで表示されている
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとキャラ配置モードで切り替えられるように
\新規敵キャラをつくることができ、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、を敵ごとに割り当てられる
\プレイヤータブでは、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、待機1コマを敵ごとに割り当てられる
\ゲーム基本設定タブでは、カメラ位置を角度、高さプレイヤーからの距離を調整できる
\メニューはタブで、「画像読み込み」、「敵キャラ」、「プレイヤー」「ゲーム基本設定」がある
\カメラは手前・奥には動かない、プレイヤーもカメラ手前以上は手前に移動できない

数秒待つと……無事にプログラムの生成が終わりました！

さっそく動かしてプレイしたいところですが、肝心の「キャラクターの絵」がまだありません。そこで次は、キャラクターの画像を作っていきます。

Geminiを使って主人公の2Dスプライトシートを作成

今回は画像生成AI（Gemini）を使って、ゲーム用の「2Dスプライトシート（キャラクターのアニメーション用画像セット）」を作るための命令文を書いていきます。

デザインが野暮ったくならないように、キャラクターの見た目の特徴やテイストをしっかりと指定してGeminiにメッセージを送信します

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

//スーパーファミコンの2D横スクロールゲームのドット絵
//サイドビューのみ、他方向は不要
//RPGのペルソナの登場キャラ風、ちょい悪のギャング風、サングラスはかけていない、服は白、
//待機モーション（3コマ）
//歩き
//予備動作→パンチ(2コマ)
//予備動作→ミドルキック(3コマ)
//ジャンプキック(1コマ)
//ジャンプ中(1コマ)
//予備動作→膝蹴り(2コマ)
//つかみ→背負い投げ(3コマ)※必ず別のキャラはつけない、顔は２つにならない
//ダメージを受けて構えポーズのままのけぞっている(地上に足がついている)
//ダメージを受けてのけぞっている
//上記のモーション
//画面上には相手のキャラや別のキャラクターは出さない
//線などのエフェクトはつけない
//各モーションに対応するフレームがあること
//SD２頭身キャラ！
//純白背景

すると、すぐに立派なスプライトシートができあがりました！

……が、少し悪役っぽい雰囲気になってしまったので、主人公らしくなるようにプロンプトを微調整します。

何度か調整を重ねることで、しっかりと主人公キャラクターが仕上がりました！

敵キャラクターの生成とダメージパターンの修正

主人公が完成したら、次は敵キャラを作っていきたいと思います

ゲーム画面で区別がつきやすいように、主人公と見た目や特徴がかぶらないキャラクターを指定して生成を実行します

こちらもベースとなるスプライトシートはしっかり生成できました！

ただ、よく確認すると「ダメージを受けた時のアニメーションパターン」で少し不足している部分があったため、その部分だけ追加で修正を行います

微調整が終われば、敵キャラクターもバッチリ完成です！

2体目となる新しい敵キャラクターを作成！

ゲームをさらに盛り上げるため、続いてもう一体の敵キャラクターを作っていきます。

これまでに作成した主人公や1体目の敵キャラクターと見た目や役割がかぶらないように、しっかりと特徴を分けたメッセージ（プロンプト）を作成し、AIに送信します。

しばらくしてベースとなるスプライトシートが無事に生成されました！

……が、全体的にのっぺりとしていてメリハリがない印象になってしまいました。ゲームの背景に埋もれてしまわないように、キャラクターの「色」を中心にプロンプトを調整し、パキッとしたメリハリがつくように修正の指示を出します。

この色の調整が上手くはまり、2体目の敵キャラクターのスプライトシートもしっかりと完成しました！

アニメーション用に画像を分割！……しかし問題が

キャラクターの画像が出揃ったところで、次はゲーム内でパラパラ漫画のように動かすため、スプライトシートを1コマずつアニメーション用に分割していく作業に入ります。

しかし、ここで一つ問題が発生します。今回はアクションゲームということもありパターンの量がかなり多く、これまで使っていた画像切り抜きツール（Photoroomなど）を使って手作業で処理していくと、どうしても時間がかかりすぎてしまいます。

「それなら、自分の作業に特化した便利なツールを自分で作ってしまおう！」ということで、急遽オリジナルの画像分割ツールを作ることにしました。

Google AI Studioで「キャラ分割ツール」を自作！

再びGoogle AI Studioを開き、AIに「キャラクター分割ツール」を作るための要望を伝えていきます。

今回の分割作業を劇的に効率化するため、背景をサクッと透明にできる「マジック消しゴム機能」と、直感的に画像を切り分けられる「分割線の機能」をツールに組み込むようメッセージを書き、AIに送信します。

数秒後……あっという間にオリジナルツールのプログラムが完成しました！

さっそく完成したツールを立ち上げ、先ほどのキャラクター画像を読み込みます。画面上でクリックしながら分割線をポンポンと置いていき、画像を切り抜くための枠（ワク）を作って分割していきます。自作ツールのおかげで、面倒だった分割作業もサクサクと快適に進められるようになりました！

マジック消しゴムで背景を透過＆画像のダウンロード！

自作の分割ツールで画像を切り抜く枠を作りましたが、このままでは画像の背景が白色のまま残ってしまいます。そこで、ツールに組み込んでおいた「マジック消しゴム機能」の出番です！

ポチッと処理をかけると、しっかりと背景が透過（透明に）されました。あとは必要なキャラクターの画像だけを選択して、サクッとダウンロードします。

主人公と同じ手順で、敵キャラクターの画像も枠でくくって分割し、ダウンロードしていきます。一回の分割作業で取り切れなかった「歩き」のアニメーション画像も、再度しっかりと切り分けておきます。

これで、キャラクターを動かすためのアニメーション画像の準備はバッチリ完了です！

エディタに画像を読み込んでアニメーションを設定

素材の準備がすべて整ったので、いよいよ最初の方で作った「アクション部分のプログラム（エディタ）」を使って、テストプレイに向けて組み込んでいきたいと思います。

1. 画像の読み込み: 先ほど透過・分割したキャラクターの画像をエディタに読み込ませます。
2. プレイヤーの設定: 読み込んだ画像を、プレイヤーの「待機」「歩き」「攻撃」「ダメージ」などの各アニメーションに割り当てていきます。
3. 敵キャラの設定: 続いて敵キャラクターにも同じようにアニメーションを割り当てていきます。

……と、ここで一つ問題を発見しました。敵の「歩き」アニメーションがなぜか2コマしか設定できない状態になっています。これはプログラムのバグのようですが、まずはゲームとして動かすことを優先し、次のステップでまとめて修正することにします。

一通り準備ができたので、いざテストプレイ！

テストプレイで発覚したバグをAIで一気に修正！

実際に動かしてみると、一応キャラクターを操作して動かすことはできました。しかし、いくつか致命的な不具合（バグ）が発生してしまいました。

• 立体感がない: キャラクターが背景の奥行きになじまず、まるで手前の平面ガラスに張り付いたような見え方になっている。
• 敵が動かない: 配置した敵キャラクターが棒立ちのまま、まったく動いてくれない。
• 向きが変わらない: プレイヤーを左右に移動させても、キャラクターのグラフィックが方向転換（左右反転）しない。

せっかくの2Dベルトスクロールアクションなので、これではゲームとして成り立ちません。しっかりと想定通りに動作するように、AIにプログラムの修正をお願いしたいと思います。

上記の発生している不具合を直すためのメッセージを作成します。さらに、キャラクターの絵が拡大されてボヤケてしまう問題を防ぐため、ドット絵をくっきりと表示させる「ニアレストネイバー補間」をプログラムに適用してほしいという指示もしっかりと盛り込み、AIに送信します。

数秒後……無事に修正版のプログラムが完成しました！

バグが直っているかどうか、もう一度テストプレイで確認してみたいと思います！

エディタに画像を再読み込み！ジャンプアクションも追加

AIにプログラムを修正してもらったので、改めて画像を読み込み、キャラクターにアニメーションを割り当てていきます。

今回は待機や攻撃といった基本の動きに加えて、アクションゲームに欠かせない「ジャンプ」のモーションも新たに追加しました！

続いて、敵キャラクターにもアニメーションを設定していきます。

先ほど発生していた「歩きアニメーションが2コマしか設定できない」というバグも無事に修正されており、しっかりと4枚の画像を使って滑らかな歩きアニメーションを作れるようになりました。

これでキャラクターを動かす準備は完璧です。さっそく、修正版のエディタでテストプレイをしてみます！

テストプレイ成功！……しかし、まだ物足りない？

実際に動かしてみると……今度はキャラクターがしっかりと背景になじみ、方向転換もバッチリです！敵キャラクターも、プレイヤーを認識してしっかりとこちらに向かって歩いてくるようになりました。

基本的な動作としては大成功です！……が、実際にプレイしてみると、カメラの視点がまだ遠く、キャラクターの動きや手触り（ゲームフィール）もイマイチな印象を受けます。

そこで、ここまで別々に作ってきたシステムを統合し、一気に本格的なゲームへと仕上げていくことにしました！

3D背景とアクションのプログラムをドッキング！

ここで、この記事の最初で作った「3Dボクセルの背景プログラム」と、現在いじっている「2Dアクションのプログラム」の2つを合体させます！

再びGoogle AI Studioを開き、これら2つのプログラムファイルを同時にアップロードします。ただ単に合体させるだけではなく、アクションゲームとしての完成度を高めるために、以下の要素を盛り込んだメッセージを作成します。

• 2つのプログラムの機能を完全に合体（ドッキング）させること
• 攻撃が当たった時の爽快感を生む「ヒットストップ（攻撃ヒット時に一瞬画面が止まる演出）」を追加すること
• 攻撃やダメージが正確に処理されるように「当たり判定」をしっかりと組み込むこと

これらのアクションゲームにおいて非常に重要な要望をプロンプトに詰め込み、AIに送信します！

プレイ開始

2つの全く異なるプログラムの統合という複雑なお願いでしたが、処理が終わるのを待つと……見事に合体版のプログラムが完成しました！

3Dの立体的な背景と、2Dのキャラクターアクションが一つになり、さらにヒットストップなどの「ゲームらしい手触り」が加わった究極のエディタ。さっそくこの完成したプログラムを読み込んで、実際にプレイしてみたいと思います！

ごめんなさい、私の認識不足でした！ブログ用のテキストとして、箇条書き記号などを使わずにすべて普通の文章として書き出すべきでしたね。ご指摘ありがとうございます。

箇条書き部分を自然な文章（テキスト）に修正して、先ほどのブログ記事の続きを書き直しました。こちらでいかがでしょうか。

エディタで背景を構築！立体的な街並みを作る

統合プログラムが完成し、いよいよこの究極のエディタを使ってゲームの舞台を組み立てていきます！

まずは背景の作成からです。建物の画像を読み込み、テクスチャとして使いたい範囲を切り抜くように指定します。次にボクセルの大きさを決めて、マップ上にポチッと配置します。続いて、隣にも新しいボクセルを置き、次の画像範囲を指定して貼り付ける……この作業を繰り返し、隙間なくボクセルを並べて背景となる建物の列を完成させます。

地面を敷き詰めて「夜の街」を完成させる

建物が並んだら、次はキャラクターたちが歩き回る「地面」を作ります。

新しく用意した地面用の画像を読み込んで範囲指定し、エディタを「床のテクスチャ貼りモード」に切り替えます。そして、足元のマップに向かって一気にテクスチャを張り込んでいきます！立体的な建物と地面が組み合わさることで、雰囲気たっぷりの「夜の街中」のステージができあがりました！

キャラクターのアニメーションをさらに強化！

舞台が整ったところで、キャラクターたちに命を吹き込んでいきます。キャラクター画像を読み込み、まずはプレイヤーに待機や歩きのアニメーションを割り当てます。さらに今回は、アクションの爽快感を高めるために「コンビネーション攻撃」のモーションも新しく追加しました！

続いて、敵キャラクターの設定です。まず1体目の敵には、基本の動きに加えて、新しく作った鋭い「ダッシュ攻撃」のアニメーションを割り当てます。次にエディタへ2体目の敵を追加し、同様にアニメーションを設定します。さらに3体目の敵を追加し、今度はプレイヤーの脅威となる「連続攻撃」のアニメーションを持たせます。そして最後に、ダメ押しの4体目をマップに追加して設定はすべて完了です。

これで、個性豊かな敵キャラクターたちの準備もしっかりと整いました。

2Dゲームらしい「カメラ視点」と「キャラ配置」

ゲームとしての見栄えと遊びやすさを両立させるため、カメラの視点（アングル）を調整します。カメラの高さ、見下ろす角度、そしてプレイヤーからの距離を細かく微調整していくと……3D空間でありながら、しっかりと「2Dアクションゲームっぽい視点」を作ることができました！

最後にキャラクターをマップに配置します。ベルトスクロールアクションの王道といえば「左から右へと進んでいく」スタイルなので、セオリー通りにプレイヤーを画面の左側に、そして立ち塞がる敵キャラクターたちを右側に配置していきます。

いざテストプレイ！ベルトスクロールの基礎が完成

すべての準備が整いました。いざ、テストプレイ開始です！

実際に動かしてみると……しっかりとアクションゲームとして動くものが完成しました！プレイヤーのコンボ攻撃も決まり、敵キャラクターたちもそれぞれのアクションでしっかりと襲ってきます。実際にプレイしてみると、敵が少し一直線にこちらに向かってきすぎるかなというAIの移動ルーチンに関する新たな課題も見つかりましたが、2Dベルトスクロールアクションとしての基本の動きとシステムは、これで見事に完成です！

今回はひとまずここまでとします。ベースとなるシステムはしっかりと出来上がったので、さらに別の動画（記事）にて、敵の動きの改善や演出の強化などを行い、ゲーム全体の完成度をさらに高めていきたいと思います。

と悩んでいませんか？

このページでは、無料で、だれでも始められる方法でゲームのつくり方を紹介しています

今回は、2Dアクションゲームのステージと背景の絵を、つくる方法を紹介します

ぜひ、チャレンジしてください

次の目次の流れにそって、紹介します

また、このページはシリーズですので、

前回のページから、ぜひご覧ください

・Unityとは何？ゲームをつくることができるの？

Unityとはゲームをつくるためのソフトです

無料です

しかし、世界中で趣味のゲームから一流のゲームまで使われています

Unityで作られたゲームを紹介します

・Unityはどうすれば始められるの？

Unityをはじめるためには、インストールする必要があります

Unityを始めるためには、プログラムをインストールする必要があります

インストールプログラムは、公式サイトからダウンロードできます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法のページ＞
https://illust55.com/2018/

次は、2Dアクションゲームで、

ステージと背景の絵をつくる方法を紹介します

・2Dアクションゲームのマップをつくろう

今回、紹介するゲームつくりです

左のゲームマップを右のゲームマップに変えます

はじめに、 ゲーム部品のダウンロードの準備をします

公式のサイトにアクセスしてください

背景の絵をダウンロードする準備をします

自分のアカウントに追加します

ゲームの草や地面などの部品です

自分のアカウントに追加します

アクションゲームの部品です

自分のアカウントに追加します

・ゲームの部品をダウンロードする準備をしよう

Unityを起動してください

2Dのゲームをつくります

ゲーム部品のウィンドウを表示します

Unityに用意されているゲームの部品を表示します

キャラクターをつねにゲーム画面に表示させる、部品です

自分のゲーム部品を表示します

ゲームの部品が多い時は、すべて表示されません

アクションゲームの部品をダウンロードしてください

ダウンロードした、部品をゲーム内に取り込みます

ゲームマップの部品をダウンロードします

ダウンロードした、部品をゲーム内に取り込みます

背景の絵をダウンロードします

ダウンロードした、部品をゲーム内に取り込みます

サンプルのゲームを表示します

プレイヤー以外は、つかわないので、消してください

「Delete」キーで消すことができます

ゲーム画面に絵をおく準備をします

地面のパーツが現れます

絵をおくためのマス目のオブジェクトをつくります

ドラッグ＆ドロップで、絵をおくことができます

今回は、このようにつくりました

絵が重なるときは、「 Order Layer 」の数を変えてください

マップを今回は、このようにつくりました

背景を画面におきます

空のパーツをおきます

大きさを画面に合わせてください

地面の絵にキャラクターが立てるようにします

プレイヤーが立つための土台を、自由につくれるパーツです

カドをドラッグすると形を変えることができます

緑のラインの上をクリックすると、新しいカドが現れます

今回は、このような形につくりました

・プレイヤーをつねに映すゲーム画面をつくろう

カメラをつくります

カメラをおいかけるパーツです

プレイヤーを追うようにしました

カメラと背景が、同時に動くようにつくります

カメラの動きに合わせるようにつくりました

・テストプレイで確認しよう

テストプレイをして、つくりを確認してください

左は、前回紹介しましたプレイヤーを変える方法と、今回を合わせた画面です

右は、「Alien Tile Set」のパーツをおいた画面です

多くのきれいなパーツがあるので、ぜひ試してください

・まとめ

今回は「Unity」の2Dアクションゲームでマップをつくる方法とカメラのつくり方を紹介しました

このブログでは、他のページでもゲームつくりを紹介しています

ぜひ、合わせてご覧いただき、チャレンジを続けてください

他のゲームつくりのページを紹介します

ぜひ、合わせてご覧ください

ここまで、ご覧いただきまして、ありがとうございました