Gemini3リリース！
なにやらGemini3がリリースされたらしい。フロントエンド周りのUI設計に強いらしい。専門はバックエンドだしあんまり関係ないかなー。
...え、single prompt（一回のプロンプト）でゲーム作れちゃうの！？
ということで、Gemini3を使って本当にゲームが作れるか検証してみた
手順
1. Google AI Studioにアクセス
下記からアクセス
https://aistudio.google.com/
2. Buildを選択
左の一覧から"Build"を選択
3. モデルに"Gemini 3 Pro Preview"を選択
デフォルトでGemini 3が有効になっているはず。
4. プロンプトを投入
これが一番難しい。元の動画では次のような長いプロンプトを投入している。
___
Prompt: ""Create a polished, retro-futuristic 3D spaceship web game contained entirely within a single HTML file using Three.js. The game should feature a """"Synthwave/Retrowave"""" aesthetic with the following specifications:
1. Visual Style & Atmosphere
*Aesthetic:* Dark, immersive 3D environment with a glowing, volumetric neon look. Use a color palette of deep purples, hot pinks, and electric cyans.
*Post-Processing:* You must implement Three.js `EffectComposer` with `UnrealBloomPass` to make the neon elements glow intensely.
*Environment:*
A dense, moving starfield background with rich features. Go beyond simple plane shapes here and apply shaders to make the game visually appealing. For example, simulating retro astra, stars, and planets in the background.
Distance fog to fade distant objects smoothly into the darkness.
*Assets:* Use complex geometric primitives constructed programmatically (no external model imports).
2. Gameplay Mechanics
*Perspective:* Third-person view from behind the spaceship.
*Core Loop:* The player pilots the ship on the X and Y axis (2D plane) while enemies (neon blocks) spawn in the distance and fly toward the camera along the Z-axis.
*Combat:*
The player shoots laser bolts (glowing lines) to destroy enemies.
*Collision:* When a laser hits a block, the block should shatter into a very complex particle explosion effect.
*Game Over:* If a block hits the ship, the game ends.
*UI:* A minimal HUD displaying the current Score. A """"Game Over"""" overlay with a """"Restart"""" button.
3. Controls (Cross-Platform)
The game must detect the device type or input method:
*Desktop/Web:*
Use *Arrow Keys* or *WASD* for smooth movement (apply `lerp` or friction for a floaty, drift-like spaceship feel).
Use *Spacebar* to fire.
*Mobile/Touch:*
Render a semi-transparent *Virtual Joystick* on the bottom-left of the screen (using HTML/CSS or Canvas API) to map touch movement to ship coordinates.
Detect a *Tap* anywhere on the right side of the screen to fire lasers.
4. Technical Constraints
*Single File:* All HTML, CSS, and JavaScript (including the Three.js library and post-processing shaders imported via CDN) must be in one `index.html` file. Do not output any other text other than the html response.
*Performance:* Use object pooling for lasers and particles to ensure 60FPS performance.
*Responsiveness:* The canvas must resize dynamically to fit any screen size without stretching the aspect ratio.""
___
このあたりを抑える必要があるようだ。
- 基本情報・概要
- ビジュアル・スタイル要件
- ゲームプレイ・メカニクス
- 操作・コントロール
- 追加要件・特殊指定
細かい修正は後からにして、ざっくりなイメージを伝えてアプリ生成。
5. アプリ起動！
Google AI Studio内でビルドされてプレビューができる。
※後に触れるがとても重たい。
おお、タイトルはそれっぽい。ゲームスタート。
これは弾幕シューティングゲームだ！
ビルドエラーもなく、一発でイメージ通りのゲームの生成に成功しました。
しかも背景やエフェクトなど細かいビジュアルのクオリティも高い。
ゲームのプロトタイプとして十分すぎる。。
中身を見るとReactで作られているよう。ほかのデモアプリも全部Reactでした。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
if (!rootElement) {
throw new Error("Could not find root element to mount to");
}
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
まとめ
- 本当に一回のプロンプトでゲームが作れた
- しかもビジュアルも結構凝っていてクオリティが高い
- ゲームやフロント画面のプロトタイプ開発としてGemini3は非常に強力
- ただGoogle AI Studioのプレビューはかなり重い。デモアプリをしっかり動かしたい人はローカルに落としてビルド＆デプロイしてください。
おまけ
このあと何度かGoogleAIStudioと対話してボス戦まで作りこんでみました。
ここからブラウザでプレイできます。
https://geekman4040.itch.io/danmaku-proto