Imagine drawing a stick figure on a napkin, scanning it, and instantly playing it as a video game character. This isn't sci-fi anymore—it's Genie 3.
In this tutorial, we will walk you through creating a simple 2D platformer game using Google Genie 3. But we won't stop at the basics; we'll dive into advanced Physics Prompt Engineering to fine-tune how your world feels.
Prerequisites
- Genie 3 Access: You need an API key or access through a partner platform like GenieAI-Online.
- An Idea: A sketch, an image, or just a text description.
Step 1: The Initial Frame (Image-to-World)
Genie 3 needs a starting point. This is called the "seed frame."
You can upload a sketch you drew:
[Insert Image: A rough pencil sketch of a castle level]
Or use a text prompt to generate it:
Prompt: "A 16-bit pixel art style forest level with floating platforms, vines, and a small blue slime character on the left."
Genie 3 will generate a high-resolution initial state for your world.
Step 2: Defining the Action Space
This is where the magic happens. Unlike a video, a game needs controls. Genie 3 has a latent action model that understands movement.
You simply send a JSON configuration to the API defining the available actions:
{
"actions": [
{ "name": "jump", "token_id": 42 },
{ "name": "move_left", "token_id": 15 },
{ "name": "move_right", "token_id": 16 },
{ "name": "crouch", "token_id": 99 }
]
}Step 3: Physics Prompt Engineering
This is the advanced part. You can control the "feel" of the game by prepending a System Prompt to the Genie context.
Scenario A: "Moon Gravity"
System Prompt: "The environment is a low-gravity lunar surface. Objects fall slowly. Jumping height is 3x normal. Friction is low."
Scenario B: "Ice Level"
System Prompt: "The ground is slippery ice. Characters maintain momentum when stopping. Acceleration is slow."
Genie 3 reads these semantic instructions and adjusts its latent video prediction to match the described physics.
Step 4: Generating the Gameplay Loop
Now, you initiate the simulation loop.
- Input: You press the "Right Arrow" key.
- Processing: We send the current frame + "Move Right" token to Genie 3.
- Output: Genie 3 returns the next frame.
This happens 30 times per second. To reduce latency, use the Stream endpoint, which sends delta updates rather than full frames.
Step 5: Integrating Game Logic (The "Hybrid" Approach)
Genie 3 is a visual engine, not a logic engine. It doesn't inherently know that "touching a spike kills you." You need to wrap Genie in a lightweight logic layer.
Here is a pseudo-code example of how to detect a "Game Over":
// A lightweight vision model (like MobileNet) runs on the client
function checkState(frame) {
if (visionModel.detectObject(frame, 'spike_collision')) {
triggerGameOver();
}
if (visionModel.detectObject(frame, 'coin')) {
incrementScore();
// Tell Genie to remove the coin in the next frame
genie.sendContextUpdate({ remove_object_at: [x, y] });
}
}Tips for Better Stability
- Keep Backgrounds Simple: Complex, moving backgrounds can sometimes confuse the model about what is "solid" ground.
- Character Distinctiveness: Make sure your main character has a high contrast color compared to the environment.
- Asset Consistency: If your character changes clothes randomly, add a "Character Sheet" image to the context window to lock their appearance.
Conclusion
You just built a playable game prototype in under 5 minutes. While Genie 3 won't replace Unity or Unreal Engine for AAA games just yet, it completely democratizes game prototyping.
Ready to try it? Head over to our Genie 3 Playground and start creating.
