Agora Treefort: Using RTM to Join Breakout Rooms in Unity

Hello, brave developers! In this tutorial you’ll set up a video chat in a 3D Unity environment in Unity 2019.4.1 (LTS) and a messaging feature using the Agora RTM signaling layer. This is essentially a 3D hangout where users communicate with people in the same channel and have the option to create, enter, and share a new channel with users in the RTM network. On joining the scene, each player chooses their username for the network and joins a community LOBBY channel. Each user can select NEW ROOM and create an Agora channel that will show up for joining by other users.

Getting Started with Agora

Here is a GitHub link to the completed project.

Install the Agora SDK from the Unity Asset Store,

And install the RTM SDK Unity package from our GitHub here:

UI Layout

First, you’ll create all the necessary UI before coding. Feel free to set up your UI however you’d like, but this is how I made mine, and this is what it looks like:

Introduction Panel

Left: 10
Top: 5
Right: 10
Bottom: 340.

Create a Text object childed to the panel, center it, and enter a welcome message. (I used “Welcome to the Treefort.”) Right-click RTMJoinPanel and select UI > Input Field. Name the new object UserNameInputField, and set its Rect Transform values to:

Pos X: -85
Pos Y: -20
Width: 160
Height: 30.

Right-click RTMJoinPanel and select UI > Button. Name the button JoinTreefortButton, set the button text to “Join the Fort!,” and set its Rect Transform values to:

Pos X: 85
Pos Y: -20
Width: 160
Height: 30.

Channel Panel

This orthographic environment is a series of simple cubes arranged together. There are four spawn points in a square on the floor that mark where the user video cubes will spawn, like so:

Agora Engine

Helper Tools

Agora Engine

Next, we’ll create the join channel functionality and implement the callbacks:

Last, you’ll implement the spawning and deleting of cubes rendering the Agora video data, and an essential cleanup function:

UI Manager

First, add the fields and initialize the UIManager:

Next, you’ll implement the functionality that handles the user choosing a channel out of the drop-down list or creating their own channel using the input field name:

In this last section, you implement methods called by the RTMManager when a command is sent from a user through the RTM channel to all other users. When a new channel is added or removed, the network alerts all users and these methods fire:

RtmEngine

Create an empty GameObject called RtmEngine in the scene, and attach a script called RtmEngine.cs. Next, create the necessary fields and the Start() sequence:

Next, you will implement the functionality placed into buttons to log in and out of the RTM client, and initialize the callbacks referenced in the next section:

In this last section, you implement the RTM-related callbacks and the function to send a message across the RTM channel. When sent, the message is received in the OnChannelMessageReceivedHandler for every user, where they adjust their UI accordingly based on the message:

Editor Setup

Inspector Elements

Here is an example:

Button Scripts

Select the JoinNewChannelButton, drag the AgoraEngine object into the OnClick() event, and select Button_JoinButtonPressed.

Last, select the LogoutButton, drag the RtmEngine into the OnClick() event, and select Button_Logout(), like so:

Dropdown

Click the Dropdown object. In Inspector window > Dropdown Component > Options, add NEW ROOM as the first and only option in the window, like so:

Conclusion

Here is the GitHub repo where the code is located.

If you are having trouble or want to reach out, feel free to reach us on Slack here!