Run & understand the third-person character

capstone lesson Intermediate ⏱ 20 min vgai 0.1.0

Prerequisites: Foundations (GameComponent lifecycle, phases) · Manual — Physics, Animation, Input

What you'll learn

• Run the third-person character in play mode and control it
• Understand how a Rapier Kinematic Character Controller drives movement in prePhysics
• See how an XState machine's speed-driven blend tree mixes idle/walk/run
• Understand how the orbit follow camera positions the runtime camera in preRender

What you'll build: A controllable third-person character with a follow camera and locomotion animation.

Walkthrough — Run & understand the third-person character · generated by site/media/lessons/capstone-third-person.lesson.ts (6 steps)

The fastest way to understand the third-person character is to run it, then read how the two components produce what you saw. The video above is the real third-person example driven in the editor.

Open this scene in the hosted editor

Open it in your browser — no install: ▶ Open the third-person scene. You can explore the hierarchy and inspect the Player, enemies, and props — and press Play to actually drive the character right there. The hosted editor transpiles the example’s component scripts in-browser, so no local install is needed.

Run it

1. Open the third-person scene in the editor. Run VGAI_PROJECT=examples/third-person-action npm run dev — the project’s scene loads by default. You’ll see the character on a ground plane with a few pushable props.

   

   The third-person scene.

2. Enter play mode to run the character controller. Press Play. The runtime boots and the CharacterController + CameraTarget components come alive.

   

   Play mode runs the real character controller.

3. Drive the character forward with W. Movement is applied to a Rapier KinematicCharacterController in the prePhysics phase, which collide-and-slides the character along the ground.

   

   WASD movement via the KCC.

4. Strafe and turn with A / D. The horizontal speed is sent to the character-animation XState machine as UPDATE { speed }, which drives a blend tree from idle → walk → run.

   

   Locomotion blends with movement speed.

5. Orbit the follow camera with the mouse. The CameraTarget component tracks yaw/pitch and positions the runtime camera behind the character in preRender.

   

   The orbit follow camera.

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

How it works

• CharacterController (components.ts, phase prePhysics) owns the Rapier KinematicCharacterController. Each tick it reads input, builds a move vector, applies gravity and (on the jump action) an upward jumpVelocity, and calls the controller to move-and-slide. It sends the resulting horizontal speed to the character-animation XState actor as an UPDATE event and sends a JUMP event when jumping.
• CameraTarget (components.ts, phase preRender) owns the orbit camera and pointer-lock DOM wiring, tracking yaw/pitch as instance fields, and places the runtime camera behind the character — after movement and animation, so the camera never lags a frame.
• The character-animation XState machine (components.ts) blends idle / walk / run by the speed context value inside its locomotion state’s blend tree, and bindXStateAnimation (see XState animation binding) turns that into native AnimationMixer action weights every frame.

Why these phases

Movement runs in prePhysics (before the Rapier step), and the camera in preRender (after animation) — a textbook use of phase ordering to avoid one-frame-late camera jitter.

Recap

New functionality

• Ran the third-person character and controlled it with WASD + mouse
• Saw the follow camera orbit
• Saw locomotion animation blend with speed

New concepts & skills

• A KinematicCharacterController moves a character with collide-and-slide in prePhysics
• Horizontal speed drives an XState blend-tree state (idle/walk/run) via bindXStateAnimation
• The follow camera positions in preRender, after animation, to avoid lag
• Movement vs. camera live in different phases by design

Next lesson → Manual: XState animation binding

See also

• Capstones — the other games.
• Physics: rigid bodies · Animation: XState animation binding · Input