After the back-end is ready, you must implement the client-side code based on the server's events. This part will describe how a proper UI was implemented for a game character selection in one of our real-time multiplayer games made with Unity.
For ease, let's split the content into 2 parts.
- Overview: introduction to the character selection user interface
- Deep Into the Code: looking at the overall structure and example methods
Overview of the User Interface
The character selection has a dummy character image and a character buttons holder that helps players interact and pick a character. It's a simple interface with one image and thumbnails of images of the available characters.
Here's an overall structural view of the UI as it would look like on a 2D scene in Unity.
The rounded rectangle that is a character image is a Unity UI Image, and the character buttons are generated from the character manager class we have in our project. So these are all the elements needed for the UI.
Into the Code
We start by creating a class named
CharacterSelectionHandler, which is in charge of handling all the UI interactions. It holds references to the UI elements and events. The class is attached to an empty GameObject. The script has references to the following public properties that you can give reference from the Unity Editor.
- Character Index: an integer type reference to the index for a player selecting the character. This index is later used to get the previously saved character and set it
- Prefab Holder: a GameObject type reference that holds the prefab of the character button that will be instantiated
- Main Character: the image where the currently selected image comes up
- Item Index: an integer type reference used to get the index of selected characters from the character manager
- Character Holder: a
rectTransformthat is used as a parent for the generated character buttons
- Activated Sprite: a stroked image sprite used to highlight the selected character
- Deactivated Sprite: a sprite used to highlight the unavailable characters
Generating the Characters
First, we will generate all the characters from our selection manager and place them in the avatar holder, where players can select a character from various characters.
In the code above, we first create a loop that runs until the end of all the items count present in our adventure character manager. Then, we create an int index where we save the value of
i . We do this because if we directly pass the
i to a delegate function, it will create issues and won't get updated.
After saving the index, we generate a
charcHolder GameObject using instantiate. We pass our GameObject to be generated, that is
prefabHolder, set its transform to the character holder and its rotation to identity. After generating the character, we get the GameObject button component and add a listener to its button. We also set the parent of the generated button to the avatar holder transform.
We set the image of the button according to the index of the character manager. Then we add the generated character to the characters list and also add its highlighters to the highlighters list.
In the code above, you can see the
OnSwitchedCharacter function. The function looks like this:
In this function, we take an integer
i as a parameter. Later the index is set as the
itemIndex. This function is called every time the user presses a character button or tries switching a character.
So we update the preview image of the character to the character manager's sprite at the index
i. We then save the character and send the character for validation.
This function handles all our network updates. It takes an array of integers as parameters because the server passes us an index of selected characters. We use our index in the first loop because we need to differentiate the selected character from other users.
We review all the character lists in the second loop and highlight the selected character. Then, we go through a loop of the array of integers given to us by the server and check if it's not less than -1 (which means unselected). We now get access to the previous highlighters list, where we saved all our highlighters and highlighted them.
For example: If we get the index as [0,1], we highlight both of the
We need to add the above function as a listener to the character validator so that we can listen to the messages sent to us by the server and update selections every time we receive a message from the server stating that the character is changed.
Highlighting the Characters
The button highlighter is attached to the prefab of the character. This class is used to highlight a GameObject when the
SelectImageHighlight function is called. This class changes the sprite of the highlight
obj image and toggles between highlighted and non-highlighted.
That's basically it. We now have a simple user interface that allows the users to select a character of their choice.
Thank you for reading this blog! Subscribe for more.