Adding UI of this game

We add UI of this game. It is a very simple function. it is only “Display the number of remaining items” It has the following function.
1. Count the number of remaining items.
2. Display items by UI

1. Preparing UI of displaying “the number of remaining items”.

At first, Let’s create the UI. Simply, We create a UI that displays the number of remaining items in the bottom left on the screen.

1-1. Set the “Canvas”

At first, We create “Canvas” that displays UI.
1. Click the “Create” of the “Hierarchy” view.
2. Click “UI → Canvas”.

Set the supposed size for the “Canvas”.
1. Click the “Canvas” object in “Hierarchy” view.
2. Set the "UI Scale Mode" to "Scale With Screen Size" in Canvas Scaler.

1-2. Set the “Text”

Next, we create the text.

1. Click the “Canvas” object in “Hierarchy” view.
2. Click “UI → Text”.
3. Rename the created Canvas> Text object as ScoreLabel in the Inspector view.

You can be seeing “Text”.
Move the “Text” to the center and adjust the font size.

1. Click the “Canvas>ScoreLabel” object in “Hierarchy” view.
2. Set the value of “Rect Transform” to the following. (PosX : -230, PosY : -230, Width : 300, Height : 100)
3. Set “Font Size” of “Text” to “60”.
4. Set “Text” of “Text” to “0”.

2. Create the “Game Controller”

Next, we create a system to notify the “ScoreLabel” that created “the number of remaining Items”.

There are many ways to implement this system, but this time we create it by simplist way that “GameController” manages. And in Unity "GameController" should manage to the progress of the entire game such as the number of items. This "GameController" counts “the number of remaining Items” and has a system to notify if it is changing.

Let’s create this "GameController".

1. Click the “Create” of the “Hierarchy” view.
2. Click the “Create Empty”.
3. Rename the created object name to “GameController”.
4. Change the “Tag” to “GameController”.

3. Preparation for counting the items.

3-1. Set the “Tag”.

We set the "Item" tag to "Item" object and count the number of object that has this tag.

1. Click the “menu bar> Edit > Project Setting > Tags And Layers”
2. Open the “Tags” menu in the “Inspector”.
3. Open the tags by clicking the “+” button.
4. Rename “New Tag” to “Item”.

3-2. Set "Item" tag to "Item" object

We set the "Item" tag. “Item” tag was added to the list because registered the Item tag already.

1. Click the "Item" object of the “Hierarchy” view.
2. Change the “Tag” to “Item” on the “Inspector” view.
3. Click the “Apply” button and update “Prefab”.

3-3. Add a function to count “Item” in “GameController”.

At first, we create “GameController”.

1. Click the “GameController” on the “Hierarchy” view.
2. Click the “Add Component” on the “Inspector” view.
3. Click the “NewScript” and create “GameController”.

Write the following code in the “GameController”.

using UnityEngine;
 using System.Collections;

 public class GameController : MonoBehaviour
 {
     public void Update ()
     {
         int count = GameObject.FindGameObjectsWithTag ("Item").Length;
     }

3-4. Display the number of remaining items.

We modify to display a number of remaining items to created UI.
At first, we think the way to connect “Text” and “GameController” Uses a way to set a reference to the ”Text” by the source code.
Create a variable for reference.

using UnityEngine;
 using System.Collections;

 public class GameController : MonoBehaviour
 {
     public void Update ()
     {
         int count = GameObject.FindGameObjectsWithTag ("Item").Length;
     }

Next Assign number of got Item to "Text".

 using UnityEngine;
 using System.Collections;

 public class GameController : MonoBehaviour
 {
     public UnityEngine.UI.Text scoreLabel;
     public void Update ()
     {
         int count = GameObject.FindGameObjectsWithTag ("Item").Length;
         scoreLabel.text = count.ToString ();
     }
 }

4. Connect "GameController" and "ScoreLabel".

Finally, we connect "GameController" and "ScoreLabel".
1. Click the “GameController” on the “Hierarchy” view.
2. Drag and drop the “Canvas> ScoreLabel” object to the “ScoreLabel”.

Let’s start the game again. When playing the game, “the number of remaining items” is displayed in the bottom left and you can see that the remaining number decreases each time you get the item.