今回はAIを使って、これまで作ったゲームをさらに進化させていきます
新しくゼロからゲームを作るのではなく、これまでAIで作ったプログラムを読み込ませて、新しい機能を追加していきます
今回作るのは、ノベルゲームとアクションゲームです
まずノベルゲームでは、部屋の移動に3Dダンジョンを追加します
これまでは普通に画面を切り替えて移動していましたが、今回は一人称視点で3D空間を歩けるようにします
最初にGoogle AI Studioを開き、一人称視点の3D迷路を作ってもらいます
次のことをAIにつたえます
AIにはHTML1ファイルで動くこと、キーボードで移動できること、最初はワイヤーフレームで作ることを伝えます
以下の仕様で主観視点3DマップをHTML1ファイルで生成すること
//キーボードで移動できること
//ワイヤーフレームでつくること
//テクスチャーメニューで壁にテクスチャを貼ることが可能いきなり完成したゲームを作ろうとすると、どこに問題があるのか分かりにくくなります
そこで最初はワイヤーフレームだけのシンプルな3D迷路を作ります
AIにメッセージを入力すると、すぐにプログラムの作成が始まります
完成したHTMLファイルを実行してみると、一人称視点で移動できる3D迷路が表示されました
壁や通路はシンプルですが、キーボードを使って迷路の中を移動できます
これで3D部分の基本となるプログラムができました
次は、この3D迷路をこれまで作ってきたノベルゲームエディタに組み込みます
ノベルゲームのプログラムと3D迷路のプログラムをAIに読み込ませます
そして、ノベルゲームから3Dダンジョンへ移動できるようにすること、3Dダンジョンの形を編集できるようにすることを伝えます
AIが2つのプログラムを確認し、新しいプログラムを作ってくれます
ノベルゲームに全ストーリーAI出力の左となりに3Dダンジョン編集メニューを追加すること
ノベルゲームに全ストーリーAI出力の左となりに3Dダンジョン編集メニューを追加すること
//3Dダンジョン編集ではシーンプレビューで実際に移動できること
//3Dダンジョン編集ではシーンプレビューがつくった3Dダンジョンに切り替わること
//現在のメニュー真ん中が切り替わり、3Dダンジョンを2Dブロックでつくれること
//現在あるゲームの機能は絶対に削除しないこと今回は2つのファイルを1つにまとめて出力されたため、メモ帳などを使ってそれぞれのファイルに分割して保存します
保存したファイルを実行すると、これまでのノベルゲームエディタに3Dダンジョンの機能が追加されました
さらに中央に表示されたブロックを組み替えることで、3Dダンジョンの形も編集できます
これならプログラムを直接書き換えなくても、ゲームに合わせて通路や部屋を作ることができます
ただし、この状態ではまだワイヤーフレームに近く、ノベルゲームの舞台としては少し寂しく見えます
そこで次は、壁や床、天井に画像を貼り、3Dダンジョンを洋館のような雰囲気に変えていきます
次は3Dダンジョンに画像を貼り、洋館のような雰囲気に変えていきます
現在の3Dダンジョンは移動やマップの編集はできますが、壁などの見た目はとてもシンプルです
そこで壁や床などに好きな画像を登録できる機能を追加します
Google AI Studioにプログラムを読み込ませ、3Dダンジョンの壁や床、天井にテクスチャを登録できるようにしてほしいと伝えます
以下の通りファイルを改修すること
//コマンドの追加の実行する内容で3Dダンジョンに移動を追加
//3Dダンジョン編集ウィンドウで「高さ」の隣にシーンの出入口の設定ボタンを追加
//3Dダンジョン編集ウィンドウで、天井、壁、床のテクスチャ読み込みボタンをつけること、テクスチャの読み込みは画像タブの画像から読み込むことができること
//人物タブで各表情に画像が表示されること
//背景画像をよみこんでいなくても、画像タブで左右の位置ボタンをクリックした時にその画像が表示されること
//機能は絶対に削除しないこと
テクスチャとは3Dの壁などに貼り付ける画像のことです
プログラムが完成したら、次は実際に使用する画像を用意します
今回はChatGPTを使って洋館風の画像を作ります
まずは壁の画像です
3Dダンジョンの壁に使うため、洋館の壁を真横から見た画像になるように伝えます
普通のイラストでは斜めから見た画像になることがありますが、壁に貼り付けるため、できるだけ正面から見た画像にすることがポイントです
以下の条件で画像を生成すること
//3Dダンジョンの壁にテクスチャとして使用する
//真横から見た画像
//洋館の壁
//比率は正方形であること
これで洋館らしい壁の画像ができました
続いて天井を作ります
天井の場合は下から見上げた画像になるようにChatGPTへ伝えます
以下の条件で画像を生成すること
//3Dダンジョンの天井にテクスチャとして使用する
//真下から見た画像
//洋館の天井
//比率は正方形であること最後に床を作ります
こちらは反対に、床を真上から見た画像になるように伝えます
以下の条件で画像を生成すること
//3Dダンジョンの床にテクスチャとして使用する
//真上から見た画像
//洋館の床
//比率は正方形であることこれで壁、天井、床の3種類の画像がそろいました
作った画像を3Dダンジョンに読み込み、それぞれの場所へ設定します
すると、シンプルだった3Dダンジョンが洋館のような見た目に変わりました
同じ3Dマップでもテクスチャを変えるだけで、かなり雰囲気が変わります
さらにノベルゲームで使用するキャラクター画像も読み込みます
キャラクターごとに画像を設定し、画面に表示する位置や大きさを調整します
ストーリーについても、すべて自分で考える必要はありません
今回のノベルゲームエディタには、AI用のストーリーを作るための機能を用意しています
この機能を使ってAIにストーリーを考えてもらい、ゲームへ設定します
これでキャラクター、ストーリー、3Dダンジョンがそろいました
実際にゲームを動かしてみると、ストーリーの途中から3Dダンジョンへ入れるようになっています
ワイヤーフレームだったときと比べると、洋館らしい雰囲気もかなり出てきました
しかし、このままでは3Dダンジョンに入ったあと、別の場所へ移動するための出口がありません
そこで次は3Dダンジョンに出口を追加して、出口に入ると別の部屋へ移動し、ストーリーの続きを進められるようにします
次は3Dダンジョンに出口を追加していきます
現在の状態でも3Dダンジョンの中を自由に移動できますが、出口がないため、その先へ進むことができません
そこでGoogle AI Studioにプログラムを読み込ませ、3Dダンジョンに出口を追加してほしいと伝えます
以下の通り改修すること
//「出入口設定」ボタンをクリックした後のXY設定をマップで選択ボタンにすること、マップで選択された場所は2Dマップ上で赤表示になること、マップ選択ボタンで2Dマップをクリック後は出入口の向きを設定できてその向きのマスにプレイヤーは出る、入る時はその方向から入るとシーン移動する
//出入口設定ウィンドウでは出入口の壁テクスチャを選択できるように
//設定済みの出入口をクリックすると再度場所を選ぶことができる、ただ現在のゴミ箱マークは消さないし、ゴミ箱クリックで削除できる機能はそのままにすること
//入口から入った後のシーン移動後はそのシーンのイベント一覧に従いイベントが実行されるように
出口に入ると別の部屋へ移動し、そのままストーリーの続きを進められるようにします
プログラムが完成したら、次は出口に使う画像を用意します
今回は洋館の雰囲気に合わせて、ChatGPTで扉の画像を作ります
最初に作った画像は少し小さく見えたため、より存在感が出るように両開きの大きな扉へ変更しました
ゲーム素材として使うため、できるだけ正面から見た画像になるように作ります
以下の条件で画像を生成すること
//3Dダンジョンのとびらにテクスチャとして使用する
//真横から見た画像
//洋館の扉
//比率は正方形であることこれで出口用の画像も完成しました
さっそくプログラムを実行して、扉の画像を読み込みます
3Dダンジョンの出口に扉を設定し、ストーリーも準備します
ゲームを最初から実行してみます
ストーリーを進めていくと、途中から3Dダンジョンへ移動します
ダンジョンの中を進むと、先ほど設定した出口の扉が見えてきます
その扉まで移動すると、しっかり別の部屋へ移動できました
さらに移動したあと、そのままストーリーの続きを進めることもできます
これでノベルゲームの中に、実際に自分で歩いて探索できる3Dダンジョンを組み込むことができました
普通に背景を切り替えて部屋を移動するだけの場合と比べると、ゲームらしい演出がかなり強くなります
また、今回の方法ならダンジョンの形やテクスチャを変えることで、洋館以外の場所も作ることができます
例えば地下迷宮、研究施設、宇宙船、学校など、画像を変えるだけでも違った雰囲気を作れます
ここまででノベルゲーム側の大きな追加機能は完成です
続いては、これまで作ってきたアクションゲームを改良していきます
今回は新しく海とマグマのステージを追加します
最初に海のステージから作ります
いきなりゲーム本体を変更するのではなく、まずは海だけを表示する簡単なプログラムをAIに作ってもらいます
Google AI StudioにHTML1ファイルで動くことを伝え、海の波や水面の動きが分かる風景を作ってもらいます
HTML1ファイルで以下の3Dワールドを生成すること
//海岸
//波と地面は分かれておらず自然の砂浜のように砂浜の上にも波は打ち寄せている
//波が打ち寄せる幅は調整できる
//unrealengineの3Dビュー画面のようにwasdqeとマウス左ドラッグで視点の移動をおこない、自由にマップをみることができる
プログラムが完成したら実行してみます
すると画面全体に海が表示され、波が動いているような風景ができました
このように最初に背景だけを別のプログラムとして作っておくと、イメージを確認してからゲーム本体へ組み込むことができます
次は同じ方法でマグマのステージも作っていきます
次はマグマのステージを作っていきます
海のステージと同じように、まずはマグマの風景だけを表示するプログラムをAIに作ってもらいます
Google AI StudioにHTML1ファイルで動くことや、マグマらしい動きや雰囲気を入れることを伝えます
HTML1ファイルで以下の3Dワールドを生成すること
//地獄の海岸、赤黒い浜辺のような足場の場所と海のマグマ
//黒い大きな岩の山が何個かある
//unrealengineの3Dビュー画面のようにwasdqeとマウス左ドラッグで視点の移動をおこない、自由にマップをみることができる
プログラムが完成したら、さっそく実行して確認します
すると赤く光るマグマが広がり、海とはかなり違った雰囲気の風景ができました
これで海とマグマの2種類の背景がそろいました
次はこの背景を、これまで作ってきたアクションゲームに組み込んでいきます
まず海のプログラムとアクションゲームのファイルをGoogle AI Studioに読み込ませます
そして、現在のステージを海のステージに変更してほしいと伝えます
このとき、これまで使えていた部屋や通路などの機能は残したまま、背景だけを海の雰囲気に変えるようにします
以下の通り、ゲームファイルを改修すること
//現在のワールドをビーチのワールドに
//壁は波にすること、基本設定に波など現在設定できるものを移動すること
AIがプログラムを修正したら、完成したファイルを実行します
実際にプレイしてみると、これまでのゲームの仕組みを残したまま、ステージ全体が海の雰囲気に変わりました
部屋の中を移動したり、通路を進んだりすることもできます
次は同じ方法でマグマのステージを作ります
今度は先ほど作ったマグマのプログラムとアクションゲームのファイルをAIに読み込ませます
そしてステージをマグマの雰囲気に変更してほしいと伝えます
以下の通り、ゲームファイルを改修すること
//現在の壁をマグマの海と黒岩の壁にすること
//足場は茶色の土にすること
完成したプログラムを実行すると、今度はステージ全体が赤く光るマグマの世界に変わりました
ゲームの仕組みはほとんど同じでも、背景や演出を変えるだけでプレイしたときの印象はかなり変わります
ここまでで海とマグマのステージをそれぞれ作ることができました
次はこの2つを1つのゲームにまとめます
海のステージとマグマのステージが入ったファイルをAIに読み込ませ、ゲームの途中でステージを移動できるようにしてほしいと伝えます
以下のマグマと海のファイルを以下の通り追加すること
//javascriptとHTMLの2ファイルに分割すること
//現在の石の壁とマグマと海の3バージョンをダンジョンとして選択できること
//基本設定でマップの登場する順番を調整できるようにすること
//フロアの2体の敵を倒すと次のマップに移動する
//マグマの現在の壁をマグマの海と黒岩の壁にすること足場は茶色の土にすること
//海のマップは壁は波にすること、基本設定に波など現在設定できるものを移動すること
//マップ以外の機能は絶対に変更しないこと
プログラムが完成したら、もう一度ゲームを実行します
最初は海のステージから始まり、ゲームを進めると別のステージへ移動できるようになりました
移動すると背景や雰囲気が大きく変わり、マグマのステージが表示されます
1つのステージだけで進むゲームよりも、途中で見た目が大きく変化することでメリハリが出ます
また、同じ仕組みを使えば森や雪山、砂漠などのステージを追加することもできます
AIに背景のプログラムを作ってもらい、それを既存のゲームに組み込んでもらうことで、少しずつステージを増やしていくことができます
ただし、ステージが増えただけではまだ大きな変化がありません
そこで次はボスキャラを追加します
マグマのステージをボス戦の場所にして、大きな敵や攻撃エフェクトを追加していきます
次はボスキャラを追加していきます
今回はマグマのステージをボス戦の場所にして、これまでよりも迫力のある場面を作ります
まずはボスキャラの画像を用意します
ChatGPTを開き、ボスキャラの見た目や雰囲気を伝えて画像を作ります
2Dアクションのドット絵のピクセルスプライトシート
#サイドビューのみ、他方向は不要
//大きい2足歩行のブタのボスモンスター
//小さな足で破けたアメリカの陸軍のアーミー服を着ている
//ガニマタで正面に向かって歩いている（9コマ）
//怒って両手を上げる（5コマ）
//ペルソナのゲームにインスパイアされた
//文字、枠、はいれない
//上記のモーション
//各モーションに対応するフレームがあること
//純白背景
//ゲームボーイカラーのドット絵
//ウルトラSD２頭身キャラ！
//とても顔が大きい
//超コミカル
//手足は全体の十分の一
最初にできた画像がイメージと少し違った場合は、そのまま使わずに修正していきます
大きさや形、色、表情などを伝え直すことで、少しずつイメージに近づけることができます
このキャラの目の黒目を無くして
服を紫色に
今回は何度か調整して、ボスらしい大きなキャラクター画像を作りました
このスプライトシート上段で
キャラの幅が等間隔になっていないので修正すること
全部で3段にして等間隔になるように修正すること
次はボスが使う攻撃を作ります
今回はファイヤーボールを飛ばす攻撃を追加します
Google AI StudioにHTML1ファイルで動くことや、クリックするとファイヤーボールが飛ぶようにすることを伝えます
燃え盛る炎のファイヤーボールをHTML1ファイルで生成できるか
マウスクリックで左から右にとぶように
画面に15個出ても重たくならないように
炎が動いているように見えるエフェクトも入れてもらいます
プログラムが完成したら実行します
クリックすると画面にファイヤーボールが表示され、前へ飛んでいくようになりました
これでボスが使う攻撃の基本部分ができました
続いてボスキャラに動きを付けます
1枚の画像だけでは動いているように見えないため、アニメーション用の画像を準備します
作った画像を読み込み、動きごとに必要な部分を切り分けて保存します
例えば待機している状態や攻撃している状態など、複数の画像に分けておくことでアニメーションとして使いやすくなります
素材がそろったら、これまで作ったアクションゲームにボスを追加します
ゲーム本体のファイル、ボスキャラの画像、攻撃用のプログラムをAIに読み込ませます
そしてマグマのステージにボスが登場することや、ファイヤーボールを使って攻撃することを伝えます
以下の通り修正すること
//基本設定で「クリアの敵数」ゲージを設置、敵を1体から全部の間で次のステージ遷移をコントロールできるように
//基本設定で「ボスステージ」を設置、ステージ切り替え数いくつでボスステージになるかコントロールできるように
//ボスステージをつくること、ボスステージはマグマステージで1部屋だけにして縦60、横60マスにすること
//ボスステージはボスが1体とザコ敵が5秒に1体登場して全部で3体まで登場するように
//ボスの攻撃は添付ファイルのような大きな炎を6個全方向に飛ばす攻撃である
//アニメタブでボスの歩き4コマと攻撃3コマ設定できるように、ボスの巡回はプレイヤー巡回だがゆっくりとする
//ボスの大きさは普通の敵よりも大きく調整できるように
//基本設定タブで敵の大きさとは別にボスの大きさを調整できるように
//絶対に機能を勝手に削除しないように
//ボスはヒットストップしないように
完成したプログラムを実行してテストします
ゲームを進めると、これまでと同じようにステージが切り替わります
海のステージを進んだあと、マグマのステージへ移動すると大きなボスキャラが登場します
さらにボスから炎が飛んでくるようになり、普通のステージとはかなり違った雰囲気になりました
背景を変えるだけでも印象は変わりますが、大きな敵や専用の攻撃を加えることでボス戦らしさがさらに強くなります
ただし、この状態ではまだ少し迫力が足りません
そこで最後はボス専用のエフェクトや新しい攻撃を追加して、さらに見栄えを良くしていきます
最後にボス戦をさらに強化していきます
現在の状態でもマグマのステージに大きなボスが登場し、ファイヤーボールで攻撃してきます
ただし実際にプレイしてみると、まだ少し迫力が足りないように感じます
そこでボス専用のエフェクトと、新しい攻撃を追加します
今回は敵を一定数倒すとレベルが上がり、新しい技を使えるようにします
レベルアップすると、赤いレーザーを上から落とせるようにしました
AIに現在のゲームプログラムを読み込ませ、一定数の敵を倒したときにレベルアップすることと、新しい攻撃を追加することを伝えます
//ボスが攻撃する瞬間、赤くなり炎につつまれるように。その炎に触れた場合ふっとぶように
//ボスがダメージを受けるとヒットストップはかからないが、他の敵と同じようにシェイクするように
//ステージクリアの分だけ敵を倒した瞬間、ストップがかかるように。まったくストップがかからない場合はわけがわかない作りになってしまう。ストップがかかる時間は基本設定タブで調整できるように（0.1〜1秒）
//敵を一定数倒すとレベルアップするように、添付の炎の感じがプレイヤーの雷エフェクトのように青い炎の柱になるが攻撃2発目で炸裂するように、雷の攻撃と置き換わる。レベルアップに必要な数は基本設定タブで調整できるように（1〜100）
//現在の機能は絶対に削除しないように
さらにレーザーが画面上から落ちてくるようにして、通常の攻撃とは見た目が大きく変わるようにします
プログラムが完成したら、さっそくゲームを実行して確認します
敵を倒していくとレベルが上がり、新しいレーザー攻撃が使えるようになりました
これまでの攻撃だけのときと比べると、画面の変化が大きくなり、ゲームらしい派手さも出てきます
ボス戦でもファイヤーボールやレーザーなど複数の攻撃が表示されるため、かなり雰囲気が変わりました
今回追加した機能自体は、それぞれを見るとそれほど大きなものではありません
しかし背景を海やマグマに変えたり、ボスを追加したり、攻撃エフェクトを増やしたりするだけでも、ゲーム全体の見た目は大きく変化します
ノベルゲームでも同じです
普通に画面を切り替えるだけだった移動を3Dダンジョンに変えることで、探索している感覚を加えることができました
さらに壁や床の画像を変えれば、同じプログラムでもまったく違う場所として使うことができます
このようにAIを使えば、最初からすべてのプログラムを書く必要はありません
まず簡単な機能を作り、それを現在のゲームに追加しながら少しずつ完成度を上げていくことができます
今回もプログラムだけでなく、壁や床、扉、ボスキャラなどの画像もAIを使って用意しました
プログラムと画像の両方をAIで作れるため、ゲーム制作の知識が少ない場合でも試しながら形にしやすくなっています
また、今回作った仕組みをそのまま使う必要もありません
3Dダンジョンの画像を変えたり、別のステージを追加したり、ボスの攻撃方法を変更したりすることで、自分のゲームに合わせて自由に改造できます
今回のように既存のゲームへ機能を少しずつ追加していけば、AIだけでもゲームの内容をかなり広げることができます
このブログでは、これからも無料で使えるAIを中心に、ゲームやゲーム制作ツールを作る方法を紹介していきます
ぜひ実際にAIへメッセージを入力して、自分だけのゲーム作りに挑戦してみてください
コメント