First Game

This walkthrough draws every touch and Piece the device reports. It is the smallest useful Board program: subscribe to input, and render what comes back.

Subscribe to input

The input system delivers a full snapshot of every active contact each frame. You do not get individual touch-down or touch-up events; you get the current set of contacts, and your game diffs against the previous frame if it needs to.

import { Board } from "@board.fun/web-sdk";

const canvas = document.querySelector("canvas")!;
const ctx = canvas.getContext("2d")!;
let contacts: BoardContact[] = [];

if (Board.isOnDevice) {
  Board.input.subscribe((snapshot) => {
    contacts = snapshot;
    draw();
  });
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const c of contacts) {
    ctx.beginPath();
    ctx.arc(c.x, c.y, 40, 0, Math.PI * 2);
    ctx.fillStyle = "white";
    ctx.fill();
  }
}

Tell fingers from Pieces

Each contact carries a type. Fingers report as BoardContactType.Finger. Pieces report as BoardContactType.Glyph and carry a glyphId you use to tell one Piece from another.

import { Board, BoardContactType } from "@board.fun/web-sdk";

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const c of contacts) {
    if (c.type === BoardContactType.Glyph) {
      // Identify a specific Piece by its glyphId, not by the type.
      ctx.fillStyle = colorForGlyph(c.glyphId);
      drawCircle(c.x, c.y, 50);
    } else {
      ctx.fillStyle = "white";
      drawCircle(c.x, c.y, 40);
    }
  }
}

Identify Pieces by glyphId. The type only tells you it is a Piece. The glyphId tells you which Piece, so branch on glyphId when you care about a specific Glyph.

Coordinates

Contact positions are in device pixels with the origin at the top-left. x increases to the right and y increases downward. No vertical flip is required. See Touch Coordinates for the full mapping.

Run it on a device

A desktop browser reports no touch input, so drawing there shows nothing. To see contacts, build, pack, and deploy to a device, see Build & Deploy.

Next

• Read the Input & Pieces guide for the full contact model.
• Browse the other Guides for session, saves, avatars, and more.