First Person Arena

capstone lesson Intermediate ⏱ 15 min vgai 0.1.0

Prerequisites: Foundations · Manual — Input (pointer lock), Physics

What you'll learn

• Run the First Person Arena and understand its complete combat loop
• See how one Player component owns movement, weapons, pickups, respawn, feedback, and deterministic presentation modes
• Inspect animated seed-derived Redline enemies and the comprehensive React HUD story document

What you'll build: A premium first-person arena starter with a complete, inspectable gameplay and UI foundation.

Walkthrough — First Person Arena · generated by site/media/lessons/capstone-fps.lesson.ts (5 steps)

The first-person project is a premium starter rather than a mechanics test. Its bright sky, subtle construction grid, multi-level arena, seed-derived Redline enemies, weapon pickups, jump pads, combat feedback, and complete HUD establish the presentation bar every shipped example must meet.

Open this scene in the hosted editor

Open it in your browser — no install: ▶ Open the FPS scene. The deep-link loads the scene, and you can press Play to run it right there (WASD movement + jump work in-browser). Click the game view to capture the pointer, then click to fire; the same fire input action is also available to gamepad and automation through the engine input map.

Run it

1. Open the authored project. Run vgai edit examples/first-person from the repository root.

   

   The FPS arena.

2. Enter play mode. Press Play to boot the runtime.

   

   Play mode.

3. Focus the viewport and look around. Clicking the canvas focuses the live game surface; mouse movement then drives the first-person camera. Standalone play also requests pointer lock (Esc releases it), while the embedded editor keeps look input usable if the browser declines the lock request.

   

   Live mouse-look in the editor viewport.

4. Fight through the arena loop. Fire the pistol, collect the rifle and grenade launcher, use jump pads to change elevation, and read hit, damage, ammo, score, pause, and respawn state through the live React HUD.

   

   A hitscan shot with a pooled impact mark.

5. Stop play mode. Press Stop (or Escape) to return to editing.

How it works

<Player> renders PlayerRig and owns the complete player loop: mouse/gamepad look, movement, three weapon inventories, pickups, recoil, effects, damage, death, respawn, audio cues, debug state, and deterministic presentation commands. It moves as a kinematic capsule driven by Rapier’s character controller, so ramps, step-ups and cover come from colliders generated out of the arena’s own boxGeometry — the level is described once, in world.tsx, and nothing has to keep a second description of it in sync. Four <Enemy> components move, aim, fire, take damage, respawn, and bind retargeted Mixamo-family clips through XState animation. The HUD is split into a pure ArenaHud page and a thin live connector; its portable Storybook document authors twelve named states, including critical health, empty magazine, hit confirmation, pause, respawn, and overtime stress.

Pointer lock

Pointer lock is requested on click and read each frame via the input manager’s mouse delta — see Input.

Recap

New functionality

• Ran the premium arena
• Fought animated enemies with multiple weapons
• Inspected live and authored HUD states

New concepts & skills

• One focused player component can own a complete starter loop
• Enemy aim and weapon animation are mixed through XState
• Every React root ships meaningful Storybook states

Next lesson → Capstones

See also

• Input · Physics: rigid bodies
• Capstones