【Google AI Studio】インベーダーゲームを移植したら勝手にカッコよくなったりした話
NON STOPインベーダーレボリューション
これまで何回かにわたり、ビデオゲームのレジェンドである「インベーダーゲーム」をAIの力を借りて作ってきました。その経過については、本記事最期にまとめてありますので興味ある方はさかのぼってみてください。
で、最近、Google AI Studio環境が便利すぎることがわかりましたので、過去に作ったインベーダーゲームをGoogle AI Studio環境に移植してみることにしました。これまでの流れをまとめると次のようになります。
Pythonで作成
↓
JavaScriptに移植（プレイしたい方はこちら）
↓
Google AI Studioに移植
Google AI Studioへ移植した方法
JavaScript版のインベーダーゲームは1ファイルでしたので、これをGoogle AI Studioのプロンプトにぶち込んだだけです。Google AI Studioは、いわば、HTML＋JavaScript環境なので、これでいけました。さすがに1発で完璧なものはできませんでしたが、多少の調整で動作しました。
実際にできたのが次です。
画面に注目！
オリジナルのJavaScript版と比較すると、タイトルが追加されていたり、全体に緑色の枠がついていたり、下に操作説明があったりしますが、これは私が指示したものではなく勝手にGoogle AI Studioが装飾したものです。
じわりました。
なんか、ずるっとカッチョよくなってるー！（笑）
Google AI Studioは、HTMLも含めて総合的にバランスよく作成するので、こういうのはお手の物だし、こんなところまで面倒をみてくれるんですねー。複数人でお仕事をするとき予想以上の結果を返してくれる、いわゆる「できる人」ってのがいますが、そんなイメージ。デザインセンスなしでも生きていけそうに思えてきます。
で、この時点のファイルをダウンロードしてみたところ、次のようなファイル構成になっていました。
いっぱいファイルあるーっ！
これを自動生成してくれるのですから摩訶不思議なり。
音がついてないじゃん！
ここで、一つとても重要な問題に気づきました。
ゲームの臨場感を盛り上げる演出といえば効果音です！ 残念なことに、オリジナルのJavaScript版についていた効果音がありません・・・そりゃそうですがな。
だって音声ファイルをGoogle AI Studioに渡してないんですから！
そうだったそうだった。というわけで、音声ファイルのような付属ファイルをGoogle AI Studioに渡すことはできるのか聞いてみました。結果、
できないんだそうですわ！
これについては、ダウンロードしたファイル群にsoundsフォルダを作って、そこに音声ファイルを入れておけば、ローカル環境で動かしたりサーバー上で公開したとき、音声ファイルにアクセスできるようにしてもらいました。
以上によって、
効果音が鳴るようになったー！
ひとまず一件落着です。
もーっとゲームらしく仕上げてしまいたくなるのが性ですから
道具次第でやる気がでることってあるじゃあないですか。まさに、Google AI Studioという超優れものの道具は、やりたいことがあっという間に実現できる、まさしく魔法のアイテム。
その後も、あれやこれやしていたらバージョンがどんどん上がっていきました。最初からの内容を並べるとこんな感じです。
Ver.1 Google AI Studioに移植
Ver.2 サウンド追加
Ver.3 Escキーによるポーズ機能追加
Ver.4 デモ画面の作成
Ver.4.1 デモ画面でアニメーション。ついでに、インベーダーに色を指定。
「デモ画面」については、簡単なものではありますが、これがあるとないとでは印象がぜんぜん違います。つけてよかったデモ画面！
そしてVer.4.2はプレビュー環境でも音が鳴るのだった
音声ファイルについて、Google AI Studioのプレビュー環境にアップロードすることはできないとのことでしたが、やっぱりプレビュー環境でも鳴らしたい気持ちが残ります。そこで、
外部サーバーから読み込む方法
を試してみました。これには、次のような技術的条件をクリアーする必要があります。
CORS (Cross-Origin Resource Sharing) ポリシー:
音声ファイルが置かれている外部サーバーが、「他のウェブサイト（この場合はプレビュー環境）からのアクセスを許可する」という設定になっている必要があります。もしサーバー側でアクセスが許可されていない場合、ブラウザのセキュリティ機能が働き、音声の読み込みがブロックされてしまいます。HTTPS:
このプレビュー環境は安全な接続（HTTPS）で動作しています。そのため、読み込む音声ファイルも同様にHTTPSで提供されている必要があります。HTTPのURLからファイルを読み込もうとすると、「混合コンテンツ」としてブラウザにブロックされる可能性があります。
実際に、外部サーバーにある音声ファイルを使って音が鳴るかどうか組み込んでもらうことにしました。その結果、
問題なく鳴りました
音声ファイルを一元管理できるところが開発時に便利ですし、サーバー公開するときも、結局同じサーバー上にファイルがあるわけで、特別問題はないでしょう。というわけで次が現在の最新バージョンとなります。
Ver.4.2 音声ファイルを外部ファイルとして一元管理
今回の最新バージョンはこれになります。次のプレイランドにアクセスすれば、即プレイ可能です。Google AI StudioのシェアURLも公開しています。
《プレイランドはこちら》
使用：パソコン版。マウスのみで操作可能。
プレイ中画面
[Esc]キーによるポーズ画面
ゲームオーバー画面
シェアURLです。
うそ、マジ？ 開発時びっくりしたこと
Google AI Studioは本当に便利なのですが、1つ不可解なことがありました。それは、
プレビュー画面のコードとダウンロードしたコードが違ってた
場合があったことです。常識的に考えて、
プレビュー画面のコード ＝ ダウンロードしたコード
じゃあないですか？ ところが、プレビュー時の挙動と、ダウンロードしたファイルをブラウザで見たときの挙動が明らかに違っているのです。
そーんなことってある？
そこれについて、率直にGoogle AI Studioに聞いてみました。その回答が次です。
回答開始
プレビューしているバージョンと、ダウンロードしたバージョンで内容が異なっていた点について、ごもっともな疑問だと思います。おっしゃる通り、本来はプレビューとダウンロードの内容は完全に一致しているべきです。
結論から申し上げますと、プレビュー版とダウンロード版では、アプリケーションの「構造」が異なるために、以前のような差異が発生していました。
プレビュー版（開発環境）
プレビューでご覧いただいているのは、App.tsxやGame.tsx、useGameLogic.tsといった複数のファイルに機能が分割された、コンポーネント版のアプリです。これはモダンなWebアプリケーション開発の標準的な形で、各コンポーネントや機能（モジュール）が連携して動作します。
ダウンロード版（単一ファイル版）
一方、ダウンロードされるのは、単一のHTMLファイル (index.html) です。このファイルだけでアプリが完結するように、プレビュー版で使われている複数のファイル（Reactコンポーネントやゲームのロジックなど）のコードをすべてindex.htmlの中に埋め込んでいます。いわば、アプリ全体を一つのファイルに「パッケージ化」したものです。
なぜ差異が生まれたか
以前、デモ画面が表示されなかった問題は、この「パッケージ化」の過程で、デモ画面を表示するためのロジックがindex.htmlに正しく組み込まれていなかったために発生しました。
プレビュー版のソースコード（コンポーネント版）ではデモ画面が正しく実装されていたのですが、ダウンロード用の単一ファイル版にその変更が反映されていなかった、という状況です。
前回の修正で、その単一ファイル版にもデモ画面のロジックをしっかりと組み込みましたので、現在はプレビュー版とダウンロード版で同じ体験ができるようになっています。
ご指摘の通り、これは開発プロセスにおける注意不足が原因です。今後は、両方のバージョンで動作に差異が出ないよう、より注意深く開発を進めます。貴重なご指摘をありがとうございました。
回答終わり
そんなコトあるんだ？ あるのね！
確かに、開発途中で問題があり、その1つの対応として、単一ファイル化なる対応がされたことがあったのですが、とはいえ、プレビュー版とダウンロード版が異なるなんてことがありうることに驚きました。つまり、Google AI Studioは、そんな手加減ができるほどの権限をもっているということになります。
あれ？ ダウンロードしたコードがなんか変だぞ
という状況になったときのために、こんなこともあるんだなと頭の片隅に記憶しておくといいかもです。
以上。
本件に関する過去記事はこちら
初めてインベーダーゲームのPythonプログラムを作った記事。
PythonをJavaScriptのコードに移植した記事。
それなりにゲームらしく仕上げた記事。
