「AIをつかったプログラミングに興味がある」
「ゲームをつくってみたい！」
・・・でも、
何からやればいいかわからない！
・・・となやんでいませんか？
こんにちは！
この記事では、AIだけでアクションゲームをつくる方法を紹介します
プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください
AIプログラミングでつくったゲームの紹介
今回つくったゲームがじっさいに動いています
今回の画面に映っているのは、ジャングルを舞台にしたクラシックな横スクロールアクションゲームです
プレイヤーが左右に移動し、3段ジャンプで敵をかわしながら進むシンプルだけど楽しめるゲームです
今回の記事の流れは、AIでゲームを一気に完成させるのではなく、
まず「微調整がすごくやりやすいゲームエディタ」をHTML1ファイルで作って、
そこからマップ作成 → 素材追加 → アニメーション → 敵AI と、少しずつ完成に近づけていくスタイルです
プログラミング未経験者でも挫折しにくい作り方です
最後まで一緒に試してみてください！
まずはゲームエディタをAIで生成する
Google AI Studioは自動でAIでプログラムをつくれるサイトです
前回と同じく、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を使い背景をカットして一つ一つキャラを分けます
キャラクターをアップロードして、
切り抜き編集ボタンをクリックします
キャラクターをアップロードすると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サイトです
１．右上の「Edit」ボタンをクリック
２．アップロードイメージで前回の背景画像を読み込む
右にドラッグするだけで背景をAIが描いてくれます
１．「Expand borders」をクリックして、画像の端をドラッグで横方向に広げる
２．広げたいサイズに調整したら「Generate」ボタンをクリック
３．生成されたら右下のダウンロードボタンで保存
元の画像のハジが暗いので、
真ん中が暗くなっていますが、しっかり画像を広げられました
拡張部分もジャングルが続き、クオリティの高い横長背景が完成しました！
プレイヤーのダッシュアタック用画像
これまでつかった画像から一枚だけのこしてカットします
プレイヤーキャラクターのダッシュモーション用に、1枚の画像を用意します
PhotoRoomで背景を透過処理し、ダッシュ中のポーズをきれいに切り抜いて保存します
ダッシュアタックにつかう画像をカットしました
これで必要な素材がすべて揃いました
最終的なプログラム修正（大幅アップデート）
これまでのプログラムをアップロードして
あたらしいプログラムをつくりなおします
Google AI Studioに戻り、前回生成したプログラムファイルをアップロードして、
一気に次の指示を伝えます
最後のプロンプト（そのままコピーして使用可能）：
2Dアクションの添付ファイルを同じくHTML1ファイルにして次のことを編集してほしい
マップエディタ部分の下にスクロールバーをつけてさらに横方向に編集できるようにして
またマップエディタ部分の下につけたスクロールバーの下に画面右にマップを拡張できるボタンをつけて
上のバージョン表記を消して
背景画像を設定できるように、背景画像の大きさは縦幅を合わせて
レイヤーを前面（地面とかプレイヤー）、背景に分けて必ずどっちも表示させて
背景の彩度をコントロールできるように
キャラクター、敵の静止画ボタンを削除して歩きから止まっている画像を使って
壊れるブロックを壊すと、敵を倒すと、爆発するようにして
爆発画像は4枚登録できるようにして
敵が出す弾のスピードは0.4秒にして、プレイヤーはHPゲージがあり10回被弾でHP0になるように
プレイヤーの攻撃を銃からダッシュアタックにして、ボタンをおすと素早く前に進みながらの攻撃で（ダッシュ距離、速度をコントロールできるように）またダッシュ中は無敵で空中でもできるように
ダッシュ画像も1枚登録できるように
生成が終わったらHTMLファイルをダウンロードして起動します
テストプレイの結果
ダウンロードしたエディタです
つくった画像ファイルを読みこんで、マップにブロックとして置いていきます
プレイヤーや敵キャラ、爆発の画像を読みこんでアニメーションとして設定します
マップ拡張ボタンをクリックしてマップを広げます
つくった画像があらわれて、マップを広げることができました
テストプレイすると、しっかりダッシュアタックできるゲームが完成しました！
テストプレイをすると、ジャングルの広いステージをダッシュで駆け抜け、
爆発を巻き起こしながら敵を倒す、本格的なアクションゲームになりました！
まとめ
このように、AIだけで、2D横スクロールアクションゲームのエディターをここまで秒で作り上げることができました
AIプログラミングの強みは「少しずつ修正しながら完成に近づけられる」点です
不具合が出てもすぐにプロンプトで直せますし、欲しい機能を追加指示するだけでどんどん進化します
これからもAIを使って、さまざまなゲーム開発に挑戦していきたいと思います！
コメント