Adding UI

Vérifié avec version: 2017.2


Difficulté: Intermédiaire


We will want to make certain pieces of information about the current game state available to the player. This includes how much health their base has remaining and how much currency they have to spend on towers.

This section covers how to make sure that information is available to the players, primarily through the use of a UI Canvas and the GameUI component.

UI Canvas

For the UI, create a canvas by right clicking in the Hierarchy view and selecting UI > Canvas. Next, navigate to Prefabs/UI in the Project window and attach the following prefabs as children of the canvas object:

  • TowerControllerUI - This will open a popup when the player clicks the tower, which will give them information about the tower and give them the ability to sell or upgrade the tower.

  • Build Menu - This gives the players a selection of towers to build.

  • PlayerBaseLife - A UI element that displays the Home Base’s current health and how much currency is available to the player.

  • WaveContainer - Displays the number of waves in the current stage.

  • Game Over - When the player destroys all the enemies or has their Home Base’s health reduced to zero, the endgame popup will appear.

  • PauseMenu - Allows the user to pause the game and restart/exit the stage.

  • TowerPlaceConfirmationUI - Allows the player to confirm tower placement on mobile devices.

  • TowerPlaceInvalid - Indicates to players using mobile devices that the location they have placed a tower is not a valid placement area.

The GameUI component on the GameCamera object (added in the previous section) will need references to some of these Prefabs:

  • Drag the RadiusVisualiser Prefab to the Radius Visualizer Controller field

  • Drag the TowerControllerUI Object in the Scene to the Tower UI field

  • Locate the BuildInfo object in the Scene. It is a grandchild of the Build Menu object. Drag this to the Build Info UI field

Understanding the GameUI component

We will need to attach a GameUI component to the GameCamera GameObject. The GameUI component defines UI components that are shown when the player selects, buys, or sells a tower.

Placement Area Mask

This allows us to select the layer that Tower Placement components are on. This allows the game to filter out other layers when placing a tower.

Tower Selection Layer

This is the layer that towers that are already placed exist on. This allows us to filter out other layers when selecting a tower on the grid.

Ghost World Placement Mask

This defines which layers tower ghosts can collide with. When moving tower ghosts around, we want to be able to see the ghost on certain stage colliders as well as on the placement grids themselves.

Radius Visualiser Controller

This holds a reference to a visualiser that displays a tower’s radius when selecting/placing it.


This holds a reference to the TowerUI that displays a tower’s level, DPS, and the buttons to upgrade or sell the tower.

Build Info UI

This references the sliding panel that appears when selecting a tower from the build menu.