User Tools

Site Tools


public:t-vien-15-3:lab6_the_interface

This is an old revision of the document!


Lab 6: The Interface

Under Constucion

Goal

Preparation

Documentation

Procedure

  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. - 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. 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..'').
/var/www/cadia.ru.is/wiki/data/attic/public/t-vien-15-3/lab6_the_interface.1443160985.txt.gz · Last modified: 2024/04/29 13:33 (external edit)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki