{"id":112,"date":"2022-06-14T15:51:13","date_gmt":"2022-06-14T19:51:13","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/?p=112"},"modified":"2022-06-14T15:51:13","modified_gmt":"2022-06-14T19:51:13","slug":"day-21-ui-reference","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/?p=112","title":{"rendered":"Day 21: UI Reference"},"content":{"rendered":"\n<p>In this section we look deeper into Unity&#8217;s UI system, including the various configurations for the Canvas, creating and navigating our own Buttons.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"canvas\">UI: Canvas<\/h2>\n\n\n\n<p>When you create your first UI element, Unity will automatically create a Canvas object inside of your scene, along with the \u201cEventSystem\u201d object that you can ignore for now.<\/p>\n\n\n\n<p>The&nbsp;<strong>Canvas&nbsp;<\/strong>is the two-dimensional object that holds your user interface objects. Text, buttons, images, sliders, dropdowns\u2026 all of these UI type objects need to be contained inside of a Canvas object. All objects on the canvas are placed using the&nbsp;<strong>Rect Transform<\/strong>, a method of rectangular transformation for 2D objects. A Rect Transform defines a rectangle of pixel dimensions W (width) and H (height), and the offsets X and Y measuring the distance the pivot of the object should be placed from the \u201canchor\u201d. The anchor is a method of defining how it should be offset from it\u2019s parent object, and can be placed at a normalized value horizontally or vertically. The Anchor presets give you options for placement from the Top, Middle, or Bottom vertically, or Left, Center, or Right horizontally. These presets work similarly to text alignment in a word document or spreadsheet cell.<\/p>\n\n\n\n<p>There are two settings inside the Canvas object which are particularly important for setting up your UI. The first is the&nbsp;<strong>Render Mode<\/strong>&nbsp;inside the Canvas component. There are three modes available:<\/p>\n\n\n\n<ul><li><strong>\u201cScreen Space \u2013 Overlay\u201d<\/strong>&nbsp;is the default setting and will be your most common use case. This setting causes the canvas objects to be drawn over top of your content on the screen. The canvas will cover the entire area of your screen, and resize if your window resizes. This is similar to the concept of \u201ccompositing\u201d video by adding graphics overtop of a video feed. The two do not interact visually at all.<\/li><li><strong>\u201cScreenSpace \u2013 Camera\u201d&nbsp;<\/strong>works similar to the Overlay method, however it sets the screen out at a distance from the camera, and the camera\u2019s perspective will apply, as opposed to the overlay\u2019s planar projection style.<\/li><li><strong>\u201cWorld Space\u201d<\/strong>&nbsp;creates a canvas object in the scene, as opposed to an overlay. This object is a rectangle but has a transform (and thus a position and orientation) within the environment itself. This is what is commonly referred to as a \u201cdiagetic\u201d interface, in that it exists within the world itself, rather than just from the perspective of the player\/observer.<\/li><\/ul>\n\n\n\n<p>The Unity Manual has&nbsp;<a href=\"https:\/\/docs.unity3d.com\/Manual\/UICanvas.html\">more descriptions and examples<\/a>&nbsp;of these modes.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/f2020\/wp-content\/uploads\/2020\/10\/image-16.png\" alt=\"\" class=\"wp-image-117\"\/><\/figure><\/div>\n\n\n<p>The&nbsp;<strong>Canvas Scaler<\/strong>&nbsp;controls the way in which objects will respond to different window sizes. You may have noticed that often that the size and placement of UI objects in your game window do not match their size and placement when you run the game at full screen. This is because the&nbsp;<strong>Canvas Scaler<\/strong>&nbsp;is set by default to&nbsp;<strong>Constant Pixel Size.&nbsp;<\/strong>In this mode, objects retain their width and height values, unaffected by the larger screen. I recommend using the second option,&nbsp;<strong>Scale With Screen<\/strong>&nbsp;which will scale the size and positioning of UI objects up and down with the game screen size, thus preserving your layout as it appears in your editor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"panels\">UI: Panels<\/h2>\n\n\n\n<p>If you want to group your buttons into a more formal menu, you can use the&nbsp;<strong>Panel<\/strong>&nbsp;object. This simply creates a UI Image object, but one that has a background that mimics the button background, only more transparent. By default, the Panel will fill the screen, but by changing the Rect Transform you can resize it and make objects children of this object.<\/p>\n\n\n\n<p>Panels are an easy way to collect buttons and other UI elements into one place, and can be activated and deactivated. This can be useful for making menus that slide up or over, or populating a tabbed menu. Panels are also useful for gathering UI elements into one location, and for providing contrast for the UI elements against the game view itself.<\/p>\n\n\n\n<p>Unity&#8217;s default panel uses the rounded rectangle UI Sprite to soften it&#8217;s edges.  If you would prefer to use a solid color, just set the <strong>Source Image<\/strong> setting to &#8220;None&#8221;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/f2020\/wp-content\/uploads\/2020\/10\/image-17.png\" alt=\"\" class=\"wp-image-118\"\/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"buttons\">UI: Buttons<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Creating Buttons<\/h4>\n\n\n\n<p>To create a button, select&nbsp;<strong>Create &gt; UI &gt; Button<\/strong>. This will generate a simple grey button with black text on your screen, and place it in your&nbsp;<strong>Canvas<\/strong>. (If you have not created a Canvas yet, Unity will generate one for you.)<\/p>\n\n\n\n<p>You can use the&nbsp;<strong>Rect Transform<\/strong>&nbsp;to position the object. Clicking the Anchor diagram will call up the Anchor Presets option. Note the modifiers listed at the top for the Shift \/ Alt keys. Pressing \u201cShift-Alt\u201d and clicking the center object will move your button to the middle of the screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/f2019\/wp-content\/uploads\/2019\/11\/image-2.png\" alt=\"\" class=\"wp-image-218\"\/><\/figure><\/div>\n\n\n<p>The text of your button is actually a separate text object \u2013 to change the text, find the button object in your hierarchy, and expand it to see the child objects (in this case a \u201cText\u201d object) and edit the value in the Text field.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"buttonaction\">Button Actions<\/h4>\n\n\n\n<p>To assign a function to a button, you must first have an object in your scene that has a script with a&nbsp;<strong>public<\/strong>&nbsp;function. In this case, we are accessing the \u201cUIScript\u201d class that has been attached to the \u201cUIManager\u201d object and lives in the scene.<\/p>\n\n\n\n<p>With the button selected, look at the \u201cButton\u201d component and find the&nbsp;<strong>On Click ( )&nbsp;<\/strong>panel a the bottom.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/f2019\/wp-content\/uploads\/2019\/11\/image-4.png\" alt=\"\" class=\"wp-image-220\"\/><\/figure><\/div>\n\n\n<p>Click the&nbsp;<strong>\u201c+\u201d<\/strong>&nbsp;symbol to add a new On Click action. You\u2019ll see an empty Object field.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/f2019\/wp-content\/uploads\/2019\/11\/image-5.png\" alt=\"\" class=\"wp-image-221\"\/><\/figure><\/div>\n\n\n<p>Drag the object that with the script or component that contains the method you want to trigger with this button into the Object field.<\/p>\n\n\n\n<p>Next, click the dropdown (currently showing \u201cNo Function\u201d) and select the script or component, and then the function you want to run.  Now the button press will call that function when clicked.  Button Actions can also have up to one parameter.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/m2020\/wp-content\/uploads\/2020\/06\/image-43.png\" alt=\"\" class=\"wp-image-181\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"buttonsound\">Button Sounds<\/h4>\n\n\n\n<p>We can use the same On Click ( ) panel to emit a sound when a button is pressed. We created an empty object and added an audio clip to it, which generated an <strong>AudioSource<\/strong> component.<\/p>\n\n\n\n<p>In the <strong>OnClick( ) <\/strong> section of our button we add another action, this time adding our sound object, then setting the function dropdown to <strong>AudioSource &gt; Play( )<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/m2020\/wp-content\/uploads\/2020\/06\/image-44.png\" alt=\"\" class=\"wp-image-182\"\/><\/figure><\/div>\n\n\n<p>AudioSource is exposed because it is a component of the object, and the Play( ) command is available publicly.   Another handy tool is the <strong>AudioSource &gt; PlayOneShot( )<\/strong> method, which lets us play a single pass of an audioClip.   Selecting this opens another field of the AudioClip type, and we can drag that directly from our Assets folder into the field, and now it will make that noise when clicked. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/m2020\/wp-content\/uploads\/2020\/06\/image-45.png\" alt=\"\" class=\"wp-image-183\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"buttoncustom\">Button Sprites (Color &amp; Image)<\/h4>\n\n\n\n<p>One way to change the visual appearance of your game is to edit the color of the buttons to move away from the default light gray button that Unity provides. In the Button\u2019s&nbsp;<strong>Image<\/strong>&nbsp;component, you can set the&nbsp;<strong>Color<\/strong>&nbsp;value to customize the appearance. <\/p>\n\n\n\n<p>The <strong>Button<\/strong> component gives you access to the states of the button so that you can provide feedback for selections, presses, and active vs. inactive states.   The default Button object uses <strong>Color Tint<\/strong> as the method for changing these states, which provides a subtle adjustment to the overall brightness of the button image (but not the text object)<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/f2020\/wp-content\/uploads\/2020\/10\/image-18.png\" alt=\"\" class=\"wp-image-119\"\/><\/figure><\/div>\n\n\n<p>Another way to customize this is to create your own custom button states using <strong>sprites<\/strong>.  If you ever created your own buttons to build a website, this process will feel familiar &#8211; you generate similar images for each and then swap their placement when in the various states.  We will look more at this in the next project.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Button Navigation<\/h4>\n\n\n\n<p>You may have noticed that when we have a button selected, we can use the arrow keys to cycle through the selected option.   This is thanks to the <strong>Navigation<\/strong> system.  By default, Navigation is set to &#8220;Automatic&#8221;, which means that Unity will try to figure out the logic for itself.   Sometimes this logic does not make a great deal of sense, so if you want to see what is going on, click the Visualize button and you will see a flow diagram appear between your UI elements.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/courses.ideate.cmu.edu\/53-353\/m2020\/wp-content\/uploads\/2020\/06\/image-49.png\" alt=\"\" class=\"wp-image-187\"\/><\/figure><\/div>\n\n\n<p>The yellow arrows indicate where the selected state will transition when a horizontal or vertical button is pressed.  If you want to set these yourself rather than rely on Unity&#8217;s automatic setting, open the dropdown and deactivate the items so that only &#8220;Explicit&#8221; is selected, then you can define the object by dragging it into each directional slot.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><a class=\"more-link\"  href=\"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/?p=112\"><span class=\"more-text\"><\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"greenlet_layout":[]},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=\/wp\/v2\/posts\/112"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=112"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=\/wp\/v2\/posts\/112\/revisions\/113"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/53-353\/m2022\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}