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
FPSControllerthat allows you to walk around and enjoy the sights. - Create Intro Screen Create an empty
GameObjectat position(0,0,0)' to serve as the root node for the intro screen and rename itInroScreen. Now create anUI→Imageobject. Notice that along with it you also get aCanvasobject, which becomes the parent of theImageand anEventSystemobject. Drag theCanvasunder theIntroScreen(creating the hierarchyIntroScreen→Canvas→Image). Select theCanvasand set itsRender Modeproperty (in theCanvascomponent) toScreen Space - Overlay, theUi Scale ModetoScale With Screen SizeandScreen Match ModetoExpand(both under theCanvas Scalercomponent/script). Finally, pick aReference Resolutionthat matches your computer's screen resolution (e.g.1920by1080). Double-click on theCanvasobject 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 theImageobject 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 theImageshould now show up blue. Drag the corners of theImageinto the corners of theCanvasso 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 theReference 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 itsTexture Typeproperty toSprite (2D and UI). Then drag that texture into theSource Imageproperty of theImagegame object. Create a newUI→Textobject under theCanvasobject 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 itsRect 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 theTextproperty of theTextobject to say something interesting (e.g. the name of the virtual environment). Create a newUI→Buttonobject under theCanvasand drag it into a good place. Notice that aTextobject gets created along with the button as its child. Change the text inside theButtonto say something like “Start”. Play with the fonts and colors of theTextandButtonelements 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)