The goal of this lab is to get familiar with GUI basics. You will create a intro- or title screen that you can dismiss with the press of a button. Then you will add a HUD that shows your current power as you walk through your environment.

• The Unity UI Documentation

1. Create a Scene Create a relatively simple scene (such as a Plane) with a FPSController that allows you to walk around and enjoy the sights.
2. Create Intro Screen Create an empty GameObject at position (0,0,0) to serve as the root node for the intro screen and rename it InroScreen. Now create an UI→Image object. Notice that along with it you also get a Canvas object, which becomes the parent of the Image and an EventSystem object. Drag the Canvas under the IntroScreen (creating the hierarchy IntroScreen→Canvas→Image). Select the Canvas and set its Render Mode property (in the Canvas component) to Screen Space - Overlay, the Ui Scale Mode to Scale With Screen Size and Screen Match Mode to Expand (both under the Canvas Scaler component/script). Finally, pick a Reference Resolution that matches your computer's screen resolution (e.g. 1920 by 1080). Double-click on the Canvas object to show it in the Scene View and pick a view direction that makes its rectangle flat in front of you (e.g. click on the Z view axis to align the view along it so that Y is up and X is right). Now select the Image object and select the 2D rect transform manipulation tool from the toolbox at the top left of the Unity screen (you see a rectangle with a little circle inside it). The corners of the Image should now show up blue. Drag the corners of the Image into the corners of the Canvas so that they are the same size. When you press play, the screen should now fill with the image.
3. Populate the Intro Screen Bring a texture into your project that you want to use as the background image for the intro screen. Try finding something with the same aspect ratio as the Reference Resolution you picked above. One idea is to simply take a screenshot from a different scene you have previously created. Select the texture in the Project browser and change its Texture Type property to Sprite (2D and UI). Then drag that texture into the Source Image property of the Image game object. Create a new UI→Text object under the Canvas object and with the 2D manipulation tool drag it into a good place on top of the image to place a caption. Anchor it to the underlying canvas by pressing the rectangle icon in its Rect Transform (e.g. anchor it to the upper right corner). You should see the white target cross move to the corresponding corner of the canvas. Change the Text property of the Text object to say something interesting (e.g. the name of the virtual environment). Create a new UI→Button object under the Canvas and drag it into a good place. Anchor it to a corner of the canvas. Notice that a Text object gets created along with the button as its child. Change the text inside the Button to say something like “Start”. Play with the fonts and colors of the Text and Button elements you have just created. Notice that you can add a special 2D effect component to them (Add Component→UI→Effects..). If you want to try different fonts, you can drag fonts from your windows folder into your project and they will appear as new font options in Unity.
4. Give the Button a Function We want to make the intro screen disappear when the button is pressed. We can do that by de-activating the IntroScreen parent node. With the Button selected, look for the On Click() panel in the Inspector. Click on the target icon to select a game object that this event will involve. From the list of game objects in your hierarchy pick your IntroScreen. You can now browse all its public functions next to the Runtime Only option. Pick GameObject.SetActive. A check bock appears. Leave it un-checked (which means false). Now test your application. Pressing the button should make the whole canvas disappear.
5. Add a HUD Element Note that you can temporarily de-activate the IntroScreen while you are editing other parts of the scene, including the HUD, so that it is not in your way, just remember to activate it again when running the final application. Create an empty game object and call it HUD. Inside it create a new Canvas object and set its Render Mode to Screen Space - Camera. Drag the FirstPersonCharacter object (child of FPSController) into its Render Camera property and set its Plane Distance to 1 (this is the distance from the chosen camera). Create an Image, Text and a Scrollbar on this canvas and anchor them all to the upper right corner. Use the UISprite sprite as the Source Image for the Image and set the Text to say Power. Rename the Scrollbar to Powerbar.
6. Rigging up the Powerbar Look at the Scrollbar component in the Powerbar and set its Value to 0 and Size to 0. De-select the Interactable property (e.g. make it false). The color of the bar will be the Disabled Color because it is not interactive. Play with its color and also the color of its child object Handle.
7. Updating the Powerbar Add the following script to the HUD object:

   using UnityEngine;
   using UnityEngine.UI;
   using System.Collections;
    
   public class HUDScript : MonoBehaviour {
    
       private GameObject powerbar;
       private Scrollbar powerscroller;
    
       // Use this for initialization
       void Start()
       {
           powerbar = GameObject.Find("Powerbar");
           powerscroller = powerbar.GetComponent<Scrollbar>();
    
       }
    
       public void SetPower(float value)
       {
           powerscroller.size = value;
       }
    
       // Update is called once per frame
       void Update () {
    
       }
   }

   And add the following scrip to the FPSController:

   using UnityEngine;
   using System.Collections;
    
   public class PlayerScript : MonoBehaviour {
    
       public GameObject hud;
       private float pickupvalue = 0;
    
       // Use this for initialization
       void Start () {
    
       }
    
       public void Pickup()
       {
           pickupvalue = pickupvalue + 0.1f;
           hud.SendMessage("SetPower", pickupvalue);
       }
    
       // Update is called once per frame
   	void Update () {
    
       }
   }

8. Add Pickable Powerups Now you can use pickable objects from previous labs in your scene that will increase the HUD powerbar instead of increasing a counter.