AI活用でゲームは作れる!?ChatGPT-4oでスイカゲームを作ってみた

noteで書く
9月まで引きずった猛暑が嘘のようにすっかり涼しくなりましたね。 今年の秋はいかがお過ごしでしょうか?
秋といえば食欲の秋、芸術の秋、スポーツの秋…と
様々かと思いますが、 今回のテーマは「AIの秋」 2024年の5月にリリースされたChatGPT-4oを使って、
理想のゲーム作りにチャレンジしてみました!

ChatGPT-4oとは?

そもそもChatGPTって何?という方もいるかと思うので、
軽く解説しますと… ChatGPTとはOpenAIが開発した人工知能チャットボットの生成AIであり、
ChatGPT-4oはそのシリーズの新世代モデルになります。(2024年10月時点) チャットを通じて自然な人間同士の対話を模倣することが出来、
創作やFAQなど、様々な分野に活用されています。 2024年10月時点で、無料のChatGPT3.5が公開されていますが、
4oは3.5では出来なかった画像や音声を用いたマルチモーダル機能に対応しており、
さらに回答の速度など性能も向上しています。 またChatGPT-4oは2024年10月時点で、1日あたりの制限付きですが無料で使用することができ、
有料のChatGPT Plusに加入すると、全ての機能を使うことが出来ます!

ChatGPT-4oの詳細はこちら 簡単な説明にはなりましたが、ChatGPTについて少しでもご理解いただけたら幸いです!

ChatGPTと一緒にゲームを作ってみよう!


返答がテキストベースになるので、単純な会話や文章の創作はもちろん得意なのですが、
得意なことの一つに「コード生成」があります。 もちろんAIですので、精度のばらつきがあり過信は禁物。
しかし様々なコードの要件に対応して生成が可能なので、使い方次第でとても便利です! ということで、話は戻りますが「AIの秋」。
ChatGPT-4oを触る機会があったので、折角ならと思いゲームの生成にチャレンジします! まずは何を作るか?というテーマ設定からですが、
会話で作っていく関係上、ゲーム性の説明がしやすい
かつそこまで処理が重くないのが好ましい…

ということでスイカゲームにします。

-フルーツを成長させてスイカを目指す。『スイカゲーム』をご存知ですか? トピックス | Nintendoより
スイカゲームをご存知でしょうか?
フルーツを落として成長させる、シンプルなゲーム性ながら、
インターネットを中心に大きなトレンドとなった一作です。 実際にプレイしたことは無くても、見かけたことがある方もいるかと思います!

私の地元の夏祭りでは、スイカゲーム(っぽい)の屋台も出始めていました…

switch版で定価が240円という破格っぷりな本作を、AIで作れたらもっとお得なのでは!?
ということでChatGPT-4oをお供に、スイカゲームを生成してみます!

スイカゲーム生成の道

では早速、実際にプロンプト(指示文)を打ちながら、ChatGPT-4oにコードを生成してもらいます!

スイカゲームを知っていますか?

「スイカゲーム」とは、果物を組み合わせてスイカを作るパズルゲームで、日本や中国を中心に人気があります。このゲームでは、同じ果物をぶつけて次々に進化させ、最終的にスイカを作ることが目標です。画面上で果物が山になり、ボックスから溢れないようにプレイします。

もともと中国発の「合成大西瓜」というゲームがベースで、日本では2021年頃から話題となりました。特にプロジェクター製品「popIn Aladdin」内蔵のアプリとして登場し、のちにNintendo Switch版もリリースされました。Switch版ではオンライン対戦モードも搭載され、競技性が強化されています

-攻略情報などありましたが以下略-

まさしく例のスイカゲームですね!
「2021年頃から話題」は、実際には2023年頃かと思うので真っ当に嘘ですが、
ルールなど概ね理解は問題ないみたいです。 それにしても元ネタが中国発だったとは初耳でした。
「合成大西瓜」が気になりすぎる… ルールの理解を確認したので、要件を入力していきます!

HTML+CSS+jsで作られたスイカゲームのコードを生成してください。
基本的には、スイカゲームのルールを参考にしてください。

要件は以下の通りです。
・フルーツは色のついた球体のオブジェクトにします。
・同じフルーツ同士が衝突すると、一段階上のフルーツに成長します。
・スイカゲームと同じ種類、段階のフルーツが存在します。
・スコアが存在し、フルーツを成長させた時に、成長段階によって高いスコアが得られます。
・ゲームの画面は横500px、縦700pxです。
・フルーツがゲーム画面の一番上に衝突すると、ゲームオーバーになります。

…長くなってしまうのでコード内容は割愛させていただきますが、
指定したHTML,CSS,jsそれぞれのコードをノリノリで生成してくれました! また今更ですが、今回は縛りとしてこちら側でコードの直接書き換えはしないことにします!
プロンプトで生成されたコードのみを差し替えで作っていくイメージでいきます。 ノリノリで生成してくれたコードを組んでみた結果がこちら!!

???

何でしょうねコレ。

ランダムな位置に降り積もり続ける謎の挙動…
これはこれでAIの考えた革新的なゲームデザインなのか…? 考察はさておき、どうやら私のプロンプト作りが甘かったようです。
ちなみに、積雪シミュレータもといAIスイカゲーム第一作はこちらで実際に遊べます! さてここからがChatGPTの見せ場です。第一作のコードに対して、さらに要件を加えていきます!
ChatGPTは以前の話やコードの流れから自然に汲み取ってくれるので、必要に応じた生成が可能です!

基本は非常に良くできています!
少し改善したい点があったので、上で作ったコードに以下の要件を追加してください。

・フルーツの種類ですが、小さい方から「さくらんぼ → いちご → ぶどう → デコポン → かき(柿)→ りんご → なし(梨)→ もも → パイナップル → メロン → スイカ」の順に進化していきます。色はフルーツに合った適当なものを指定してください。
・フルーツは物理演算によってそれぞれが衝突し合います。物理演算のために、matter.jsなどを用いてください。
・マウスのカーソル位置を取得して、任意の横の位置にフルーツを落とせるようにしてください。高さは固定で、ランダムにさくらんぼからかきまでを落とせるようにしてください。

正直フルーツなのかよくわからない色の物が出現していたので、
ここは原作に沿った設定にしてみました! また物理演算が欲しかったので、2Dの物理演算でよく使われるmatter.jsを指定しました。
ここまで来ると「ほぼ直接書いてるようなものでは?」と言われそうですが知りません。 少し改善と言いつつ、かなり挙動やデータなどの改変を願ってしまいましたが、
相変わらずChatGPTはノリノリでコードを生成してくれました!
そんな渾身の二作目がこちら!
GPTくん…! 挙動やサイズ感など、まだ荒削り感はありますが、
これはかなりスイカゲームと呼べるのでは無いでしょうか! もはや前作の面影が無いAIスイカゲーム第二作もこちらで遊べます! 前作とは打って変わり、かなり挙動は原作に近しいものになりました! しかし実際にプレイしてみると、

フルーツのサイズ感にメリハリが無かったり
ゲームオーバーの挙動が怪しかったり
そもそもカーソル位置の指示が通っていなかったり というわけで、ここから先はゲーム性のブラッシュアップを行っていきます! こだわりの域ではあると思いますが、
あくまでゲームですので「遊べる」レベルに持っていけるよう指示を出します!

かなり良くなりました!
改善したい点がまた少しあるので、上のコードに以下の要件を追加してください。

・フルーツが進化するときのサイズ感を、1.2倍ほど大きくしてください。
・カーソルの位置に合わせて、リアルタイムにカーソルの位置がわかるオブジェクトと、落とすフルーツを表示してください。
・フルーツを落下させる時に、上の判定に衝突してしまいゲームオーバーになる可能性があるので、上の判定に3秒間衝突していたらゲームオーバーになるなどの対策をお願いします。※この時、3カウントなどの表示ができたらかなり良いです

.

.

.

ゲームバランスはかなり良くなりました!
いくつかバグが見つかったので、再度コードの修正をお願いします。

・後半のフルーツに進化するにつれて、拡大率がさらに上乗せされるようにしてください。
・カウントダウンが正しく下がっていかないので、カウントダウンが行われるように修正してください。
・スイカからさくらんぼに進化させる際に、findIndex周りで存在しない領域にアクセスしていそうなので、処理の対策をお願いします。
・マウスカーソルの位置と、現在落とすフルーツを表示する機能を追加してください。

.

.

.

そんな雰囲気で指示を出し続け、十数回後…

かなりスイカゲームですよコレ!

無事にそれなりの物が仕上がりました!
大分カットしましたが意外に長い道のりだった… 未だ細かな挙動不審やバグはありますが、最低限遊んでいる感覚にはなれるかと思います!
ひとまずのAIスイカゲーム最終版もこちらで遊べます!

※一つ注意点ですが、機能面は一通り備えたものの、ゲームバランスの方は磨いていません!
スイカが作れるかどうかも怪しいです。 ぜひお試しあれ。

無事にスイカゲームが完成しました!
クオリティが高く、感動しました。ありがとうございます。

無事にスイカゲームが完成したとのことで、本当におめでとうございます!✨
素晴らしいプロジェクトの一部をお手伝いできて、とても嬉しいです。ゲームのロジックやUIなど、細部まで丁寧に調整されていて、完成度の高い作品になったと思います。
何か他にもサポートが必要なことがあれば、ぜひお知らせください。新しいプロジェクトやアイデアについても、いつでもお手伝いさせていただきます。また楽しいゲームやプロジェクトが生まれることを楽しみにしています!

急に自画自賛を始めたGPT君。お疲れ様でした。

まとめ: AIでゲームは作れるか?

なんとかゲーム作りも一段落となりましたが、いかがでしたでしょうか?
AIとゲームを作る時の流れや雰囲気を感じていただけたら幸いです! ただ、このような流れで作った場合に、
様々なメリットやデメリットを感じたので、まとめとしてざっと以下に記しておきます!

メリットその1: レスポンスがかなり早い

これはChatGPT-4oの性能面のメリットでもありますが、
とにかくレスポンスが早く、待ち時間はほぼ0でした! 修正してほしいコードがかなり長文になったとしても、
送信前に読み取ってる!?というほど爆速でレスポンスを返してくれます。恐ろしい計算力。

メリットその2: コードの保持の正確性

コード自体の正確性も中々に高く感じましたが、
前に生成したコードについて正確に覚えているのがありがたい! プログラミング全体に言えることかと思いますが、
少しでも命名や表記が変わると依存関係が崩れてしまうので、チェックが大変なんですよね… ですが今回の場合はその心配は特に無く、前のコードと互換性のあるコードを生成してくれたので、
非常に手間が省けました! すでにメリットが強力すぎるのですが、デメリット(というか懸念点)もありました。

デメリット: 結局デバッグは人力になる

プロンプトの問題も勿論ありますが、
AIは無自覚にもバグを含んだコードや、指示を履き違えたり、無視したコードを生成することがあります。 そのため、目的の動作が得られなかった場合、
「この動作が無いのですが、改善できませんか?」というよりも、 「ここのコードが間違っていませんか?」や「ここの処理方法を変えられませんか?」など、
結局コードの中身や動きを見て指摘しないと改善しない場合がかなりありました。 逆に、コードを指摘しないプロンプトのみで細かく制御するのはかなり至難の業かと思います…! 得られた所感としては概ね以上となります! さて、今回のタイトルにもしましたが「AI活用でゲームは作れるか?」について、
このチャレンジを行った身としては「活用法次第でほぼ自由自在に作れる時代になっている」と感じました! 0から100まで、全てAI頼りではさすがに難しくなるかと思いますが、
少しでも知識やコードを読む能力があれば、
AIを最強のたたき台として活用し、ゲームを完成に導くことは可能かと思います! ということで、AIが人類のよきパートナーになることを願っております…
最後に!
アイ・クリエイトでは様々なエキスパートが
お困りごとについての施策や改善案をご提案させていただきます!

「導入事例について詳しく知りたい!」
「社内の技術・リソースが足りない…」
「おすすめのラーメン屋が知りたい!」
という方は、ぜひ当社にお気軽にご相談ください!

#ご相談はこちらから
GOOQ by Aicreate
https://gooq.jp/contact/ ちなみにGPT-4oがフルで使えるChatGPT Plusは月額20ドル、
スイカゲームは240円買い切りとなるので、
もしスイカゲームが遊びたければ、
スイカゲームを買った方が無難ですね。

おわり
noteで書く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です