Add In-Game Voice Chat to the Unity Tanks!!! Multiplayer Reference Project using the Agora Voice SDK for Unity

Published in

Agora.io

9 min readDec 13, 2018

Adding voice in multiplayer games is literally a game changer. It allows gamers to communicate with the other players and increases interactivity amongst the gamers. This is what makes multiplayer games so addicting. Take a look at Fortnite or Call of Duty for example. If you couldn’t tell your teammates about the enemy squad that was coming over or how bad they their aim was would it still be as fun? I really doubt it.

Using the Agora platform can help you add Voice communication in your mobile games. This tutorial helps you quickly integrate voice chat into Unity’s Tanks!!! Multiplayer Reference Project, using the Agora Gaming SDK.

Prerequisites

Agora.io Developer Account
Unity 3D 5.5+

Steps to Integrate Agora Voice

The Agora integration for the Unity Tanks demo application, modifies two existing classes (CreateGame and GameManager) and adds two supporting classes (ApplicationModal and MuteButton). This tutorial consists of the following steps:

Set up the Tanks Demo Application
Add Agora UI to the Scene
Create the Folder Structure and Assets
Modify the CreateGame Class
Modify the GameManager Class
Add Agora Methods
Create the MuteButton Class
Create the ApplicationModal Class
Link the MuteButton Class to the UI Object
Add App Settings, Agora SDK, and Run the App

Now let’s get started!

1) Set up the Tanks Demo Application

Add Unity’s Tanks!!! Reference Project to your Unity account.

Ensure you are logged into unity, and Clicking on the Add to My Assets button.

Read through the Terms of Service and click on the Accept button to add the project. Note: This screen only appears the first time you add an asset into your Unity account.

Once the project has been added, a confirmation will appear at the top of the screen.

Click Open in Unity to launch Unity.

When Unity opens, click New to create a new project.

Once your project is created, ensure the Assets tab is selected. The Tanks project should already be loaded. Scroll down and click on the Download button.

Note: The Download button will change to a loader bar to show download progress.

When the download is complete, the Import button will appear. Click on Import to load Tanks into your project.

Click on Import to confirm that you want to import Tanks into your current project.

Scroll through the asset list to familiarize yourself with the project structure and click Import to begin importing.

Note: Depending on your version of Unity, you may see and API Update Required alert window. Since you’re working in an empty project, click I Made a Backup. Go Ahead! to confirm the import.

2) Add Agora UI to the Scene

The Tanks Demo application consists of one key Unity scene called LobbyScene located in the Assets/Scenes/Menu folder.

Add a MuteButton object to the SettingsModal. This button mutes / unmutes audio.

This MuteButton object will be linked to the GameManager class in the Modify the GameManager Class section.

3) Create the Folder Structure and Assets

Create a folder called AgoraScripts in the Assets/Scripts folder in the demo app. This folder will store the custom supporting classes for integrating Agora Voice.

Create two empty .cs files and place them in the AgoraScripts folder:

ApplicationModel.cs
MuteButton.cs

Create an images folder within the AgoraScripts folder, that contain two image files:

btnMute.png
btnMuteBlue.png

Note: You can use any two images to represent the active/inactive audio mute button.

The next two sections will cover the contents of the CreateGame, GameManager, MuteButton, and ApplicationModal classes.

4) Modify the CreateGame Class

The CreateGame class is an existing class for the Tanks demo application. The class is declared in Assets/Scripts/UI/CreateGame.cs.

In the OnCreateClicked() method, set the channel name using ApplicationModal.ChannelName. Ensure this is set before the StartMatchmakingGame() method, to confirm the channel name is set before starting the game.

5) Modify the GameManager Class

The GameManager class is an existing class for the Tanks demo application and acts as the main game controller. The class is declared in Assets/Scripts/Managers/GameManager.cs. This class contains the main Agora SDK code for the Tanks demo application.

At the beginning of the class declaration, add the Agora namespace using agora_gaming_rtc.

The remaining code in this section is contained within the GameManager class declaration.

Add Global Variables
Modify Existing Methods
Add Agora Methods

Add Global Variables

The GameManager class adds three variables to support Agora SDK functionality.

Modify the Start() Method

Modify the Start() method by adding LoadAgoraKit() to the beginning of the application. This loads the Agora engine and associated UI event listeners.

Modify the ExitGame() Method

The ExitGame() method exits the user from the game. Add the LeaveChannel() method at the end of the method. Ensure this method is executed before m_NetManager.ReturnToMenu(), to ensure the user is exited from the Agora channel before returning to the main menu.

6) Add Agora Methods

Add click event listeners to the joinChannel and leaveChannel buttons using onClick.AddListener.

The LoadAgoraKit() method loads and initializes the Agora engine settings.

Load the Agora engine by passing the AppId from the ApplicationModal class into IRtcEngine.GetEngine().
Set the debug log filter using mRtcEngine.SetLogFilter() and set the log file path using mRtcEngine.SetLogFile().
Set the channel profile to free mode CHANNEL_PROFILE.GAME_FREE_MODE using mRtcEngine.SetChannelProfile().
Enable audio volume indication using mRtcEngine.EnableAudioVolumeIndication().

Load the engine callbacks using LoadEngineCallbacks().

The LeaveChannel() method exits the user from the channel and resets the session.

Ensure isInAgoraAudio is true and leave the channel using mRtcEngine.LeaveChannel().
Set isInAgoraAudio to false.

The LocalLogFilePath() method retrieves the log file path by returning the log path agorasdk.log from the local directory Application.persistentDataPath.

The LoadEngineCallbacks() method initializes the event listeners for the Agora engine. The UnLoadEngineCallbacks() method removes the event listeners for the Agora engine. The following Agora engine event listeners trigger the following methods:

The AlertString() method displays an alert to the user. Set the message using SetMessageText() with the heading ALERT.

Add Channel Join / Leave Event Listeners

The EngineOnJoinChannelSuccess() method triggers when joining the channel is successful.

Set a debug log using Debug.Log, with the following information:

Display the mute button using muteButton.SetHidden().

The EngineOnLeaveChannel() method triggers when leaving the channel.

Set a debug log using Debug.Log, with the following information:

Add User Event Listeners

The EngineOnUserJoined() method triggers when a user joins the channel.
Set a debug log using Debug.Log, with the following information:

The EngineOnUserOffline() method triggers when a user goes offline.
Set a debug log using Debug.Log, with the following information:

Add Mute / Unmute Method and Event Listener

The MuteSelf() method mutes/unmutes the local audio stream using mRtcEngine.MuteLocalAudioStream().

The EngineOnMute() method triggers when the local audio stream is muted/unmuted. Set a debug log using with the uid and muted.

Add Warning and Error Event Listeners

The EngineOnError() method triggers when an error occurs on the Agora engine and the EngineOnWarning() method triggers when a warning occurs on the Agora engine.

Create an alert for the error or warning using AlertString().

7) Create the MuteButton Class

The MuteButton class defines the mute button for the game scene. Ensure the class is enclosed in the Tanks.UI namespace, so it will be able to access the methods in GameManager.

The MuteButton defines 4 variables:

mutedImage for the muted state icon.
unmutedImage for the unmuted state icon.
myImageComponent to reference the button image.
isMuted to indicate if the audio is muted / unmuted.

When the class starts, set gameObject to inactive using gameObject.SetActive().

The SetHidden() method shows / hides the mute button and updates the game object.

If hidden is false, set isMuted to false and change the image for myImageComponent to unmutedImage.

Set the game object to active / inactive using gameObject.SetActive().

The mute button invokes the MuteClicked() method:

Update isMuted.
Update the image for myImageComponent based on isMuted.
Declare a GameManager instance.
Mute / unmute the user using gameManager.MuteSelf().

8) Create the ApplicationModal Class

The ApplicationModal class contains the relevant Agora settings for the app.

The AppId variable is the Agora App ID retrieved from your Agora Dashboard.
The ChannelName variable stores the channel/game name.

9) Link the MuteButton Class to the UI Object

Map the mute button UI object from the Unity UI to the MuteButton class.

Select the MuteButton object created in the Add Agora UI to the Scene section.

Ensure the images for the mute button are set to Sprite objects by selecting Sprite (2D and UI) in the Texture Type drop-down menu.

Link the white muted image as the Target Graphic, to represent mute is inactive on the first load.

Add the MuteClicked method into the On Click() panel.

Link MuteButton to the MuteButton class created in the Create the MuteButton Class section.

Link the following variables from the MuteButton class.

10) Add App Settings, Agora SDK, and Run the App

This section shows you how to prepare and build the app.

Create an Account and Obtain an App ID

In order to build and run the sample application you must obtain an App ID:

Create a developer account at agora.io. Once you finish the signup process, you will be redirected to the Dashboard.
Navigate in the Dashboard tree on the left to Projects > Project List.
Copy the App ID that you obtained from the Dashboard into a text file. You will use this when you launch the app.

Update and Run the Application

Edit the Assets/Scripts/ApplicationModal.cs file. In the ApplicationModal class declaration, update #YOUR APP ID# with your App ID.

static public string AppID = #YOUR APP ID#;

Next, download the Agora Game Voice SDK for Unity 3D.

Unzip the downloaded SDK package and copy the files from the following SDK folders into the associated sample application folders.

And that’s it! Open the project in Unity and run the application on your iOS or Android device.

Now you have a multiplayer Tanks game allowing users in the game to communicate with each other during gameplay, making the experience much more engaging.