Start Emotes Menu
This assignment continues with the CharacterBuilder scene started in the prior tutorial.
An additional area of focus for our user interface functionality is dynamic UI content. There are many circumstances where the amount of content is not known before execution, and so we must dynamically instantiate UI content at runtime. User-generated content (UGC) is a frequent source of UI volatility, and we will explore this by adding a menu that will let players build 2D visual emotes for their character.
Our emotes menu will be a submenu. Players will be able to freely switch between the Character Creator screen and Emote Builder screen.
First, we'll add a couple buttons to the existing Character Creator screen. Add an "Emotes" button anchored bottom-right beside the Save button. This button will eventually switch to the new menu in an upcoming step.
We'll also add an "Emote" button below the Character Preview. This button will display a random emote that the player has assigned to their character.
Create a new child object of "Panel - Character Creator" named "Emotes" using identical configuration to the existing "Character" submenu. The Emotes submenu will have an identical Title Text object and bottom-right Button, which you can clone from the Title Text and Save Button found in the "Characters" submenu. Copying objects in this fashion with identical settings helps maintain consistency throughout the UI.
Start a new C# file named MenuEmoteBuilder and attach it to the new "Emotes" submenu object. (We'll work on this file's code in an upcoming step.)
In our prior MenuCharacterCreator file, we will add an enum and an outlet property to keep track of and reference our screens. We'll add additional property for accessing our upcoming MenuEmoteBuilder
MenuCharacterCreator.cs
public class MenuCharacterCreator : MonoBehaviour
{
public enum Screen {
Character = 0,
Emotes = 1
}
// Outlets
public GameObject[] screens;
MenuEmoteBuilder menuEmoteBuilder;
public CharacterModel[] characters;
public RenderTexture[] characterRenders;
public RawImage characterImage;
public Button[] characterButtons;
public Slider[] colorSliders;
public TMP_InputField[] colorInputFields;
// State Tracking
Color characterColor; // TEMPORARY. Will be replaced with save data.
// Methods
void Awake() {
int emoteScreenIndex = (int)Screen.Emotes;
if(screens.Length > emoteScreenIndex) {
menuEmoteBuilder = screens[emoteScreenIndex].GetComponent<MenuEmoteBuilder>();
}
}
Fill in the property for the screens. Be sure to match the index assignments defined by the Screen enum.
We'll add a couple functions for helping us switch between menus. The game will now also switch to the Character Creator screen by default at the start of execution.
MenuCharacterCreator.cs
void Start() {
SwitchCharacter(0);
// Read default character color
if(characters.Length > 0) {
// (All characters have the same color)
characterColor = characters[0].GetColor();
}
SetColorUI(characterColor);
ShowScreen(Screen.Character);
}
public void ShowScreen(int index) {
ShowScreen((Screen)index);
}
void ShowScreen(Screen screen) {
int screenIndex = (int)screen;
for(int i = 0; i < screens.Length; i++) {
// Turn off all screens except the screen that matches our active screen index
screens[i].SetActive(i == screenIndex);
}
}
Button click events cannot reference custom enums, which is why we have a version of the ShowScreen function that accepts an integer.
Hook up the click event for the Emotes Button to switch to screen index 1. Do not mix this up with the "Emote Button" (singular).
Hook up the click event for the Back Button to switch to screen index 0.
Testing the game at this point should reveal that the game always starts with the Character Creator screen, but you can freely switch back and forth between the Emote Builder and Character Screen screens using the UI buttons.
