Lobby UI in Playroom

Integrating Playroom provides you with synchronized in-game multiplayer lobby. This UI is enabled by default, streamlining the process of testing your multiplayer game right away. It takes care of all aspects of player and room management, allowing you to dive into your testing immediately.

You have the flexibility to retain, customize, or completely remove this UI from your game. The lobby currently consists of following components with more features to be added in future releases.

Example

Advanced Usage

Setting room code, name and photo from URL params

Playroom defaults to picking a random room code, player name, color, avatar for each player. 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 (opens in a new tab)", 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 player directly to the room with the name and photo already set from the URL params.

Changing the Avatar System

Playroom'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 (opens in a new tab). 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,
});
 
// much later, when you want to get the avatar for a player
// see: https://docs.joinplayroom.com/apidocs#getprofile-playerprofile
const avatar = avatars[player.getProfile().avatarIndex];

Skipping the Lobby UI

If your game needs to have a custom lobby UI, you can skip Playroom's lobby UI by passing skipLobby: true to the insertCoin method (opens in a new tab).

This will skip the lobby UI and take the player directly to the game.

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 just like any other state of your game.

2. Hosting and joining UI

You can compose your own URL scheme or a "room code"-type of method to allow players to host and join games. You can use the getRoomCode (opens in a new tab) method to get the unique room code for the current game.

On the other side, you can pass the roomCode param to the insertCoin method (opens in a new tab) to join the room.

Using these methods, either show room code in your own UI (like: "Your room code is: ABCD") or use it to compose a URL (like: https://example.com/#codeparam=ABCD) that players can use to join the same room.

Do note that you need to handle reading the roomCode param from the URL and passing it to the insertCoin method yourself. Playroom 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: