We will make a simple game UI overlay that provides the user the ability to return to NavigationScene as well as see game and player information.
Our GameUI uxml will use TitleScreenUI for its .screen and .header selector stylings. Although this isn't totally necessary because we will actually make a new selector class that modifies both of these selectors (.screen needs to be updated for white text and the header needs to be updated to expand to fit its contents), we decided to still include TitleScreenUI USS in GameUI uxml just to demonstrate how to use 2 USSs UI Builder... It just seems like an entire section in a gitbook dedicated to UI should have at least one (albeit nominal) example of multiple USS sheets, you know?
We will create a new USS called GameUI that will hold GameUI specific stylings.
Our GameUI will have a footer that hugs the bottom of the screen similar to how the header hugs the top of the screen.
The right side of the header will contain game information. Although the game information will be static in this section, we'll make it dynamic in the next Multiplayer section.
The bottom left of the screen will display static instructions on how to navigate the game. If you end up updating the game controls please be sure to update these instructions as well.
The bottom right of the screen will display player-specific information. Although the game information will be static in this section, we'll make it dynamic in the next Multiplayer section..
Creating our GameUI
Now that we are ready to start switching between scenes let's give our game scene the respect it deserves and change its name from "SampleScene" to "MainScene" 🏋️♂️
Navigate to Assets/Scenes
Right-click SampleScene and rename to MainScene
If you have a SampleSceneSettings file in your Project folder, then right-click on SampleSceneSettings and rename it to MainSceneSettings
Right-click on SampleScene/ (folder) and rename to MainScene
Open up our newly respected MainScene Scene (not folder) so that MainScene is in Hierarchy
Updating SampleScene to MainScene
Right-click in the Hierarchy and create an empty GameObject named "GameUI"
Now there is a GameUI GameObject in the MainScene
Add a Event System (UI Toolkit) component
Add a UI Document component
Drag "PanelSettings" from Assets/UI onto Panel Settings
Right-click in the Assets/UI folder and create a new UI Document named "GameUIManager" (Create > UI Toolkit > UI Document)
Drag GameUIManager uxml onto Source Asset field in the UI Document component in Inspector when the GameUI GameObject is selected in Hierarchy
Create a new script for our GameUIManager custom Visual Element (cVE), "GameUIManager"
Right-click in UI > Create > C# Script
Paste the code snippet below into GameUIManager.cs (cVE):
1
using UnityEngine;
2
using UnityEngine.SceneManagement;
3
using UnityEngine.UIElements;
4
using Unity.Burst;
5
using Unity.Entities;
6
using Unity.Mathematics;
7
using Unity.Networking.Transport;
8
using Unity.NetCode;
9
10
public class GameUIManager : VisualElement
11
{
12
VisualElement m_LeaveArea;
13
14
public new class UxmlFactory : UxmlFactory<GameUIManager, UxmlTraits> { }
Open up UI Builder (Window > UI Toolkit > UI Builder)
Navigate to the Library section of the left panel, click the Project tab and under UI Documents (UXML) within the Asset/UI folder, hover over the GameUIManager uxml for the open icon on the right to appear, and click the icon to open GameUIManager.uxml in Hierarchy
In StyleSheets (top left) hit the "+" and
Add Existing USS "TitleScreenUI"
Sometimes we found in our testing that searching "TitleScreenUI" in Finder's search bar led to no results. If that happens to you just use the old fashion way of finding TitleScreenUI by opening up the Assets folder, then opening up the UI folder, and then scrolling to find TitleScreenUI.uss
Create New USS "GameUI" (save it in Assets/UI folder, which you may need to expand Finder in order to do so)
Find GameUIManager in the Custom Controls (C#) section of Library > Project tab and drag it into Hierarchy
While #GameUIManager is highlighted in Hierarchy, go to Inspector and type "GameUIManager" into the Name field
Save the GameUIManager uxml (best to save while GameUIManager.uxml is selected in Hierarchy -- for some reason it's less confusing to UI Builder that way!)
Setting up GameUI uxml in UI Builder
You will notice we are following the same "ScreenManager" pattern we used in NavigationScene.
Although we do not switch between views like we do in TitleScreenManager, we want to set up our game UI so it is easy to extend in the future.
We have already reviewed how to create and style views in the "Styling a View" section of our gitbook, so for the next few files we provide you with the code rather than re-creating the views piece-by-piece (not a lot to gain from more of the same).
Paste the code snippet below into GameUIManager.uxml: