UI Elements 1 2D Sprites If you are not working in 2D mode, you need to change the texture type to Sprite (2D and UI) Change Sprite Mode based on how many images are contained in your texture If you are using an Atlas or Sprite Sheet you want to select multiple as your Sprite Mode 2 1
UI 101 UI User Interface, the devices that let you interact such as mouse, keyboard, controller, etc GUI Graphical User Interface, everything that is represented by graphics such as buttons, menus, icons, etc A UI is more than just a heads-up display (HUD) UI types are based on: Diegesis Is part of the story? Spatiality Is in the game s environment? 3 UI 101 4 2
UI 101 Non-Diegetic Exists for the player to view, no in-game characters are aware of its presence 5 UI 101 Diegetic Exists within the game world and characters are aware of its presence 6 3
UI 101 Meta Aware of the interface but it is not physically shown to the character in the scene 7 UI 101 Spatial Exists within the scene but the characters are not aware of it 8 4
UI 101 Placement Tips Use a guttered grid, prioritizing elements to the outer areas 9 UI 101 Placement Tips Mobile devices need special consideration for thumb position and occlusion of the screen: 10 5
UI 101 Placement Tips Fitt s Law The time required to rapidly move to a target area is a function of the ration between distance to the target and the target s width Make important UI elements close and large I ndex = log 2 2D W 11 UI 101 Color Scheme Tips Split Complementary maximizes contrast while minimizing eye strain 12 6
UI 101 Color Scheme Tips Are you color blind? Some of your audience will be: 1) Use symbols and colors 2) Use minimal design 3) Combine color with patterns and textures 4) Use contrasting hues 5) Avoid bad color combinations 13 UI 101 Tips Use Metaphors (symbols with universal meaning): Quicker to recognize than text They don t clutter the UI as much as text You don t have to translate them to other languages 14 7
UI 101 Resolution & Aspect Ratio Resolution is the pixel dimension of the screen Aspect Ratio is the resolution width divided by the resolution height When making a UI, first create it for a default resolution and then adapt to work with other aspect ratios and sizes 15 UI 101 Resolution & Aspect Ratio The game window allows you to change your aspect ratio between several presets You can also add your own custom presets that are based on either pixel size or aspect ratio 16 8
UI 101 Resolution & Aspect Ratio 17 2D Sprites Once Multiple Mode is enabled, you can enter the sprite editor You can try and use the automatic mode to create sprites that are the minimum size for each sprite 18 9
2D Sprites To easily see the bounding boxes, switch to alpha mode 19 2D Sprites You can also click+drag to define regions for your own sprites if automatic mode is not working for your needs Will provide you with a Sprite Panel with details: name, position, width, height and border values 20 10
Sprite Editor When finished, each slice will correspond to a new sprite generated as a child of the original 2D texture loaded 21 9-Slice Sprites Lets you reuse an image by adjusting where it stretches so that it can be mapped to UI elements of different sizes with no visible distortion The corners A, C, G, I do not change B & H stretch / tile horizontally D & F stretch / tile vertically E stretches / tiles horizontally and vertically 22 11
9-Slice Sprites To make a sprite into a 9-Slice: Mesh Type should be Full Rect Enter the Sprite Editor Move the borders to define the 9 slices Set the draw mode to the type of slicing you desire You can also adjust how the image is tiled: (continuous or adaptive) Simple Sliced Tiled 23 UI - Canvas Backbone of the GUI is the Canvas, where all UI elements are a child The Canvas has the same dimensions as the screen, you can not change this unless you world in world space You can have multiple Canvases in the same scene When working with Canvases one unit = one pixel, which is why the canvas appears huge compared to our scenes If there is not a canvas in the scene already, a new one will be created when you attempt to add a UI element Canvas uses the EventSystem object to handle messaging of actions and will create one automatically 24 12
Draw Order Objects are drawn in the order they appear in the hierarchy, top to bottom, back to front The transform can also be used to modify ordering based on scripting using: SetAsFirstSibling SetAsLastSibling SetSiblingIndex 25 Canvas Render Modes The canvas can be drawn in 3 different ways: Screen Space Overlay UI is rendered on top of the screen, if the screen dimensions change so will the UI Camera The UI has a set distance from the camera, and the camera settings will effect the UI WorldSpace The canvas will appear in the 3D world as any other 3D object, objects in the 3D world can occlude the UI 26 13
UI Rect Transform, UI elements use a Rect Transform instead of a Transform The Rect Tool allows us to scale, rotate and translate our UI element when working in 2D space All measurements are based off the pivot point of the GUI ( the small circle) to the anchor 27 Rect Tool Moving the pivot also moves the X-Y position automatically As you move the pivot you will notice the X Y positions are calculated relative to the Anchor point All UI Elements are anchored to their parents ( if the parent has a Rect Transform ) Anchor points are actually 4 separate elements, when shown together they anchor to a point This means if the parent changes size, the child will move relative to the anchor is the attached If the anchor is broken up and the parent moved, it will change size relative to the parent 28 14
Anchor Nearly identical to the image UI component Starts stretched out, filling the entire space Shift Key + Anchor Selection allows you to move both the Anchor and the background together 29 Canvas Renderer Component Not part of a Canvas, but part of every other UI element that wants to be rendered Cull transparent mesh means that when the UI object is transparent to remove it from being rendered 30 15
Visual Components Several components are available with the UI: 1. Text (Label) Typical text entry and features 2. Image Meant for 2D Sprites 3. Raw Image Meant for standard textures, why use me when sprites are better (;-p) 4. Mask Restricts child elements to the shape of the parent 5. Effect drop shadow, outline, etc 31 Interaction Components Mouse, Touch, Keyboard, Controller Events: 1. Button OnClick Event 2. Toggle IsOn toggle and OnValueChanged event 3. Toggle Group Mutually exclusive 4. Slider value with an OnValueChanged event 5. Scroll Bar Value between 0 and 1 with OnValueChanged event 6. Drop Down OnValueChanged event 7. Input Field editable to the user 8. Scroll Rect for displaying lots of content in a limited space 32 16
Panel Nearly identical to the image UI component There is no Panel component! Starts stretched out, filling the entire space Useful for keeping items scaled with one another Shift Key + Anchor Selection allows you to move both the Anchor and the background together 33 Panel Making a Persistent Background Get your texture and set it as a 2D sprite Edit -> Project Settings -> Tags & Layers Under Sorting Layers, create a new layer on top of default called background, which will now render before any other geometry Create a new canvas and set its layer to background Set the canvas render mode to Screen Space Camera and place the main camera as the render camera 34 17
Canvas Group Component Allows you to adjust values of a UI object and all of its children at once: Alpha transparency value Interactible boolean value Whether it blocks raycasts Ignore parent groups, if it is a part of another group you can override its influence with this 35 Automatic Layouts Handles creating gridded or listed UI elements automatically for you Great when generating UI in code and it is difficult to determine the values All children of an Automatic Layout Group will be aligned, resized and positioned based on options: Horizontal Layout Group Vertical Layout Group Grid Layout Group Layouts are nestable making for complex layouts 36 18
Automatic Layouts Handles creating gridded or listed UI elements automatically for you Great when generating UI in code and it is difficult to determine the values All children of an Automatic Layout Group will be aligned, resized and positioned based on options: Horizontal Layout Group Vertical Layout Group Grid Layout Group Layouts are nestable making for complex layouts 37 Controlling Automatic Layouts The Layout Element component allows you to specify preferred sizes that will override the Automatic Layout Min Width / Height the maximum a UI object can be scaled down before it stops getting any smaller Preferred Width / Height Think of it as the maximum attainable height ( it s more complex that that ) Flexible Width / Height Allows you to use percentages between 0 and 1 to have relative sizes of UI elements 38 19
Fitters Force a Rect Transform to fit within a specified area Content Size Fitter Force the parent to fit around the children and will listen to the minimum size or preferred size of the objects Aspect Ratio Fitter Forces a UI object to resize based on an aspect ratio 39 Sliders Sliders are interactive elements that allow us to control the value between two ranges or to display a value between a range The Handle in a slider is optional and can be deleted Sliders can be made non-interactable by unchecking the box under the slider script The max and min can also be adjusted to the range you desire 40 20
UI Event System When the first Canvas is made an EventSystem object is automatically created Allows for scene objects to receive player interactions through events Keeps track of the selected GameObject, Input Modules and Raycasting You should not have more than 1 EventSystem in your hierarchy, it will do absolutely nothing for you 41 Event System Manager Tracks and manages event system elements Can hold the first object that is selected when your scene starts Move between UI elements using gamepad / keyboard through Move, Submit or Cancel How much movement is necessary to start dragging UI elements In the Input Manager you need at least a submit and cancel input set 42 21
Input Modules The bridge between the hardware and events, attach them to the EventSystem gameobject 1. Standalone mouse, keyboard, touchscreen, gamepads 2. Hololens input from the hololens 3. Base only accessible by code, meant to be used to create your own input module by extending 4. Pointer only accessible by code, used by standalone input component 43 Event Trigger Can be attached to any component to receive events Automatically build in to several UI components To use with non-ui, must include a collider and camera must have a raycaster The bad, it received all event types and can impact performance 44 22
Event Trigger Pointer Events called by a pointer (mouse, finger, reticle for gamepad) for entering, exiting, and clicking Drag and Drop Events Occurs when a pointer is pressed and the object is moved without releasing. There is a difference between what is dragged and what dragable objects are dropped into. Selection Events When an object is considered selected or deselected Other Events Scrolling, movement, submit, cancel, etc 45 Events, Interfaces and Data Types You can implement the interface of the datatype you d like to use if you don t want to use Event Triggers: using UnityEngine.EventSystems; public class Name : MonoBehavior, InterfaceName{ public void EventName(EventDataType data){}} 46 23
Raycasters A graphics raycaster is automatically loaded in the scene with the Canvas Allows you to interact with UI objects that are children of that Canvas If using non-ui objects you need to attach a physics Raycaster to the camera 47 Buttons Buttons automatically come setup to work the event system 48 By default you get a Text object as a child which can be removed Button properties define what happens when the player interacts Transition Types: None Color Tint Sprite Swap Animation 24
Button Navigation None disable keyboard navigation Horizontal / Vertical Direction from this button to another button Automatic Figure out movement based on button positions relative to each other Explicit Define transitions yourself 49 Button Animation 50 25
Text Rich text allows for markup to be added to the text that will not be rendered Markup Format is HTML-like and uses tags: <b>bold</b> <i>italic </i> <color = #ff0000> Color </color> <size=30>size</size> Accepted fonts are TrueType (*.tff) & OpenType (#.otf) 51 Images Images types: Sliced nine slice image that doesn t distort corners Tiled will repeat the image if area is beyond the size of the image Filled Allows you to control how much of the image is being shown and cut it out if necessary 52 26
UI Effects Shadow Outline 53 Text of the Future TextMesh Pro TextMesh Pro is a powerful new system that was made free recently for Unity Requires importing additional assets Can create Text, Input Field, & Dropdown TM Pro text can be rendered independent of a UI or Canvas! 54 27
Masks Mask Component can be added to any UI object with an Image component Rect Mask 2D component lets you specifiy a rectangular area as a mask Affect the visibility of an object Any part outside of the mask will be made invisible 55 28