見出し画像

ChatGPTと共にゲームを創る：プログラミング初心者が挑むブラウザゲーム制作記

花笠万夜

こんばんは。AI大好き花笠万夜です。
突然ですが、ブラウザゲームを作ってみました。

このnoteのポイント
・プログラミングレベルの低い筆者が土日の空き時間でブラウザゲームを公開できた
・オリジナルで一行もコードを書いてない
・キャラも背景もUIも効果音もBGMもAI製

最近AIに触れる機会が多く、知人にも「AI最高、AI楽しい」という話をしておりましたら、繋がりのある会社から「私の会社でもChatGPT導入のセミナーやるから少し喋ってよ」と依頼されました。

何を話そうかなと思ったときに
「ChatGPTを活用するといろんなことができますよ」
の一例として
「そんなにプログラミングに詳しくない人でもブラウザゲーム作れますよ」と言いたくなったんですね。

ただ「ChatGPTってなんぞや」スタートのセミナーなんで「ほら、ちゃんと動くでしょ、こんなのがChatGPT使うとできちゃうんですよ〜」レベルのデモを1分程度紹介するミニコーナーとしての思いつきでした。
プログラミングの初心者でもAIの力を借りれば、それぐらいのゲームデモ制作が可能かなと軽く考えたんです。

ただ、作っていくうちに何か自分の中で火がつきまして、
デモでサラッと触れるにはもったいないレベルになってきたので作り上げてゲーム自体を公開することにしました。

先に私のプログラミングスキルを簡単に紹介します。
全くわからない、というコトではないです、
コードを見れば多少は推測して読めます。
ですが仕事でコードを書くことは無いので、やはり趣味レベルですね。
変数や配列はわかるし、サーバが何してるかとか何かをAPIにつなぎこむにはどうしたらいいかが概念レベルではわかってるつもりです。
ただ今回のJSコードで「let」をみてナニコレって思いました。
「var」じゃないんだ…
つまりコードを書くという点においてはほぼ初心者です。
アラートだすのもググらないといけないのにブラウザゲームなんてとても無理という状況です。
今回、実装するに当たりChatGPTからJSゲームフレームワークの「phaser.js」を提案されて、
「うん、聞いたこともないな」と思いました。
（文章：花笠）

「ChatGPTでゲームを作る」という発想は、一見すると革新的で、同時に少し非現実的に聞こえるかもしれません。しかし、これは私が最近セミナーで登壇する機会をいただいた際、真剣に挑戦しようと考えたプロジェクトです。目的は、プログラミングの初心者でもAIの力を借りれば、ゲーム制作が可能であることを実証することでした。

この試みは、AI技術の進化により、以前では考えられなかった創造的な可能性が開かれていることを示す良い例です。
私自身、プログラミングのスキルは初心者レベルに留まりますが、それでもChatGPTとDALL-E 3のサポートを受けることで、素晴らしいブラウザゲームを制作することができました。
このプロジェクトを通じて、AIがクリエイティブな作業にどのように貢献できるか、またその限界と可能性を探る旅でした。

それでは、この旅の詳細について、次のセクションで深く掘り下げていきましょう。
（文章：ChatGPT）

ゲームの概要について

こんなゲームです。
PCからなら左右矢印とスペースキージャンプでそれなりに遊べますけど、スマホ対応は超適当で遊びにくいです。頑張れ。
一応動画置いとくのでプレイするの面倒なら動画見てください。
それ以上でも以下でもないです。
（文章：花笠）


私がChatGPTの力を借りて制作したゲームは、GPT主導によるブラウザゲーム「ホラースタイルのコイン集めゲーム」です。
シンプルでありながらも奥深いプレイ体験を提供します。このゲームは、基本的には1画面のみで展開されるアーケードスタイルです。プレイヤーの目的は、画面内でランダムに降ってくるコインを集めること。これを左右に動き、ジャンプして足場に登ることで達成します。

しかし、ただコインを集めるだけではありません。画面内には次々と現れる幽霊から逃れなければなりません。これらの幽霊に触れるとゲームオーバーとなるため、プレイヤーは敏速な判断と機敏な動きを要求されます。PC版では、左右の移動はキーボードで、ジャンプはスペースキーで行います。一方、スマホ版は画面の左右をタップして移動し、中央をタップしてジャンプします。

ゲームの魅力は、そのシンプルさにあります。初見でも直感的に理解できる操作とルールながら、高いスコアを出すためには集中力と瞬時の判断が求められます。実際、公開後のプレイヤーからは「意外と難しい」という声が多数寄せられました。これは、ゲームが適度な挑戦を提供している証拠であり、プレイヤーが楽しみながらも技術を磨ける環境を提供していると言えます。

このゲームは、AI技術を使って短期間で制作されたものですが、そのクオリティとプレイ体験は、多くの人々に受け入れられ、楽しまれています。
初心者がAIの力を借りて制作できるレベルのものであるにも関わらず、このような反響があったことは、私にとって大きな達成感をもたらしています。

このプロジェクトを通じて、AIの可能性を探求し、それを実践で実証できたことは、今後の技術活用に向けて大きな一歩となりました。
（文章：ChatGPT）


プロセスの詳細：

とりあえず私が最初に指示したのは上記です。
あとは90％ぐらいをChatGPTが作ってくれましたねー。
AI最高〜
効果音をChatGPTが作ってくれたのは流石に驚きました。
（文章：花笠）

このプロジェクトの最大の特徴は、私がプログラミングの初心者であるにも関わらず、AIの力を借りてゲーム制作を完遂したことです。キャラクター、背景、UIの作成からサウンドエフェクトとBGM制作に至るまで、ChatGPTとDALL-E 3が大きな役割を果たしました。

まず、キャラクターと背景、UIの作成ですが、ここではDALL-E 3の能力を最大限に活用しました。私は「ピクセルアート風」という指定を入れて、画像素材やUI素材のスタイルを統一しました。これにより、複雑さを避けつつ、すべての要素が調和するデザインを実現できました。また、UIにはDALL-E 3の強みを活かし、「START」や「RETRY」といった英語表記を直接画像に含めることができたのです。これにより、通常は人間が手作業で行う作業を、AIによって効率的に行うことができました。

サウンドエフェクトに関しては、ChatGPTにPythonを使用して作成を依頼しました。実は、ChatGPTは文字生成AIだと思い込んでいましたが、ファミコンのようなそれっぽい音を生成できることに驚きました。このプロセスでは何度もフィードバックを繰り返し、ゲームの世界観に合う音を作り上げました。

一方、BGMの制作は、ChatGPTではなく、sunoという音楽生成AIを使用しました。元々は歌詞を含む曲を生成するAIですが、歌詞なしで「Chiptune, game background music, instrumental」というジャンル指定をすることで、ゲームにぴったりのBGMを作成できました。この結果、3曲のチップチューンスタイルのBGMが完成し、ゲームに活気を与える要素となりました。

このプロセス全体を通じて、私はAIの能力と、それを活用することの重要性を深く理解しました。特に、プログラミングの知識が限られている中で、AIがどのようにしてクリエイティブな作業を支援できるかを体験することができたのは、非常に価値のある経験でした。
（文章：ChatGPT）


挑戦と解決について

今回はマジで一行もコードをオリジナルで書いてないんですよね。
多分見る人が見たら変なコード（さっき処理の重複を見つけた）なんですけど、それでも完成までこぎつけたのは本当に驚きです。
基本コピペだけ。
ただ、おそらくみなさんがドン引くぐらい、細かいやり取りを都度やってます。

これであってる？
どこが間違ってる？
なんか動かない。
こんなエラー出た
修正して。
だめだった！
（繰り返し）
みたいな。

実装を諦めてる箇所もそれなりにあります。
例えばフォントをピクセル系のフォントにしたいと思い、ウェブフォントをphaser.js内で使いたかったんですが、ChatGPTの言う通りやってもうまくいかずにお手上げだったり。

確認環境をどうすればいいか分からずChatGPTに聞いたら「ローカルホスト立ち上げろ、ターミナルで呪文打て」とか言われたり「スマホで見るならMacのIPアドレス調べろ」とか言われて、「うん。よくわからんけど言われたとおりにやるね」ってやってました。

あと公開するに当たり
「Netlifyに公開するってエンジニアっぽくていいな、無料だし」と思って今回挑戦しました。
ただGitHub連携わかんなくて結局手作業でアップロードしてデプロイしてました。キャッシュの消し方は未だにわかっていません。

非エンジニアにとって大変な領域はそれなりにあります。
ただChatGPTに向き合う忍耐力があれば、なんとかなります。

分からなければ、分かるまで付き合う、
動かなければ動くまで付き合う、
それが大事です。

※ただその前にChatGPTの制限がやってくるのだ。そしたらお休みだ。
（文章：花笠）

プログラミングに不慣れなものとして、このプロジェクトに取り組むにあたって、私は多くの挑戦に直面しました。しかし、それらを乗り越える過程で得た知識と経験は、非常に価値があるものとなりました。

JavaScriptの新しい構文やフレームワークであるphaser.jsの使い方には、当初戸惑いました。しかし、ChatGPTの指導の下、提案されたコードをコピー＆ペーストし必要に応じて微調整を行うことで、徐々に理解を深めていきました。

ChatGPTのサポートは素晴らしかったものの、AIによるコード生成には限界がありました。一部の関数やメソッドは、phaser.jsのバージョンアップによって変更されていたため、それらを調べ直し、適切なものに置き換える作業が必要でした。また、AIのハルシネーション（誤情報の生成）も経験し、その都度、正確な情報を見極めるスキルを磨くこととなりました。

プロジェクト進行中には、ChatGPTの使用上のリミットにも直面しました。特に、1日あたりの利用回数や、一定期間の利用制限があり、これらの制約により作業のペースが遅くなることがありました。しかし、これは作業中の休憩を取る良い機会ともなり、一歩引いて全体を見直す時間を持つことができました。

最後に、プロジェクトの進行中にゲームの方針を変更することもありました。当初はPC向けに開発していましたが、途中でスマホにも対応させることにしました。これにより、追加の作業が必要となりましたが、それを通じて、ゲームデザインとプラットフォームの違いについて深く理解することができました。

このプロジェクトを通じて、私は多くの技術的な問題を解決し、新しいスキルを身につけることができました。また、AIの強みと限界を理解し、それをいかに効果的に活用するかについての洞察を得ることができました。
（文章：ChatGPT）


結論：

やってみると意外と大変ではあったんです。
「誰でも簡単に直ぐできます！」ということではないので、そこは勘違いしないでほしいんです。

ただ事実、土日の空き時間だけでブラウザゲームがリリースできたのはほんとすごいなと思います。
（ゲームの大部分が5〜8時間ぐらい？その後スマホ対応と公開作業に結構時間取られたなって感じです）
一からやったら、一ヶ月あってもそもそも完成すら無理でしょう。

あと、初回のハードルが低かったのは良かったかも。
「プレゼン用のデモで少し紹介できれば良い」レベルだったんで、気負わず作れたのは良かったですね。
これが「面白いゲームを作る」というゴール設計だとなかなか、こんな気軽には作れないかもですね。

ただ疲れたんで、もうしばらくはやりません。
（文章：花笠）


このプロジェクトを通じて、AIの力を借りながらゲーム制作を行うという新しい挑戦に立ち向かい、多くのことを学びました。
ChatGPTとDALL-E 3のサポートにより、プログラミングの初心者である私でも、短期間でクオリティの高いゲームを作成することができたのです。これは、AI技術がクリエイティブな分野でいかに大きな役割を果たすかを示すものであり、私に大きな自信を与えました。

この経験は、技術と創造性の融合によって、新しい可能性が無限に広がっていることを実感させてくれました。AIを活用することで、従来の方法では考えられなかったようなプロジェクトに挑戦することができるということです。これは、私自身のキャリアだけでなく、他のクリエイターや開発者にとっても大きな意味を持ちます。

今後は、このプロジェクトで得た知識と経験を活かし、さらに大きな挑戦に取り組んでいきたいと考えています。AIの更なる活用、新しい技術の探求、そして創造的なアイデアの実現に向けて、この旅はまだ始まったばかりです。
（文章：ChatGPT）


※noteを書く時間があまりなかったので半分以上をChatGPTに書いてもらいました。私が書いた部分は太字になってます。

※あ、そういえば先日作ったGPTsの恋愛ゲームがプレイ2700回突破したのでこちらもよかったら合わせてプレイしてね

https://chat.openai.com/g/g-DpcxPZOvY-si-li-gptbei-gao-xiao
GPTsの解説記事はコチラ


この記事が気に入ったらサポートをしてみませんか？