User Tools

Site Tools


public:t-vien-15-3:lab6_the_interface

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

public:t-vien-15-3:lab6_the_interface [2015/09/25 08:41]
hannes
public:t-vien-15-3:lab6_the_interface [2015/09/25 08:42] (current)
hannes
Line 15: Line 15:
  
   - **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 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** (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. +  - **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.   - **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''.   - **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''.
/var/www/ailab/WWW/wiki/data/pages/public/t-vien-15-3/lab6_the_interface.txt ยท Last modified: 2015/09/25 08:42 by hannes