Multiplayer: third-person tag arena

capstone lesson Advanced ⏱ 25 min vgai 0.1.0

Prerequisites: Manual — Networking · Multiplayer — Colyseus rooms · Capstone — shared-physics playground

What you'll learn

• Connect to a Colyseus room through a real lobby flow
• Understand a server-driven match loop (lobby → countdown → playing → scoreboard)
• See how tagging and AI bots are server-authoritative

What you'll build: A multiplayer tag arena with a lobby, game phases, and server-controlled AI bots on a Colyseus room.

Walkthrough — Multiplayer: third-person tag arena · generated by site/media/lessons/tierc-mp-batch.lesson.ts (5 steps)

The arena is a full multiplayer game, not just a synced scene: a connect screen, a lobby, a server-driven match loop, and AI bots — all owned by ArenaRoom. This capstone walks the connection flow you can capture reliably, then explains the match loop from the server code.

What the video shows (honest scope)

The clip captures the connection flow — connect screen → Join Game → the connected lobby (the + 2 bots line and the host’s Start Game button are read from live room state). The in-match tag round (playing phase) runs the same server loop but isn’t shown in this headless capture; for captured live server-authoritative gameplay, see the shared-physics playground. The match mechanics below are described from server/rooms/arena-room.ts.

Steps

1. Open the arena scene. Load examples/scenes/arena.vscn.json.

   

   The tag arena, ready to run.

2. Enter play mode — the example shows a connect screen. Name, player color, bot count, and the server URL (ws://127.0.0.1:2567). The menu lives in phase-overlay.tsx.

   

   The connect form: name, color, bot count, server URL.

3. Click Join Game — the client joins the arena room. network.ts opens the room and the UI advances to the lobby phase.

   

   Connected: the lobby reads server state (+ 2 bots) and shows the host's Start Game.

4. The lobby reflects server state. The + 2 bots line and the Start Game button are driven by the room: bots are server-spawned NPCs, and the button renders only for the host (view.isHost). Pressing it sends start_game, moving the room to the countdown.

   

   Server-driven lobby: spawned bots and host-only controls.

5. Stop play mode. Press Stop (or Escape) — the room connection closes.

The server-driven match loop

ArenaRoom runs a phase machine: lobby → countdown (3s) → playing (60s) → scoreboard (5s) → countdown …. The host’s start_game (honored only when client.sessionId === hostId and phase === 'lobby') kicks it off. During playing, the server owns the tagger, validates tag contacts, and steps the AI bots — clients send input and render synced state. That’s the same server-authority model as the shared-physics playground, with a match loop on top.

Recap

New functionality

• Connected to a Colyseus room through a real lobby flow
• Read server-driven lobby state (spawned bots, host controls)

New concepts & skills

• A multiplayer game is a phase machine: lobby → countdown → playing → scoreboard
• start_game is host-gated and phase-gated on the server
• Tagging and AI bots are server-authoritative; clients send input and render state

Next lesson → Multiplayer: tank arena

See also

• Networking · Colyseus rooms · Shared-physics playground · Tank arena