Lobby

Playroom Kit provides a synchronized lobby UI for your app. It’s enabled by default and handles room and participant management so you can test real-time collaboration right away.

You can keep it, customize it, or replace it with your own UI. The lobby includes:

Example

Advanced Usage

Setting room code, name and photo from URL params

Playroom Kit defaults to a random room code, name, color, and avatar per participant. If you want to set these values from URL params, you can do so by passing r, player_name and player_photo params to the URL. The photo is a URL to an image.

For example, if you want to join room ABCD and also set the name to “John” and the photo to “https://example.com/john.png”, you can do so by opening the following URL:

https://mygame.com/#r=ABCD&player_name=John&player_photo=https://example.com/john.png

You can also combine this with the skipLobby option to skip the lobby UI and take the participant directly to the room with the name and photo already set from the URL params.

Changing the Avatar System

Playroom Kit’s lobby includes a procedurally-generated avatar system. If you want to use your own avatars, you can do so by passing a custom avatars image list to the insertCoin method. This list should contain a list of image URLs.

import { insertCoin } from 'playroomkit';
 
const avatars = [
  'https://example.com/avatar1.png',
  'https://example.com/avatar2.png',
  'https://example.com/avatar3.png',
];
 
await insertCoin({
  avatars,
});
 
// later, when you need the avatar for a participant
// see: https://docs.joinplayroom.com/api-reference/js/PlayerProfile
const avatar = avatars[player.getProfile().avatarIndex];

Skipping the Lobby UI

If your app uses a custom lobby UI, pass skipLobby: true to insertCoin. The lobby UI is skipped and participants go straight into the room.

Few things to consider when going this route:

1. You will need to implement your own profile system

The existing player.getProfile() method will not work. You can set profile info like any other state in your app.

2. Hosting and joining UI

Compose your own URL scheme or room-code flow so participants can host and join. You can use the getRoomCode method to get the unique room code for the current room.

On the other side, you can pass the roomCode param to the insertCoin method to join the room.

Using these methods, either show room code in your own UI (e.g. “Your room code is: ABCD”, or compose a URL (e.g. https://example.com/#codeparam=ABCD) for others to join.

Do note that you need to handle reading the roomCode param from the URL and passing it to the insertCoin method yourself. Playroom Kit does not handle this for you.

Designing a Custom Lobby UI

Wawa Sensei has a great video on how to build a custom lobby UI with Playroom Kit: