Skip to main content

Build a collaborative canvas game

This tutorial walks you through building a multiplayer pixel canvas on Crowded Kingdoms — step by step, at the wire level: sign in, mint an app token, subscribe to the realtime stream, send actor and voxel updates, and read them back.

What you'll build​

  • Auto guest login on first visit (no login form), then an app-scoped token minted before gameplay
  • Mouse-controlled dot as your actor in the world
  • Click to paint ground cells that persist in the game database
  • Viewport edge scroll when you reach the window boundary
  • Collaborative viewport push — multiple players coordinate to pan the shared window

Each chapter is self-contained code you can paste into any Vite + TypeScript project.

The companion repository: The Construct​

the-construct is the public starter repository and this tutorial's working companion. It contains everything the chapters teach, built the way a real game is built: an engine-agnostic platform layer over CrowdyJS (two tokens, datacenter routing, token rotation), World Stores for presence and chunks, a three.js hub and a pixi.js paint program — the same shared canvas this tutorial builds — driven by one session, a server-authoritative world hub on ck-exec, Crowdy Studio embedded so players write mods (a SERVER half on ck-exec and a CLIENT half in the browser), proximity chat, webcam (B) and voice (V), and npm run setup in a shell that creates your org and app (hosted sign-in only in the browser — the page never collects a password).

Clone The Construct's default branch, prod, which matches this site (production).

git clone https://github.com/CrowdedKingdoms/the-construct.git
cd the-construct
npm install
npm run dev

Open http://localhost:5175, sign in with Crowded Kingdoms, then step on the Paint pad (E). Holodeck: WASD move, click or hold right-mouse to look, scroll to zoom. Where a chapter below shows the raw call, the repository shows the same thing through World Stores: src/platform/realtime/WorldStores.ts (presence, chunks), src/scenes/program-pixi/PaintScene.ts (painting, persistence), src/platform/network/NetworkManager.ts (hosted sign-in, minting, rotation). Read the tutorial for the mechanism and the repository for the architecture.

Crowded Kingdoms does not host games. When yours is ready, you build it and serve it from a static host of your own; Host your game says what that host must send.

Prerequisites​

  • Node.js 20+
  • A modern browser
  • A Crowded Kingdoms account on production (no org membership required)

Configuration​

All chapters use these values:

ApiHttpUrl=https://ck.prod.crowdedkingdoms.com/graphql
GameApiHttpUrl=https://ck.prod.crowdedkingdoms.com/graphql
GameApiWsUrl=wss://ck.prod.crowdedkingdoms.com/graphql
AppId=<your-app-id>

Create your own app and use its appId — npm run setup in The Construct does this from a shell, or use CK Studio's Get started.

See also Connecting game clients.

Chapters​

  1. Project setup — connectivity and config
  2. Auto guest auth — register, then mint an app-scoped token
  3. Connect & bootstrap — app token → UDP proxy
  4. Canvas coordinates — world → chunk/voxel
  5. Actor presence — mouse → dot
  6. Painting voxels — click to color
  7. Viewport edge scroll — pan the window
  8. Collaborative viewport — push together
  9. Full game — assembly
  10. Build mods with Crowdy Studio — players' mods in a running game
  11. Host your game — serve the build from a host of your own

Reference pages: