「AIをつかったプログラミングに興味がある」
「奥行きのある2Dゲームやベルトスクロールアクションを作ってみたい！」
・・・でも、何からやればいいかわからない！
となやんでいませんか？
こんにちは！
この記事では、AIを使った「2.5D横スクロールアクションゲーム（ベルトスクロールアクション）」の作り方を紹介します。
今回はゲーム制作の第一歩として、ゲームの背景となる3Dボクセルを作成していく手順を解説します。プログラミング未経験の方でもスムーズに進められる内容になっているので、ぜひ一緒にチャレンジしてみてください！
※動画でも実際の作業風景を紹介していますので、あわせてご覧ください。
まずはGoogle AI Studioで背景用のプログラムを作成
さっそくAIを使って、ゲームの土台となるプログラムをつくります！
プログラムを生成しやすい「Google AI Studio」のサイトに移動します。
まずは、背景用の3Dボクセルを配置・編集するためのプログラムをAIに生成してもらいましょう。
AIがプログラムの生成を完了したら、ファイルをダウンロードしておきます。
これで背景エディタの土台ができました。さっそく実行したいところですが……貼り付けるための「背景用の画像」がまだありません。
次は画像生成AIを使って、背景の素材を作っていきます。
背景用の建物の画像をAIで生成する
背景用の画像は、以下の2つを組み合わせて生成します。
- パワーポイントで作った大まかなイメージ図
- AIへのテキストの命令文（プロンプト）
今回はAIに以下のような指示を追加して生成を実行します。
\HTML1ファイル
\ボクセルエディタ
\ボクセルに添付ファイルのような画像を読み込みテクスチャーとして貼り付けられる
\マップビューではクリックでボクセルをマップに何個でも置くことができ、ボクセルクリックで消すことができる
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとボクセル配置モードで切り替えられるように
\画像ドラッグ添付ファイルの画像を矩形選択で画像を部分選択してボクセルに貼れる
\画像をドラッグして矩形選択する時に展開する画像は全体表示されるように
\メニューはタブで、「ボクセルの画像選択」、「ボクセルの調整」、「空の調整」がある
\ボクセル配置はグリッド線にスナップするため、グリッド線にそってしか置くことができない
\空の調整はタイムオブデイ・システムで
\ボクセルの調整タブではボクセルの高さ幅、明るさを調整できる
生成を実行すると、しっかりとした建物の正面画像が完成しました！
この完成した画像を、先ほどのプログラムで作った「3Dキューブ（ボクセル）」の表面に貼り付けて、立体的な背景を作っていきます。
プログラムを実行して3D背景を組み立てる
それでは、ダウンロードしたプログラムを実行してみましょう！
まずは、ゲームの背景として違和感が出ないように、3Dボクセルの大きさをしっかりと調整します。
次に、以下の手順で作業を進めます。
- 先ほど生成した「建物の画像」をプログラムに読み込みます。
- 読み込んだ画像を、3Dボクセル用のテクスチャ（表面の絵）として指定します。
- エディタを「ボクセル配置モード」に切り替えます。
- 画面上にクリックしてボクセルを置いてみます。
すると……！
しっかり、先ほどAIでつくった建物の画像が3Dのブロックとなって画面にあらわれました。
視点を調整してゲームらしい背景に仕上げる
配置した3Dボクセルを、実際のゲームの背景のように横に長く並べてみます。
そしてここからが重要です！
カメラの角度を調整して、ベルトスクロールアクションらしい「斜め見下ろし」のような、ゲームっぽい視点に合わせてみます。
どうでしょうか？
ただの四角いブロックの集まりが、立派な2.5Dアクションゲームの背景みたいになったのではないでしょうか！
今回はここまでで、背景のメイン部分の作成が完了です。
キャラクターが歩く「地面」の部分については、のちほど作成していきます。
次回のステップも楽しみにしていてくださいね！
コメント