The Playable Demo Assembly

What you’re building

This is the lesson where everything comes together.

You have spent the last nine lessons building individual systems. A combat loop with melee timing and dodge windows. A movement and camera system with jump curves and acceleration. Enemy behaviors with state machines and telegraphs. Visual effects with particles, screen shake, and hit flash. A HUD with blood health, rage, and inventory. A dialogue system with branching choices and objectives. A level editor. A test harness. Each one works. None of them talk to each other.

That changes now. The AI CLI is going to take the best parts of each prototype and stitch them into a single, cohesive, playable 2-minute demo. One project. One game. Title screen, mission briefing, traversal, combat encounters, a boss fight, and a victory screen.

This is THE artifact. The thing you show an investor, a publisher, a Kickstarter audience, or yourself in the mirror when you wonder if you can actually do this. It is not a finished game. It is proof that the game can exist — and that you built it.

ℹSoftware pattern: System integration and scene orchestration

Multiple independent modules wired into a unified application with a linear flow (title, briefing, gameplay, victory). This is the same pattern as assembling microservices into a product, combining UI components into a full page, or stitching API endpoints into a working application. Integration is where prototypes become products.

The showcase

Here is the complete demo experience, from launch to credits:

Title screen: Dark background, game title “CRIMSON LEGACY” (or your chosen working name) in large stylized text, “A BloodRayne-Inspired Prototype” subtitle, “PRESS ENTER TO START” prompt. Lora Studios credit at the bottom.
Mission briefing: Dialogue scene. Commander Wulf briefs Rayne on the mission. One branching choice (stealth vs. assault approach) that sets the first objective.
Level traversal: The player navigates a horizontally scrolling level designed in the editor format — ground platforms, walls, gaps to jump, one hazard pit. Enemies patrol the path. The HUD is live: blood health, rage meter, weapon indicator.
Combat encounters: 3-4 groups of enemies placed along the level. Basic enemies in the first group, a mix of basic and fast in the second, a heavy enemy guarding a door in the third. Combat uses the melee/dodge/feed mechanics from L10-L12. VFX from L13 trigger on hits.
Pickup items: Health potions and ammo boxes scattered through the level. Collecting them updates the inventory. The player can open inventory (I key) and use items.
Boss encounter: End of the level. A larger, harder enemy with more health, a unique attack pattern (charge + slam), and a visible health bar above their head. Defeating the boss triggers the objective “Eliminate the target.”
Victory screen: Dark background, “MISSION COMPLETE” in large text, stats summary (time, enemies defeated, health remaining, items used), and “Thank you for playing the prototype” message. “PRESS ENTER TO RETURN TO TITLE” prompt.

Total play time: approximately 2 minutes for an experienced player, 3-4 minutes for a first-timer. That is the sweet spot for a prototype demo.

The prompt

This is the integration prompt. It is longer than previous lessons because it needs to describe how all the systems connect. Open your terminal, navigate to a fresh project folder, start your AI CLI tool, and paste this prompt:

Build a complete 2-minute playable Phaser 3 demo that integrates combat,
movement, visual effects, HUD, and dialogue into one cohesive game.
This is a BloodRayne-inspired action platformer prototype.

PROJECT STRUCTURE:
playable-demo/
  package.json
  index.html
  src/
    main.js               (Phaser config with all scenes)
    scenes/
      TitleScene.js        (title screen)
      BriefingScene.js     (mission briefing dialogue)
      GameScene.js         (main gameplay — combat, movement, level)
      BossScene.js         (boss encounter — extends GameScene logic)
      VictoryScene.js      (victory stats screen)
    systems/
      Player.js            (player entity — movement, combat, feed, dodge)
      Enemy.js             (enemy entity — basic, fast, heavy types)
      Boss.js              (boss entity — charge, slam, health bar)
      Combat.js            (melee timing, hitboxes, damage, dodge window)
      HUD.js               (Phaser scene — health, rage, weapon, minimap)
      Inventory.js         (inventory overlay — 4x4 grid, item use)
      Dialogue.js          (dialogue overlay — typewriter text, choices)
      VFX.js               (particles, screen shake, hit flash, death burst)
      SaveManager.js       (localStorage save/load)
    state.js               (shared game state)
  data/
    briefing.json          (mission briefing dialogue tree)
    level1.json            (level layout — ground, walls, platforms, spawns)
    objectives.json        (chapter objectives)
  public/
    (empty — Vite serves from root)

REQUIREMENTS:

1. TITLE SCENE (src/scenes/TitleScene.js)
   - Background: #09090b
   - Title: "CRIMSON LEGACY" in 48px white bold text, centered horizontally,
     upper third of screen. Add a subtle red glow/shadow effect (#dc2626, 4px blur)
   - Subtitle: "A BloodRayne-Inspired Prototype" in 16px gray (#9ca3af) text,
     below the title
   - "PRESS ENTER TO START" in 20px white text, center screen, pulsing opacity
     (0.4 to 1.0, 1.5 second cycle)
   - "Lora Studios" in 12px gray text, bottom center
   - ENTER key: transition to BriefingScene
   - Background: subtle animated particle effect — slow-falling red particles
     (like blood motes) to set the mood

2. BRIEFING SCENE (src/scenes/BriefingScene.js)
   - Load and play briefing.json dialogue tree
   - Use the Dialogue system for typewriter text, portraits, and choice buttons
   - After dialogue ends: transition to GameScene
   - Set the chosen objective in state (stealth or assault path)
   - Auto-save after briefing completes

3. GAME SCENE (src/scenes/GameScene.js)
   The main gameplay level:

   a. LEVEL LOADING
      - Load level1.json (editor format from L17)
      - Create static physics bodies for ground and wall tiles
      - Create one-way platforms for platform tiles
      - Create damage zones for hazard tiles
      - Spawn enemies at spawn positions from the JSON
      - Place pickups at predefined positions

   b. LEVEL DESIGN (level1.json)
      - Grid: 80x19 tiles (2560x608 pixels) — horizontally scrolling
      - Ground floor across most of the bottom row
      - 3 platform sections at varying heights
      - 2 wall barriers the player must jump over or find a path around
      - 1 hazard pit (3 tiles wide) requiring a jump
      - Enemy spawns: 4 basic enemies in first third, 2 basic + 2 fast
        in middle, 1 heavy enemy in final third
      - Pickup spawns: 2 health potions, 1 ammo box, 1 rage crystal
      - Player spawn: left edge (tile 2, bottom row)
      - Boss trigger zone: right edge (tile 75)

   c. PLAYER (src/systems/Player.js)
      - 32x32 purple rectangle (#8B5CF6)
      - WASD movement: 200px/s horizontal, gravity 600
      - Jump: W or SPACE, 400 velocity, coyote time 100ms
      - Dash/dodge: SHIFT, 300px burst, 0.3s invincibility, 1s cooldown
      - Melee attack: left click or J, 32px range, 10 damage, 0.4s cooldown
      - Ranged attack: right click or K, fires projectile, uses 1 ammo
      - Feed: F key when within 40px of enemy, restores 20 health, adds 10 rage
      - Rage mode: R when rage >= 100, 2x damage for 5 seconds
      - Weapon swap: Q toggles blade/gun
      - Takes damage on enemy contact (brief invincibility after hit)
      - Death: health <= 0, brief animation, restart from last checkpoint

   d. ENEMIES (src/systems/Enemy.js)
      - Basic: 30hp, red 24x24, patrols 100px back-and-forth, 10 contact damage
      - Fast: 20hp, orange 20x20, patrols 200px, charges player when within 150px
      - Heavy: 80hp, dark red 40x40, stationary, attacks when player within 60px
      - All enemies: death burst VFX on defeat, add 5 rage per hit, +1 enemiesDefeated

   e. CAMERA
      - Follow player with lerp 0.1 for smooth tracking
      - Bounded to level dimensions (no scrolling past edges)
      - Brief shake on player damage (2px, 100ms)

   f. CHECKPOINTS
      - 2 invisible checkpoint zones at tiles 25 and 55
      - Walking through a checkpoint auto-saves and sets respawn point
      - Death respawns at last checkpoint with full health (enemies do NOT reset)

   g. BOSS TRIGGER
      - Walking past tile 75 triggers transition to BossScene
      - Brief "camera lock" moment: camera stops following, UI text
        "FACILITY COMMANDER" appears, dramatic pause, then boss appears

4. BOSS SCENE (src/scenes/BossScene.js)
   Contained boss arena:
   - 400x608 arena (locked camera, no scrolling)
   - Boss entity: 64x64 dark red rectangle, 200 health
   - Boss health bar: wide bar above the boss, visible at all times
   - Boss attacks:
     - Charge: rushes toward player position, deals 25 damage on hit
     - Slam: jumps to player's X position, lands with shockwave (160px radius, 15 damage)
     - Pattern: charge, pause 1.5s, slam, pause 2s, repeat
   - Boss telegraphs: brief flash before charge (0.3s), shadow on ground before slam
   - Player has full moveset available
   - Defeating boss: explosion VFX, "TARGET ELIMINATED" text, 2-second pause,
     mark objective complete, transition to VictoryScene
   - If player dies: restart BossScene with full health (boss keeps current health
     for fairness)

5. VICTORY SCENE (src/scenes/VictoryScene.js)
   - Background: #09090b
   - "MISSION COMPLETE" in 40px white text with green glow (#22c55e), centered
   - Stats panel (centered, 400px wide):
     - Time played: MM:SS
     - Enemies defeated: X / Y total
     - Health remaining: X%
     - Items used: X
     - Approach chosen: Stealth / Assault (from briefing choice)
   - "Thank you for playing the CRIMSON LEGACY prototype" in 16px gray text
   - "Built by Lora using AI CLI tools" in 12px gray text
   - "PRESS ENTER TO RETURN TO TITLE" prompt, pulsing
   - ENTER: transition back to TitleScene (with state reset)
   - Save completion data to localStorage

6. HUD SYSTEM (src/systems/HUD.js)
   Parallel scene overlay (from L15):
   - Blood health bar: top-left, red gradient, pulses below 30%
   - Rage meter: below health, purple fill, glows when full
   - Weapon indicator: bottom-left, weapon name + ammo
   - Minimap: top-right, shows level progress as a horizontal bar
     (player position / level width)
   - Notification area: top-center, pickup and objective notifications

7. VFX SYSTEM (src/systems/VFX.js)
   Visual effects integrated from L13:
   - Hit flash: enemy blinks white for 100ms on damage
   - Screen shake: camera shake on player damage and boss attacks
   - Particles: blood-red burst on enemy death (8-12 particles, fade out)
   - Boss death: large explosion particle burst (20+ particles, multiple colors)
   - Dodge trail: brief purple afterimage during dash

8. DIALOGUE TREE (data/briefing.json)
   Mission briefing with one branching choice:
   - Commander Wulf explains the mission (infiltrate facility)
   - Rayne responds
   - Choice: "I'll go in quiet" (sets stealth objective) or
     "They'll know I'm coming" (sets assault objective)
   - Commander's response varies by choice
   - End node triggers save and scene transition

9. INVENTORY (src/systems/Inventory.js)
   Simplified from L15:
   - I key toggles 4x4 grid overlay
   - Items collected from pickups populate slots
   - Click to use: health potion (restore 25 hp), rage crystal (add 30 rage),
     ammo box (restore 15 ammo)
   - Not available during boss fight or briefing

DEPENDENCIES: phaser (^3.80), vite
Dev script: "vite"
HTML background: #09090b
Canvas: 800x600

💡This is the integration prompt

This prompt references systems from five previous lessons. The AI CLI does not need to see those projects — the prompt describes what each system does and how they connect. The prompt IS the integration spec. It tells the AI what exists, what it needs to build, and how the pieces wire together. That is why it is detailed.

What you get

After generation (this one may take 90-120 seconds due to the size):

playable-demo/
  package.json
  index.html
  src/
    main.js
    scenes/
      TitleScene.js
      BriefingScene.js
      GameScene.js
      BossScene.js
      VictoryScene.js
    systems/
      Player.js
      Enemy.js
      Boss.js
      Combat.js
      HUD.js
      Inventory.js
      Dialogue.js
      VFX.js
      SaveManager.js
    state.js
  data/
    briefing.json
    level1.json
    objectives.json

Fire it up

cd playable-demo
npm install
npm run dev

Open the URL. You should see the title screen: “CRIMSON LEGACY” with red glow, floating blood-mote particles, and the pulsing “PRESS ENTER TO START” prompt.

Press Enter. Commander Wulf’s briefing plays with typewriter text. Make your choice. The game starts. You are on the left side of a scrolling level with a full HUD. Walk right. Fight enemies. Dodge attacks. Feed for health. Collect items. Reach the boss. Defeat the boss. Watch the victory screen with your stats.

That is a playable game prototype. Built from prompts.

If something is off

Problem	Follow-up prompt
Scene transitions crash	`Transitioning from BriefingScene to GameScene crashes with "Cannot read properties of undefined." Make sure each scene is properly registered in the Phaser config's scene array in main.js, and that this.scene.start('GameScene') uses the exact key string matching the scene class name or the key passed to the constructor.`
Level does not scroll	`The level is 2560px wide but the camera stays fixed. Make sure GameScene sets the physics world bounds to the full level size with this.physics.world.setBounds(0, 0, 2560, 608) and the camera follows the player with this.cameras.main.startFollow(player, true, 0.1, 0.1). Also set camera bounds with this.cameras.main.setBounds(0, 0, 2560, 608).`
HUD scene does not appear over gameplay	`The HUD is not visible during gameplay. Make sure GameScene launches the HUD as a parallel scene with this.scene.launch('HUDScene') in its create() method, and that HUDScene is configured with its own camera that ignores the game world scroll.`
Boss fight has no transition	`Walking to the right edge of the level does nothing. Make sure there is an invisible trigger zone at tile 75 (x = 75 * 32 = 2400) that detects player overlap and calls this.scene.start('BossScene'). The trigger should be a physics body with overlap detection, not a collision.`
VFX are missing	`Combat works but there are no particles or screen shake. Make sure VFX.js is imported into GameScene and BossScene, and that the hit, death, and shake methods are called from the combat damage functions. Check that particle emitters are created in the scene's create() method and triggered with emitter.explode() or emitter.start() on events.`

Deep dive

The integration work is the real lesson here. Individual systems are straightforward. Wiring them together is where complexity lives.

Scene flow as a state machine. The demo has five scenes in a linear flow: Title, Briefing, Game, Boss, Victory. Each scene knows its exit condition and which scene comes next. This is a finite state machine — the simplest and most reliable way to manage application flow. Games, wizards, checkout flows, and onboarding sequences all use this pattern.

Shared state bridges scenes. The state.js object persists across scene transitions. When the briefing sets an objective, the HUD scene reads it. When the player collects an item in GameScene, the inventory in the HUD reflects it. When the boss fight ends, VictoryScene reads the final stats. One object, read by many consumers, written by the active scene.

The level JSON drives gameplay. The level layout comes from a JSON file in the exact format your L17 editor exports. GameScene reads it, creates physics bodies for each tile type, and spawns enemies at marked positions. If you redesign the level in the editor, export new JSON, and drop it in the data folder, the demo plays the new level with zero code changes.

The boss fight is a separate scene. This is a deliberate design choice. The boss arena has a locked camera, unique mechanics, and its own difficulty tuning. Making it a separate scene means you can restart it independently (player dies in boss fight, restart boss fight, not the whole level) and test it in isolation.

🔍Why 2 minutes is the right demo length

Two minutes is not arbitrary. It is the length at which you can:

Show the complete gameplay loop (move, fight, heal, use items, face a boss)
Hold a viewer’s attention in a pitch meeting or trailer
Complete a Kickstarter demo video without the audience losing interest
Playtest in under 5 minutes including restarts

Longer demos dilute the experience. Shorter demos cannot show enough variety. The goal is not “show everything you built.” The goal is “prove the game works and is fun in the minimum viable time.” Two minutes does that.

Customize it

Add a second level

Create a level2.json for a vertical climbing section. The level is
19x40 tiles (608x1280, scrolls vertically). Platforms zigzag upward.
Hazards on the sides. Enemies on platforms. Exit at the top. Add a
level transition in GameScene: when the player reaches the exit in
level 1, load level 2. The camera should switch from horizontal to
vertical following.

Add a death screen with retry

When the player dies, instead of immediately respawning, show a brief
"YOU DIED" screen (dark overlay, red text, 1.5 seconds) with options:
"Retry from checkpoint" or "Restart level." Track death count in
state and display it on the victory screen. This gives death weight
without being punishing.

Add background music cues

Add a simple audio system using Phaser's sound manager. Play a looping
ambient track during gameplay (use a royalty-free placeholder or
generate a short loop with an audio AI tool). Switch to a more intense
track during the boss fight. Play a victory jingle on the win screen.
Use volume ducking during dialogue (lower music to 30% while text
is playing).

Try it yourself

Paste the main prompt and generate the project.
Run npm install && npm run dev and play through the entire demo from title to victory.
Pay attention to the transitions between scenes. Are they smooth? Does the dialogue flow into gameplay naturally?
Die on purpose at the boss fight. Does the retry work? Is the experience fair?
Play through a second time and make the other briefing choice. Does the objective tracker reflect the different path?
Screenshot or screen-record a full playthrough. This is your prototype demo reel. It is the artifact you show people.
If you built levels in L17, swap out level1.json with one of your exported levels. The game should play the new layout without any code changes.

Key takeaways

Integration is the hardest step. Individual systems are easy. Wiring five systems into one cohesive experience is where complexity and bugs live. The AI CLI handles the wiring; you handle the vision.
Scene flow creates narrative structure. Title, briefing, gameplay, boss, victory. That arc turns a collection of mechanics into an experience with a beginning, middle, and end.
Shared state is the glue. One state object connects scenes that never directly reference each other. The briefing sets objectives, the HUD reads them, the victory screen summarizes them.
JSON-driven levels mean the content is separate from the code. Redesign the level, export new JSON, drop it in. Zero code changes. That separation is what makes iteration fast.
This is a shippable artifact. Not a finished game — a proof of concept that demonstrates the full loop. It is what you show an investor, a publisher, a crowdfunding audience, or yourself.

💡You built a game from prompts

Stop and appreciate what just happened. You described systems in plain English. An AI built them. You described how they connect. The AI wired them together. The result is a playable game prototype that demonstrates combat, movement, a HUD, dialogue, inventory, a boss fight, and a victory screen. Nine lessons ago you had a bouncing purple rectangle. Now you have a demo. That trajectory is the entire argument for AI CLI tools.

What’s next

You have the prototype. Now you need to decide what to do with it. In the final lesson you will build Lora’s Command Center — a unified dashboard that brings together everything from this entire module: your IP research, market analysis, financial runway, prototype status, and a crowdfunding kit. It includes a go/no-go decision tool that integrates all the data into a recommendation. The Command Center is where the research, the money, and the game converge into a single actionable view.

What you'll learn