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, with a live demo for each chapter.

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

The companion demo app lives in the simple-web-demo repository. Each chapter maps to an interactive route.

Run the interactive demo​

From the monorepo (requires the CrowdyJS repo as a sibling of simple-web-demo):

cd simple-web-demo
npm install
npm run dev

Open http://127.0.0.1:5180 — enter your env handle in the config bar, or jump straight to the full canvas.

From the docs repo:

npm run demo:install   # first time
npm run demo:dev

Verify docs are sufficient​

The demo's Playwright suite exercises every chapter against the live dev tier. If it passes, the docs and APIs cover everything needed to build the game:

cd simple-web-demo && npm run verify
# or from cks-docs:
npm run demo:verify
ChapterDemo route
1 — Project setuphttp://127.0.0.1:5173/chapter/1
2 — Auto guest authhttp://127.0.0.1:5173/chapter/2
3 — Connect & bootstraphttp://127.0.0.1:5173/chapter/3
4 — Canvas coordinateshttp://127.0.0.1:5173/chapter/4
5 — Actor presencehttp://127.0.0.1:5173/chapter/5
6 — Painting voxelshttp://127.0.0.1:5173/chapter/6
7 — Viewport edge scrollhttp://127.0.0.1:5173/chapter/7
8 — Collaborative viewporthttp://127.0.0.1:5173/chapter/8
9 — Full gamehttp://127.0.0.1:5173/chapter/9
Canvas (full game)http://127.0.0.1:5180/canvas
Tanks (multiplayer demo)http://127.0.0.1:5180/tanks

Prerequisites​

  • Node.js 20+
  • A modern browser
  • No org membership required for the dev tier

Fixed dev-tier configuration​

All chapters use these values:

ManagementApiUrl=https://api.dev.crowdedkingdoms.com
GameApiHttpUrl=https://game.shared.dev.cks-env.com/graphql
GameApiWsUrl=wss://game.shared.dev.cks-env.com/graphql
AppId=<your-app-id>

Create your own app on dev and use its appId, or follow the tutorial's seeded demo app if provided.

See also Dev tier (client integration).

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

Reference pages: