Build the game.We'll handle the players.

Add Lobby to my game. Make it multiplayer with 4-player rooms, save each player's progress, and let players start as guests.

import Phaser from 'phaser';
import { Lobby } from '@lobby/client';

const lobby = new Lobby({ project: 'my-game' });

export class PlayScene extends Phaser.Scene {
  async create() {
    this.player = this.physics.add.sprite(400, 300, 'hero');
    this.others = new Map();
    await lobby.connect(); // starts as a guest, upgrade later
    this.room = await lobby.rooms.join('arena', { maxPlayers: 4 });
    this.room.on('player:update', ({ id, x, y }) => {
      this.others.get(id)?.setPosition(x, y);
    });
  }

  update() {
    // Synced at the room's tick rate, not every frame
    this.room.me.set({ x: this.player.x, y: this.player.y });
  }

  async levelComplete(level) {
    await lobby.saves.set('progress', { level, coins: this.coins });
  }
}

import * as THREE from 'three';
import { Lobby } from '@lobby/client';

const lobby = new Lobby({ project: 'my-game' });
await lobby.connect(); // starts as a guest, upgrade later
const room = await lobby.rooms.join('arena', { maxPlayers: 4 });

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight);
const renderer = new THREE.WebGLRenderer();
const player = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
const others = new Map();
scene.add(player);

room.on('player:update', ({ id, x, y, z }) => {
  others.get(id)?.position.set(x, y, z);
});

renderer.setAnimationLoop(() => {
  const { x, y, z } = player.position;
  room.me.set({ x, y, z }); // synced at the room's tick rate
  renderer.render(scene, camera);
});

export const saveProgress = (level) => lobby.saves.set('progress', { level });