====== Lab 6: The Interface ======

{{ :public:t-vien-15-3:lab6-image.png?500 |}}

===== Goal =====

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. 


===== Documentation =====

  * The [[http://docs.unity3d.com/Manual/UISystem.html|Unity UI Documentation]]

===== Procedure =====

  - **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''.
  - **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. 
  - **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.
  - **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''.
  - ** 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''. 
  - ** 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''. 
  - ** Updating the Powerbar ** Add the following script to the ''HUD'' object: <code csharp>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 () {
	
    }
}</code> And add the following scrip to the ''FPSController'': <code csharp> 
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 () {
	
    }
}</code>
  - ** 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. 
  - ** 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): <code csharp>

    void OnEnable()
    {
        Cursor.visible = false;
    }</code>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).