public:t-vien-15-3:lab6_the_interface
This is an old revision of the document!
Table of Contents
Lab 6: The Interface
Under Constucion
Goal
Preparation
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. - 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→Imageobject. Notice that along with it you also get a
Canvasobject, which becomes the parent of the
Imageand an
EventSystemobject. Drag the
Canvasunder the
IntroScreen(creating the hierarchy
IntroScreen→Canvas→Image). Select the
Canvasand set its
Render Modeproperty (in the
Canvascomponent) to
Screen Space - Overlay, the
Ui Scale Modeto
Scale With Screen Sizeand
Screen Match Modeto
Expand(both under the
Canvas Scalercomponent/script). Finally, pick a
Reference Resolutionthat matches your computer's screen resolution (e.g.
1920by
1080). Double-click on the
Canvasobject 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
Imageobject 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
Imageshould now show up blue. Drag the corners of the
Imageinto the corners of the
Canvasso 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 Resolutionyou 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 Typeproperty to
Sprite (2D and UI). Then drag that texture into the
Source Imageproperty of the
Imagegame object. Create a new
UI→Textobject under the
Canvasobject 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
Textproperty of the
Textobject to say something interesting (e.g. the name of the virtual environment). Create a new
UI→Buttonobject under the
Canvasand drag it into a good place. Notice that a
Textobject gets created along with the button as its child. Change the text inside the
Buttonto say something like “Start”. Play with the fonts and colors of the
Textand
Buttonelements 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)