2D Mobile Game: UI Manager

Intro

In this article, we create a UI Manager using a Singleton that will be able to communicate between Player script and Shop script to update the Player’s gem count.

Shop Keeper

The Shop UI is going to appear when the Player colliders with the Shop Keeper and disappear when the Player is not colliding with the Shop Keeper. A Box Collider and Rigidbody are added to the Shop Keeper to detect the collision. Make sure Is Trigger is true on the Box Collider and Gravity is 0 on the Rigidbody.

A script will be create to handle the collision detection and the activation of the Shop UI. This script will be attached to the Shop Keeper game object.

We will need to get a handle the Shop UI or Panel in the Canvas. So, we serialize a Game Object variable (shop) and in the inspector we assign the Shop Panel to the script.

Using a OnTriggerEnter to detect when the Player has collided with the Shop Keeper, we will check the collider through the other variable to see if it is the Player. If it is the Player we set the shop to active.

Using the OnTriggerExit, we will know when the Player is no longer colliding with the Shop Keeper. When this happens we will set the shop to no longer be active.

UI Manager

Singleton

A Singleton is something that should be used when there is only one of them. In this case, we will only have one UI Manager. A Singleton is a script that can be referenced by any game object without getting a handle on it. This is done through the use of Static variables, which will make it Global. The image below will show how to setup an instance of a Singleton.

Accessing Shop UI

We will attach the UI Manager script to the Canvas, which houses all of the UI elements.

We are going to want to get a handle on Player’s Gem Count text so we can update it each time the Player opens the shop. This will require using the UnityEngine.UI library.

Now that we have access to UI elements, we serialize a Text element that will hold the Player Gem Count Text.

We assign the Text element to the script from the inspector.

Now that we can modify the play gem count text through code, we will crate a public method that will be called each time the shop is opened and pass in a int parameter that will be the Player’s current gem count.

We access the Text Component by appending the variable with text. We set it to an empty string followed by the gemCount parameter which will be the Player’s current gem count and followed by a G for gems.

Updating Player Gem Count

In the Shop script, when the Player enters we will get a handle on the Player script through the other Collider and if the player is not null, we call the Open Shop method through the UI Manager Instance and pass in the player gem amount.

We want to make sure in the Player script the gems variable, which is keeping track of the amount of gems the Player has, is public so it can be used from the Shop script.

You can see the Shop UI updates each time with the Player’s current Gem count.