Real-time strategy (RTS)

capstone lesson Advanced ⏱ 20 min vgai 0.1.0

Prerequisites: Foundations · Manual — Navigation & pathfinding

What you'll learn

• Run the RTS example with its isometric camera
• Select units with a box-drag
• Understand how a runtime navmesh + crowd moves units to ordered positions

What you'll build: A top-down RTS with selectable units that path around via a navmesh crowd.

Walkthrough — Real-time strategy (RTS) · generated by site/media/lessons/capstones-batch.lesson.ts (5 steps)

Play this in the hosted editor

Play it in your browser — no install: ▶ Open the RTS scene. The deep-link loads the scene; press Play and the isometric camera + navmesh crowd come up. Mouse commands work in-browser — left-drag a box to select units (the HUD count updates) and right-click to order the selection to move. WASD/arrows pan the camera.

The rts example (examples/rts/) is a top-down real-time strategy demo: an orthographic isometric camera, box/click unit selection, and navmesh crowd pathfinding.

Controls

• WASD / Arrow keys — pan the camera. Scroll — zoom.
• Left box-drag — select units; left-click — select a single unit.
• Right-click — issue a move order to the selected units.

Run it

1. Open the RTS scene. Run VGAI_PROJECT=examples/rts npm run dev — the project’s scene loads by default.

   

   The isometric RTS view.

2. Enter play mode. Press Play — the RTSDirector builds the navmesh and crowd.

   

   Play mode.

3. Marquee-select units by dragging. Drag a box over units to select them; the HUD shows the selection count.

   

   The box-drag selection gesture.

4. Right-click to command the selected units to move. Right-click is the move-order button: selected units path to the clicked position via the navmesh crowd, steering around each other. (Left-click and box-drag are for selection only.)

   

   Right-click is the move-order button (units path via the navmesh crowd).

5. Stop play mode. Press Stop (or Escape).

How it works

Units are prefab instances declared in the scene, each carrying an RTSUnit GameComponent. After load, the example attaches one RTSDirector to a scene-root group; the director builds the navmesh + crowd at runtime, gives each unit a crowd agent, and owns the footstep audio + move-marker fade. The isometric orthographic camera is a scene-declared camera entity carrying an RTSCamera component that owns the WASD/arrow ground-plane pan (its fixed framing is authored transform data in the scene file). Box/click selection, right-click move orders, wheel-zoom, and HUD are wired in setup() as runtime infrastructure.

Crowd, not just paths

Because units share a crowd, they avoid each other while moving — not just follow independent paths. See Navigation & pathfinding.

Recap

New functionality

• Ran the RTS with its orthographic isometric camera
• Used the control scheme: WASD pan, box-drag select, right-click move orders

New concepts & skills

• Units are prefab instances with an RTSUnit component
• An RTSDirector builds the navmesh + crowd at runtime
• A crowd adds avoidance on top of pathfinding
• Move orders are right-click; selection is left-click / box-drag

Next lesson → Manual: Navigation

See also

• Navigation & pathfinding · Scenes & prefabs
• Capstones