AIでゲームをつくってみた!ローグライクゲームとノベルゲームをつくる方法【バイブコーディング入門&初心者向け】

ああ

今回はAIを使って、これまで作ったゲームをさらに進化させていきます

新しくゼロからゲームを作るのではなく、これまでAIで作ったプログラムを読み込ませて、新しい機能を追加していきます

今回作るのは、ノベルゲームとアクションゲームです

まずノベルゲームでは、部屋の移動に3Dダンジョンを追加します

これまでは普通に画面を切り替えて移動していましたが、今回は一人称視点で3D空間を歩けるようにします

最初にGoogle AI Studioを開き、一人称視点の3D迷路を作ってもらいます

次のことをAIにつたえます

以下の仕様で主観視点3DマップをHTML1ファイルで生成すること

//キーボードで移動できること
//ワイヤーフレームでつくること
//テクスチャーメニューで壁にテクスチャを貼ることが可能

AIにはHTML1ファイルで動くこと、キーボードで移動できること、最初はワイヤーフレームで作ることを伝えます

いきなり完成したゲームを作ろうとすると、どこに問題があるのか分かりにくくなります

そこで最初はワイヤーフレームだけのシンプルな3D迷路を作ります

AIにメッセージを入力すると、すぐにプログラムの作成が始まります

完成したHTMLファイルを実行してみると、一人称視点で移動できる3D迷路が表示されました

壁や通路はシンプルですが、キーボードを使って迷路の中を移動できます

これで3D部分の基本となるプログラムができました

次は、この3D迷路をこれまで作ってきたノベルゲームエディタに組み込みます

ノベルゲームのプログラムと3D迷路のプログラムをAIに読み込ませます

そして、ノベルゲームから3Dダンジョンへ移動できるようにすること、3Dダンジョンの形を編集できるようにすることを伝えます

AIが2つのプログラムを確認し、新しいプログラムを作ってくれます

今回は2つのファイルを1つにまとめて出力されたため、メモ帳などを使ってそれぞれのファイルに分割して保存します

保存したファイルを実行すると、これまでのノベルゲームエディタに3Dダンジョンの機能が追加されました

さらに中央に表示されたブロックを組み替えることで、3Dダンジョンの形も編集できます

これならプログラムを直接書き換えなくても、ゲームに合わせて通路や部屋を作ることができます

ただし、この状態ではまだワイヤーフレームに近く、ノベルゲームの舞台としては少し寂しく見えます

そこで次は、壁や床、天井に画像を貼り、3Dダンジョンを洋館のような雰囲気に変えていきます

次は3Dダンジョンに画像を貼り、洋館のような雰囲気に変えていきます

現在の3Dダンジョンは移動やマップの編集はできますが、壁などの見た目はとてもシンプルです

そこで壁や床などに好きな画像を登録できる機能を追加します

Google AI Studioにプログラムを読み込ませ、3Dダンジョンの壁や床、天井にテクスチャを登録できるようにしてほしいと伝えます

テクスチャとは3Dの壁などに貼り付ける画像のことです

プログラムが完成したら、次は実際に使用する画像を用意します

今回はChatGPTを使って洋館風の画像を作ります

まずは壁の画像です

3Dダンジョンの壁に使うため、洋館の壁を真横から見た画像になるように伝えます

普通のイラストでは斜めから見た画像になることがありますが、壁に貼り付けるため、できるだけ正面から見た画像にすることがポイントです

これで洋館らしい壁の画像ができました

続いて天井を作ります

天井の場合は下から見上げた画像になるようにChatGPTへ伝えます

最後に床を作ります

こちらは反対に、床を真上から見た画像になるように伝えます

これで壁、天井、床の3種類の画像がそろいました

作った画像を3Dダンジョンに読み込み、それぞれの場所へ設定します

すると、シンプルだった3Dダンジョンが洋館のような見た目に変わりました

同じ3Dマップでもテクスチャを変えるだけで、かなり雰囲気が変わります

さらにノベルゲームで使用するキャラクター画像も読み込みます

キャラクターごとに画像を設定し、画面に表示する位置や大きさを調整します

ストーリーについても、すべて自分で考える必要はありません

今回のノベルゲームエディタには、AI用のストーリーを作るための機能を用意しています

この機能を使ってAIにストーリーを考えてもらい、ゲームへ設定します

これでキャラクター、ストーリー、3Dダンジョンがそろいました

実際にゲームを動かしてみると、ストーリーの途中から3Dダンジョンへ入れるようになっています

ワイヤーフレームだったときと比べると、洋館らしい雰囲気もかなり出てきました

しかし、このままでは3Dダンジョンに入ったあと、別の場所へ移動するための出口がありません

そこで次は3Dダンジョンに出口を追加して、出口に入ると別の部屋へ移動し、ストーリーの続きを進められるようにします

次は3Dダンジョンに出口を追加していきます

現在の状態でも3Dダンジョンの中を自由に移動できますが、出口がないため、その先へ進むことができません

そこでGoogle AI Studioにプログラムを読み込ませ、3Dダンジョンに出口を追加してほしいと伝えます

出口に入ると別の部屋へ移動し、そのままストーリーの続きを進められるようにします

プログラムが完成したら、次は出口に使う画像を用意します

今回は洋館の雰囲気に合わせて、ChatGPTで扉の画像を作ります

最初に作った画像は少し小さく見えたため、より存在感が出るように両開きの大きな扉へ変更しました

ゲーム素材として使うため、できるだけ正面から見た画像になるように作ります

これで出口用の画像も完成しました

さっそくプログラムを実行して、扉の画像を読み込みます

3Dダンジョンの出口に扉を設定し、ストーリーも準備します

ゲームを最初から実行してみます

ストーリーを進めていくと、途中から3Dダンジョンへ移動します

ダンジョンの中を進むと、先ほど設定した出口の扉が見えてきます

その扉まで移動すると、しっかり別の部屋へ移動できました

さらに移動したあと、そのままストーリーの続きを進めることもできます

これでノベルゲームの中に、実際に自分で歩いて探索できる3Dダンジョンを組み込むことができました

普通に背景を切り替えて部屋を移動するだけの場合と比べると、ゲームらしい演出がかなり強くなります

また、今回の方法ならダンジョンの形やテクスチャを変えることで、洋館以外の場所も作ることができます

例えば地下迷宮、研究施設、宇宙船、学校など、画像を変えるだけでも違った雰囲気を作れます

ここまででノベルゲーム側の大きな追加機能は完成です

続いては、これまで作ってきたアクションゲームを改良していきます

今回は新しく海とマグマのステージを追加します

最初に海のステージから作ります

いきなりゲーム本体を変更するのではなく、まずは海だけを表示する簡単なプログラムをAIに作ってもらいます

Google AI StudioにHTML1ファイルで動くことを伝え、海の波や水面の動きが分かる風景を作ってもらいます

プログラムが完成したら実行してみます

すると画面全体に海が表示され、波が動いているような風景ができました

このように最初に背景だけを別のプログラムとして作っておくと、イメージを確認してからゲーム本体へ組み込むことができます

次は同じ方法でマグマのステージも作っていきます

次はマグマのステージを作っていきます

海のステージと同じように、まずはマグマの風景だけを表示するプログラムをAIに作ってもらいます

Google AI StudioにHTML1ファイルで動くことや、マグマらしい動きや雰囲気を入れることを伝えます

プログラムが完成したら、さっそく実行して確認します

すると赤く光るマグマが広がり、海とはかなり違った雰囲気の風景ができました

これで海とマグマの2種類の背景がそろいました

次はこの背景を、これまで作ってきたアクションゲームに組み込んでいきます

まず海のプログラムとアクションゲームのファイルをGoogle AI Studioに読み込ませます

そして、現在のステージを海のステージに変更してほしいと伝えます

このとき、これまで使えていた部屋や通路などの機能は残したまま、背景だけを海の雰囲気に変えるようにします

AIがプログラムを修正したら、完成したファイルを実行します

実際にプレイしてみると、これまでのゲームの仕組みを残したまま、ステージ全体が海の雰囲気に変わりました

部屋の中を移動したり、通路を進んだりすることもできます

次は同じ方法でマグマのステージを作ります

今度は先ほど作ったマグマのプログラムとアクションゲームのファイルをAIに読み込ませます

そしてステージをマグマの雰囲気に変更してほしいと伝えます

完成したプログラムを実行すると、今度はステージ全体が赤く光るマグマの世界に変わりました

ゲームの仕組みはほとんど同じでも、背景や演出を変えるだけでプレイしたときの印象はかなり変わります

ここまでで海とマグマのステージをそれぞれ作ることができました

次はこの2つを1つのゲームにまとめます

海のステージとマグマのステージが入ったファイルをAIに読み込ませ、ゲームの途中でステージを移動できるようにしてほしいと伝えます

プログラムが完成したら、もう一度ゲームを実行します

最初は海のステージから始まり、ゲームを進めると別のステージへ移動できるようになりました

移動すると背景や雰囲気が大きく変わり、マグマのステージが表示されます

1つのステージだけで進むゲームよりも、途中で見た目が大きく変化することでメリハリが出ます

また、同じ仕組みを使えば森や雪山、砂漠などのステージを追加することもできます

AIに背景のプログラムを作ってもらい、それを既存のゲームに組み込んでもらうことで、少しずつステージを増やしていくことができます

ただし、ステージが増えただけではまだ大きな変化がありません

そこで次はボスキャラを追加します

マグマのステージをボス戦の場所にして、大きな敵や攻撃エフェクトを追加していきます

次はボスキャラを追加していきます

今回はマグマのステージをボス戦の場所にして、これまでよりも迫力のある場面を作ります

まずはボスキャラの画像を用意します

ChatGPTを開き、ボスキャラの見た目や雰囲気を伝えて画像を作ります

最初にできた画像がイメージと少し違った場合は、そのまま使わずに修正していきます

大きさや形、色、表情などを伝え直すことで、少しずつイメージに近づけることができます

今回は何度か調整して、ボスらしい大きなキャラクター画像を作りました

次はボスが使う攻撃を作ります

今回はファイヤーボールを飛ばす攻撃を追加します

Google AI StudioにHTML1ファイルで動くことや、クリックするとファイヤーボールが飛ぶようにすることを伝えます

炎が動いているように見えるエフェクトも入れてもらいます

プログラムが完成したら実行します

クリックすると画面にファイヤーボールが表示され、前へ飛んでいくようになりました

これでボスが使う攻撃の基本部分ができました

続いてボスキャラに動きを付けます

1枚の画像だけでは動いているように見えないため、アニメーション用の画像を準備します

作った画像を読み込み、動きごとに必要な部分を切り分けて保存します

例えば待機している状態や攻撃している状態など、複数の画像に分けておくことでアニメーションとして使いやすくなります

素材がそろったら、これまで作ったアクションゲームにボスを追加します

ゲーム本体のファイル、ボスキャラの画像、攻撃用のプログラムをAIに読み込ませます

そしてマグマのステージにボスが登場することや、ファイヤーボールを使って攻撃することを伝えます

完成したプログラムを実行してテストします

ゲームを進めると、これまでと同じようにステージが切り替わります

海のステージを進んだあと、マグマのステージへ移動すると大きなボスキャラが登場します

さらにボスから炎が飛んでくるようになり、普通のステージとはかなり違った雰囲気になりました

背景を変えるだけでも印象は変わりますが、大きな敵や専用の攻撃を加えることでボス戦らしさがさらに強くなります

ただし、この状態ではまだ少し迫力が足りません

そこで最後はボス専用のエフェクトや新しい攻撃を追加して、さらに見栄えを良くしていきます

最後にボス戦をさらに強化していきます

現在の状態でもマグマのステージに大きなボスが登場し、ファイヤーボールで攻撃してきます

ただし実際にプレイしてみると、まだ少し迫力が足りないように感じます

そこでボス専用のエフェクトと、新しい攻撃を追加します

今回は敵を一定数倒すとレベルが上がり、新しい技を使えるようにします

レベルアップすると、赤いレーザーを上から落とせるようにしました

AIに現在のゲームプログラムを読み込ませ、一定数の敵を倒したときにレベルアップすることと、新しい攻撃を追加することを伝えます

さらにレーザーが画面上から落ちてくるようにして、通常の攻撃とは見た目が大きく変わるようにします

プログラムが完成したら、さっそくゲームを実行して確認します

敵を倒していくとレベルが上がり、新しいレーザー攻撃が使えるようになりました

これまでの攻撃だけのときと比べると、画面の変化が大きくなり、ゲームらしい派手さも出てきます

ボス戦でもファイヤーボールやレーザーなど複数の攻撃が表示されるため、かなり雰囲気が変わりました

今回追加した機能自体は、それぞれを見るとそれほど大きなものではありません

しかし背景を海やマグマに変えたり、ボスを追加したり、攻撃エフェクトを増やしたりするだけでも、ゲーム全体の見た目は大きく変化します

ノベルゲームでも同じです

普通に画面を切り替えるだけだった移動を3Dダンジョンに変えることで、探索している感覚を加えることができました

さらに壁や床の画像を変えれば、同じプログラムでもまったく違う場所として使うことができます

このようにAIを使えば、最初からすべてのプログラムを書く必要はありません

まず簡単な機能を作り、それを現在のゲームに追加しながら少しずつ完成度を上げていくことができます

今回もプログラムだけでなく、壁や床、扉、ボスキャラなどの画像もAIを使って用意しました

プログラムと画像の両方をAIで作れるため、ゲーム制作の知識が少ない場合でも試しながら形にしやすくなっています

また、今回作った仕組みをそのまま使う必要もありません

3Dダンジョンの画像を変えたり、別のステージを追加したり、ボスの攻撃方法を変更したりすることで、自分のゲームに合わせて自由に改造できます

今回のように既存のゲームへ機能を少しずつ追加していけば、AIだけでもゲームの内容をかなり広げることができます

このブログでは、これからも無料で使えるAIを中心に、ゲームやゲーム制作ツールを作る方法を紹介していきます

ぜひ実際にAIへメッセージを入力して、自分だけのゲーム作りに挑戦してみてください

コメント