Adding real-time collaboration

Add Playroom Kit

Add Playroom Kit to your app. See Get started for install options.

Insert Coin!

Tell Playroom Kit to start. Playroom Kit handles room creation, joining, and lets participants pick names, colors, and avatars. When the host taps “Launch”, your app runs.

// Show Playroom Kit lobby UI; Playroom Kit handles joining and waits for host to tap "Launch"
await insertCoin();
 
// Everyone is in the room (your app code below)
startApp();

Set shared state you want to sync

Playroom Kit syncs state across all participants. Use it for anything: time left, positions, UI state. Ideally only the host sets shared room state; others read it and update their view.

// On one participant (e.g. host)
setState("timeLeft", 60);
 
// On others
const timeLeft = getState("timeLeft");

Handle participants joining and leaving

When someone joins, you may add a representation (sprite, cursor, avatar). When they leave, remove it. Use onPlayerJoin and onQuit:

onPlayerJoin(playerState => {
  // playerState = this participant's state + profile
  // e.g. add a representation here
  playerState.onQuit(() => {
    // Handle participant leaving (e.g. remove representation)
  });
});

Send participant input to Playroom Kit

Input can be joystick data, button presses, cursor position, etc. Store it on the current participant’s state. Host reads input and updates shared state. No custom network code.

joystick.on("move", (e, data) => {
  myPlayer().setState("input", data.direction);
});

Write shared state from the host

Things like positions, scores, or app state. Ideally only the host sets shared state; others receive it and update their view.

// Host only
updateParticipant(player) {
  const input = player.state.getState("input");
  // ... compute new position ...
  player.state.setState("position", { x: newX, y: newY });
}