Multiplayer: tank arena

capstone lesson Advanced ⏱ 25 min vgai 0.1.0

Prerequisites: Manual — Networking · Multiplayer — Colyseus rooms

What you'll learn

• Run a server-authoritative multiplayer game with a Colyseus room
• Drive your tank and see remote tanks sync through the server
• Understand the input-up / state-down loop with the Callbacks API

What you'll build: A multiplayer tank arena where your tank and remote bot tanks share a Colyseus room.

Walkthrough — Multiplayer: tank arena · generated by site/media/lessons/multiplayer-tanks.lesson.ts (5 steps)

tanks (packages/editor/template/src/examples/tanks/) is a server-authoritative multiplayer game on Colyseus: your client sends WASD input and renders all tanks (local + remote) that the server syncs back. Client-driven bot tanks (bots.ts) join as genuine remote sessions and wander the arena.

Start the Colyseus server

Multiplayer needs the room server running. npm run dev does not start Colyseus — launch the room bootstrap (server/colyseus-setup.ts, port 2567) separately. The video above was captured with the server running alongside the editor.

Run it

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

   

   The tank arena.

2. Enter play mode — the client joins the tank_room. On play, the client connects to the Colyseus server (net.connect(...)) and joins tank_room.

   

   The client joins the room.

3. Drive your tank with WASD. Input maps to a world-XZ move direction + heading and is sent to the server; an angled camera follows your tank.

   

   WASD input is sent to the server.

4. Bot tanks sync from the server. The bot clients are real remote sessions; every tank’s state flows through the room and renders via the Callbacks API (onAdd / onChange).

   

   Remote tanks sync through the server-authoritative room.

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

How it works

This is the textbook server-authoritative loop: input up (the client sends its movement intent), state down (the TankRoom owns authoritative tank state and syncs it via @colyseus/schema). The client subscribes through the Callbacks API — onAdd to spawn a tank mesh, onChange to move it (reading live schema fields). “Your” tank and the bots are all just entries in the same synced collection.

Recap

New functionality

• Ran a server-authoritative multiplayer game
• Drove a tank synced through a Colyseus room
• Saw remote tanks update live

New concepts & skills

• Input goes up; authoritative state comes down
• Colyseus rooms own state via @colyseus/schema
• The Callbacks API (onAdd/onChange) renders synced entities

Next lesson → Multiplayer: Colyseus rooms

See also

• Networking · Colyseus rooms
• Examples gallery