Geminiと落ち物パズルゲーム開発
これまでGoogleの生成AI「Gemini」と共に、様々なバージョンのゲーム開発に挑戦してきました。本記事ではその一環として、某有名パズルゲームのオマージュ作Bubbleena Cappuccina (バレリーナカプチーナを捩ったバブリーナカプチーナ)の開発記録をご紹介します。
この記事の目次
- 開発コンセプトと目標
- Geminiとの開発プロセス
- 実装された機能の概要
- 開発を通じて得た知見
- まとめ
開発コンセプトと目標
これまでの開発でゲームの基本的なシステムは固まってきたため、今回はゲームの外側に目を向けた機能改善を目標としました。ちなみにTypeCで予定していた投擲ゲームは内容を凝りすぎてしまい保留することにしました。前後しましたが先にTypeDの完成を進めましたのでご了承ください。
- ジャンル：落ち物の某系有名パズルゲーム風
- 目標：ゲームをSNSなどでシェアした際に、魅力的な画像が表示されるようにOGP（Open Graph Protocol）設定を実装する。
- 役割分担：AIはコード生成、人間は仕様定義・テスト・指示を担当。
Geminiとの開発プロセス
1. 初期プロジェクトの苦悩と試行錯誤
TypeDの開発はスムーズでしたが、このゲームシリーズの開発初期段階では、いくつかの大きな壁に直面しました。特に苦労したのは、端末毎（特にスマホで大きな画像を自動で圧縮して動作を軽くする作業）に外部サーバーから画像を読み込む際に発生する**「CORSエラー」**でした。ブラウザのセキュリティポリシーにより、ゲーム内でキャラクター画像が全く表示されない問題が多発し、解決に多くの時間を費やしました。最終的にCORSプロキシを経由させることでこの問題を回避しましたが、Web開発特有の難しさを痛感した経験です。
また、Matter.js物理エンジンのパラメータ調整も悩みの種でした。バブルが思ったように弾まなかったり、不自然に滑り続けたりと、理想の挙動を実現するためにAIと何度も対話したり実機でデバッグメニューを活用して数値を微調整したり地道な調整を繰り返す必要がありました。途中で多分本家のようにする事もできましたがあえて？ちょっと自分なりの感覚を加えたりバグを少し残してみたりしましたが結局本家の挙動に近づける事で落ち着きました。いややっぱり少しバグをお楽しみ要素としてあえて残してみました。
2. プロジェクトの定義
これらの初期の経験から、AIとの開発では「現在の状況を正確に共有すること」の重要性を学びました。そこで今回もまず、Geminiが簡単な指示も理解できなくなったり明らかに勘違いした回答をしだして調子悪いと感じたらすぐに何度も新しい会話をスタートしTypeDを構成する安定してた状態の全てのソースコードをGeminiに添付し、「これはTypeDのプロジェクトコードです」と明確に伝えることからスタートしました。これにより、その後の指示が的確に反映される土台を築きます。
3. アイキャッチ画像（OGP）の実装
今回の開発の核となる部分です。SNSでゲームのURLを共有した際に、設定した画像（アイキャッチ）が表示されるようにAIに依頼しました。
・問題：ゲームオーバーのカウントダウン中に、次のバブルを重ねて発射すると、下のバブルをすり抜けてしまう。
AIの最初の提案：「カウントダウン中はカウントダウンが終わるまで操作不能にする」というルール変更を提案。しかし、これでは本末転倒、カウントダウンはせっかくスリルを楽しむ要素なのに操作不能にされたらゲームオーバーを待つだけの意味のわからない機能と判断し「ゲームのルールが壊滅する」と回答。
プロンプト例：
「発射前の待機中バブルの衝突判定がセンサー状態の時に落下済みのバブルとの重なりは検知できる？」と伝える事でAIが狙い通りの道筋へ進んでくれて
Geminiの答え：
「発射前にバブルが重なってるのかを検知し、発射するバブルの位置を接触中の既存バブルの少し上の位置を計算し発射するという自動補正するロジックを実装します。」と提案してくれました、これでゲーム性を損なうことなく不具合のみを解消でき、狙った挙動へ導く質問がうまくいったかな、AIを正しい解決策へ導いた好例？と言えるかも。
実装された機能の概要
今回の開発（TypeD）で実装された主な機能は以下の通りです。
- SNSシェア対応（OGP設定）
index.htmlの<head>タグ内にOGP関連のメタタグを追加。これにより、X（旧Twitter）やLINEなどでゲームのURLをシェアした際に、指定したアイキャッチ画像が自動的に表示されるようになりました。
開発を通じて得た知見
- Webページのメタ情報もAIで効率化 ゲームロジックが記述されたJavaScriptファイルだけでなく、Webページ全体の体裁を整える
index.htmlのメタ情報（<head>タグ内の情報）も、AIへの指示で迅速かつ正確に編集できることが確認できました。これにより、SEO対策やSNS対応といった作業も開発フローに組み込みやすくなります。 - プロジェクトの全体共有はやはり有効 実は今回の開発は過去に私が遊びで作っていたゲームをベールにしました。最初に全ソースコードをAIに渡し改良したのでゲーム部分はスムーズな実装が可能でデザインやUIの挙動に主な時間を費やしました。この手法は、今回のような小規模な修正でも非常に有効でした。
- 具体的な情報提供が品質を上げる 例えば「アイキャッチを設定したい」という抽象的な要望に、「このURLの画像を使ってアイキャッチを設定したい」という具体的な情報を加えるだけで、手戻りのない一発でのコード生成が実現できました。他にも簡単な修正や画像の変更等を伝える時にもなるべく詳しい情報を伝えました。AIとの協業では、人間側が明確な情報を提供することが、開発スピードと品質の向上に直結すると感じました。
広告表示機能の実装 今後の開発やサーバー維持費を視野に入れ、収益化への第一歩として広告機能を導入しました。index.htmlに広告配信用スクリプトを設置し、ゲーム画面下部にバナー広告が表示されるようにしています。
UI/UXの大規模改修とアニメーション実装
ゲームの「顔」であるタイトル画面を中心に、大規模なUI改修を行いました。
- レイアウト変更：スタートボタンを大きく目立つ水色にし、単独で配置。「あそびかた」ボタンを追加し、シェアボタンを一段下げるなど、視覚的な優先度を整理しました。
- 「あそびかた」画面の実装：進化の順番、TIPS、プライバシーポリシーをまとめたモーダルウィンドウを新規作成。スクロール可能にすることで、情報量が多くなっても問題ないように設計しました。
- 多言語対応（ローカライズ）：全てのボタンテキストや説明文を、日本語と英語の両方に対応させました。
config.jsにテキストを一元管理し、ui-manager.jsで動的に表示を切り替える仕組みを構築しました。 - 画面遷移アニメーション：味気ない画面切り替えを改善するため、「タイトル画面が上にスライドし、ゲーム画面が下から現れる」「設定画面は左から、遊び方画面は右からスライドインする」といったリッチなアニメーションをCSSで実装しました。
まとめと今後の展望
今回の共同開発では、既存のプロトタイプに対して、デバッグ、ゲーム演出の変更、そして大規模なUI/UX改修と、多岐にわたる改善を行いました。特に、AIの提案を鵜呑みにするのではなく、対話を通じてより良い解決策を模索するプロセスは、非常に有益でした。
この『TypeD』の改修で得た知見を活かし、次回作『TypeC』（ステージ自作機能付き投擲ゲーム）、そしてその先の**『TypeE』の開発**へと、この冒険は続いていきます。
No responses yet