Using Unity with Playroom Kit

Unity is the most popular game engine, it's also a great way to make web games thanks to the WebGL export option (opens in a new tab).

Playroom Kit complements Unity by simplifying the development of multiplayer games and interactive web-based applications.

Getting started

Video Tutorial

1. Install the SDK

1. Download playroomkit.unitypackage from the releases page (opens in a new tab) (download playroomkit.unitypackage file).
2. Drag the package into your Unity project and import all files.
3. Open terminal, navigate to your project directory, and run:

cd Assets/PlayroomKit
npm install

This will install the required dependencies for the SDK.

2. Initialize Playroom

using Playroom;
 
// ...
private PlayroomKit _playroomKit = new();
// ...
 
void Start() {
    _playroomKit.InsertCoin(new InitOptions()
    {
        maxPlayersPerRoom = 2,
        defaultPlayerStates = new() {
            {"score", 0},
        },
    }, () => {
        // Game launch logic here
    });
}
 

Now you can use Playroom throughout your game!

3. Manage game state

Use PlayroomKit.SetState and PlayroomKit.GetState to handle game state. These automatically sync with other players.

See the API reference for more information.

4. Exporting to WebGL

To bring your game to the world, you must build! Configure your Build settings to our optimal settings.

1. Go to File > Build Settings and select WebGL as the platform.
2. In Player Settings:
   • Set Resolution and Presentation > Run In Background to true.
   • Choose your desired template (Choose DiscordTemplate if you want to publish to Discord Activities).
   • Set Compression Format to None under Publishing Settings (this is to make sure the build works with the Playroom Portal (opens in a new tab)).
3. Build your game.
4. To test the build locally in your browser, run python -m http.server in the resultant build folder. We also recommend using Servez (opens in a new tab), a simple web server solution with a nice interface.

Do note that PlayroomKit for Unity only works with WebGL builds.

Updating from a previous version

Update PlayroomKit for Unity to get the latest features and fixes. We recommend doing the following:

1. Ensure your Unity version is above 2019 LTS
2. Delete all node_modules folders from your previous installation
3. Add the latest plugin (See Installation instructions). You must re-run npm install and get fresh packages.

Testing your games

PlayroomKit for Unity ships with some helpful features to make multiplayer game dev easier.

Playroom Dev Manager

The PlayroomKit for Unity plugin includes a "Playroom Dev Manager" panel for multi-instance testing and ease-of-use, which controls two features:

1. Mock Mode
2. Multiple player testing

Video Tutorial

Getting started with the Playroom Dev Manager

PlayroomKit for Unity, when installed in your project, comes with a prefab called PlayroomMockManager. This is available inside the PlayroomKit/Prefabs folder.

Just drag-and-drop it into your scene. It should have two entries.

When you select "PlayroomMockManager", you'll see the Playroom Dev Manager panel on the right. Here, you can:

1. Set the Insert Coin Caller. This is required for Playroom Dev Manager to work correctly. The "Insert Coin Caller" is simply the GameObject where InsertCoin is called in your game.
2. Choose your Mock mode. Learn more about it here.
3. Launch multiple players. This currently works best with Browser Bridge mock mode. More on it here.

Mock Mode

Since the current SDK only supports Unity Web, we've introduced Mock mode - a way to test out your game's logic in Unity's Preview mode, without having to build for web every single time.

1. Local (simulated)

The "Local" mock mode doesn't connect to the actual Playroom servers. Instead, it just mocks the API calls within Unity, and maintains a local state.

The "Local" Mock mode only works in single player mode for now. We aim to make it multiplayer by Q4.

2. Browser Bridge (live)

This mode connects to a live, multiplayer Playroom server in the cloud. It will make real network calls, but to do so, it will launch a controlled browser (to run the underlying network calls).

Setting up the Browser Bridge mock mode

Follow these steps to set up Browser Bridge mock mode for your project.

Step 1: Enable Browser Bridge Mock Mode

1. In the Playroom Dev Manager, locate the "Mock mode" dropdown.
2. Select "Browser Bridge (live)" from the available options.

Step 2: Download and Set Up the Chrome Driver

Browser Bridge mock mode requires a Chrome browser to run alongside the Unity Editor. You must install the appropriate ChromeDriver version matching your browser.

1. Identify your Chrome version.
   • You can check this in your browser settings. Refer to this guide (opens in a new tab) for help.
2. Download the corresponding ChromeDriver version from Google's Chrome for Testing page (opens in a new tab).
3. Place the ChromeDriver in an accessible location on your machine.

Step 3: Configure the Web Driver Path

1. In the Unity project hierarchy, select "UnityBrowserBridge".

   

2. In the "Inspector" panel on the right, locate "Unity Browser Bridge (Script)".

3. Update the "Web Driver Directory" field with the path to your ChromeDriver file.

   

Step 4: Update Paths for *nix Systems (if applicable)

For macOS or Linux, update the "Include JavaScript Files" path in the "Element 0" field with the correct syntax for your system.

Still thinking about which mock mode to use? Check out this FAQ answer covering different scenarios and which mock mode goes best for it.

Multiple Player testing

This currently works with Browser Bridge mock mode only.

To test with multiple players:

1. Ensure the latest version of the PlayroomKit plugin is installed.
2. Open the Playroom Dev Manager panel in Unity.
3. Click "Launch player" to create a new Unity Editor instance.
4. Repeat step 3 for additional player instances (limited by your computer's resources).

This feature uses ParrelSync (opens in a new tab) Unity Editor to create multiple Unity Editor clones, each representing a different player.

By utilizing both Mock Modes and the Multiple Player testing feature, you can thoroughly test your game's multiplayer functionality and performance within the Unity environment before proceeding to a full WebGL build.

Examples

Check out some simple and advanced use cases!

Simple Example

Use WASD or Arrow keys to move the player around. The player's position is synced with other players in real-time.

Code for this example can be found here (opens in a new tab).

Beanz: Discord Activity Demo

Once built, this demo works on both WebGL in the browser, and in Discord Activities.

Code for this example can be found here (opens in a new tab).

API Reference

See the API reference for more information.

FAQ

 private void LoadSVG(string svgBytes) {
    // Split the string to escape the real data
    svgBytes = svgBytes.Split(",".ToCharArray(), 2)[1];
    // Decode from the URL encoding
    svgBytes = HttpUtility.UrlDecode(svgBytes);
    VectorUtils.TessellationOptions tesselationOptions = new VectorUtils.TessellationOptions();
 
    using (StringReader reader = new StringReader(svgBytes))
    {
        SVGParser.SceneInfo sceneInfo = SVGParser.ImportSVG(reader);
        tesselationOptions.MaxCordDeviation = float.MaxValue;
        tesselationOptions.MaxTanAngleDeviation = float.MaxValue;
        tesselationOptions.StepDistance = 1f;
        tesselationOptions.SamplingStepSize = 0.1f;
 
        List<VectorUtils.Geometry> geoms =
        VectorUtils.TessellateScene(sceneInfo.Scene, tesselationOptions);
 
        // Build a sprite with the tessellated geometry.
        Sprite sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
        sprite.name = "SVGimage";
        profilePicture.sprite = sprite;
    }
}

object[] players = Array.Empty<object>();
 
PlayroomKit.OnPlayerJoin((player) => {
  players.push(player);
  player.OnQuit(() => {
    Debug.Log($"{player.id} quit!");
    players = players.Where(p => p != player).ToArray();
  });
});

Aurea NetLayer: a higher level API for Unity

GuilhermeAlanJohann from our Discord community has created a higher level plugin (opens in a new tab) for Unity that makes it easier to use Playroom with Unity.

Features

• Sync position and rotations of objects over the network (supports interpolation)
• Different object authorities (Host and LocalPlayer)
• Spawn/Unspawn objects over the network
• Send Messages to others (including or excluding yourself)
• RPC (...kind of). It uses Unity message system.