Lab 6: The Interface

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. Delete the default MainCamera.
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. You also get an EventSystem object that supports GUI events. 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. This will render the canvas on top of whatever scene you have created, and does not even require a camera. 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 press the 2D button in the upper bar of the Scene View window (this is a nice mode for working with UI objects, but remember to de-select it when going back to working on the 3D scene). 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. Note however that even while the canvas is covering the whole scene, the FPS Controller is still active in the background and that any player control movements in the intro screen will change the position and orientation of the player. To avoid this, you can keep the FPSController de-activated until the button gets pressed (without the application running, just un-check the checkbox next to the name FPSController at the top of the Inspector window). Then add another button event right underneath the de-activation of the intro screen event. Select the Button and in the On Click() panel press the + symbol to add another event. Make FPSController the target object and select GameObject.SetActive as the function to call. This time check the check box that appears (which means true). When you run the application this time, the FPS Controller will remain dormant until the button gets pressed. NOTE: When you de-activate the FPSController in your hierarchy, you lose your only camera in the scene. This seems to affect the rendering of the intro screen (even though overlays don't require cameras). To keep the rendering unchanged, you can add a dummy camera under IntroScreen.
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 just increasing a textual counter.
9. Hide Mouse Cursor in FPS Mode When you are in FPS mode walking around, you probably don't want to see the mouse cursor on the screen as it serves not useful function. You can disable/enable by assigning either true or false to the Cursor.visible variable in any script. So, for example, in order to hide the mouse when the FPSController becomes activated, you can add this to the PlayerScript (it overrides the method OnEnable() which automatically gets called on activation):

       void OnEnable()
       {
           Cursor.visible = false;
       }

   Just remember to show the mouse cursor again if you chose to leave the FPS mode, for example when you press a button to get back into the intro screen (try implementing that functionality if you like).