【無料】ブラウザ上でできるクソゲー『すいかスカイ』をリリースしました！
今回は、ほぼ全てAIが生成したコードをそのまま用いてゲームを作ってみることにチャレンジしています。
出来上がったゲームは下記の『すいかスカイ』になります。クソゲーです。
最大2分間遊べるように設定しています。ゴールを目指しましょう！
正直なところ、まだまだ見直す点が多いですが、今回の趣旨はあくまでもAIだけの力でどのくらい完成度を高められるかが目的であったため、AIだけで制作した割にはなかなかクオリティが高いものができたのではないかと思っています。
ここからは制作過程をざっくりと書いていきます。
使用するAIを決める
今回は、以前から使ってみたかったcreate.xyzを使用することに。
create.xyzは、プログラミングに必要なコードを書かなくても、プロンプトを書くだけでWebサイトやアプリができあがります。画像を添付して指示をすることもできるようです。
今回はゲームを作りたかったので、いけそうだと判断しました。
ゲームの仕様を決める
具体的には書きませんが、例えば下記のようにリストを作っていきます。
- 最初はスタート画面があり、ボタンを押すとゲームが始まる。
- プレイ画面は、ゲームをプレイしている画面があり、右側にキャラクターを操作できるボタンを押せるようになっている。
- プレイ中はゲームが自動でスクロールし、キャラクターが障害物をジャンプして乗り越えながら進んでいく。
このような仕様をできるだけ具体的に決めていき、create.xyzのプロンプトにぶち込みます。できあがったものはDemoから確認することができます。
できあがった内容を引き継いだまま修正をしたい場合は、プロンプトを記載してGenerateを押します。
Generateの左側の更新ボタンは、引き継がないで新規で作り直したい場合に使います。
何度も修正しているうちに、ボタンを押したらジャンプするギミックなどは生成できましたが、スクロールして動かすまでには至りませんでした。create.xyzは履歴を辿ることができ、一番よかったものを下記に添付しています。
ここでcreate.xyzに見切りをつけます。ここまで生成したコードはダウンロードができます。
ダウンロードした構成は下記のようになっています。React/Next.jsやTailwindCSSが使われていました。
静的コードではないため、環境構築の経験やReactを触ったことがないとなかなかカスタマイズは難しいなと感じます。これをChatGPT-4oに聞きながら仕様に従って修正していきます。
基本は該当のページのコードを丸ごと貼り付けて、仕様を1つずつ改善していく流れで行いました。
これでひとまず動くようになりました。
どうせなら効果音やBGMもAIで作りたいよなと思い、制作することに。
ゲームの効果音とBGMの作成
ゲームの効果音は、Optimizer AIを使います。今回はジャンプ音、クリア音、ゲームオーバー音の3つを作成しました。
商用利用もできますね。
登録するときはDiscordにしましょう。ブラウザ上だと音声データがダウンロードできません。
Discord上で/generateの後にプロンプトを入れます。秒数を指定する場合は「他」をクリックしてdurationの後に生成したい秒数を入力します。
しばらくすると音声が何パターンか生成されます。気に入ったものを選び、ダウンロードすればOKです。
では、続いてはプレイ中のBGMを作成していきます。
今回は京都大学が作ったCREEVOを使いました。
歌声が入っていないものは、著作権や商用利用もクリアしています。
使い方も簡単です。歌詞を入力して、次へをクリックします。
操作のヒントを参考にしながら、読みがなを入れます。次へをクリックします。
あとはコード進行や楽器、テンポなどを自分好みにカスタマイズして、確定するをクリックするだけです。
完成したら、下記のように表示されますので、気に入ればダウンロードするだけです。
ただ途中でエラーになることも多いので根気強く粘る気持ちも大切です。
あとはこれらの完成した効果音とBGMを、ChatGPT-4oに聞きながらコードをカスタマイズしていきます。
最後にもう一度完成したゲームを掲載します。
