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 AnimGraph speed parameter blends 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.

Run it

1. Open the third-person scene in the editor. Load examples/scenes/third-person.vscn.json. 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 feeds the AnimGraph speed parameter, blending 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 writes the resulting horizontal speed into the AnimGraph speed param and fires a jump trigger 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.
• AnimGraph blends idle / walk / run by the speed parameter (see Blend trees).

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 AnimGraph blend (idle/walk/run)
• The follow camera positions in preRender, after animation, to avoid lag
• Movement vs. camera live in different phases by design

Next lesson → Manual: AnimGraph

See also

• Capstones — the other games.
• Physics: rigid bodies · Animation: anim graph · Input