Unity User Interface

Unity UI

developing user interfaces for games and applications.

canvas

area that all UI elements should be inside

Creating a new UI

GameObject > UI > Image

EventSystem

object to help the Messaging System

Render Mode

setting which can be used to make it render in screen space or world space

Screen Space - Overlay

places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this

Screen Space - Camera

the Canvas is placed a given distance in front of a specified Camera.

Field of VIew

controls the amount of perspective distortion

World Space

Canvas will behave as any other object in the scene. meant to be a part of the world. "diegetic interface"

Rect Tool

Manipulates UI element rectangles in the Scene View

• move, resize and rotate UI elements

Rect Transform

new transform component that is used for all UI elements instead of the regular Transform component

Pivot

Rotations, size, and scale modifications occur around the pivot so the position of the pivot affects the outcome of a rotation, resizing, or scaling

Anchors

shown as four small triangular handles in the Scene View and anchor information is also shown in the Inspector.

Anchor Preset

can be found in the upper left corner of the Rect Transform component. Clicking the button brings up the Anchor Presets dropdown.

Text

has a Text area for entering the text that will be displayed. It is possible to set the font, font style, font size and whether or not the text has rich text capability

Image

A sprite can be applied to the Image component under the Target Graphic field, and its color can be set in the Color field

Image - Simple

Scales the whole sprite equally.

Image - Sliced

Utilizes the 3x3 sprite division so that resizing does not distort corners and only the center part is stretched

Image - Tiled

Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For sprites with no borders at all, the entire sprite is tiled.

Image - Filled

Shows the sprite in the same way as Simple does except that it fills in the sprite from an origin in a defined direction, method and amount.

Raw Image

takes a texture (no borders etc). should only be used if necessary otherwise Image will be suitable in the majority of cases.

Mask

a way to modify the appearance of a control’s child elements

Button

has an OnClick UnityEvent to define what it will do when clicked

Toggle

has an Is On checkbox that determines whether the Toggle is currently on or off. It also has an OnValueChanged UnityEvent to define what it will do when the value is changed.

Toggle Group

mutually exclusive. Toggles that belong to the same group are constrained so that only one of them can be selected at a time - selecting one of them automatically deselects all the others

Slider

has a decimal number Value that the user can drag between a minimum and maximum value. It also has a OnValueChanged UnityEvent to define what it will do when the value is changed.

Scrollbar

has a decimal number Value between 0 and 1. When the user drags the scrollbar, the value changes accordingly. has another 0 to 1 value that determines how big the handle is as a fraction of the entire scrollbar length. Uses OnValueChanged

Dropdown

list of options to choose from. A text string and optionally an image can be specified for each option, and can be set either in the Inspector or dynamically from code. It has a OnValueChanged

Input Field

make the text of a Text Element editable by the user. It has a UnityEvent to define what it will do when the text content is changed, and an another to define what it will do when the user has finished editing it.

Scroll Rect

can be used when content that takes up a lot of space needs to be displayed in a small area.

Event System

is a way of sending events to objects in the application based on input, be it keyboard, mouse, touch, or custom input.

Event System Roles

• Manage which GameObject is considered selected

• Manage which Input Module is in use

• Manage Raycasting (if required)

• Updating all Input Modules as required

Input Module

is where the main logic of how you want the Event System to behave lives

• Handling Input

• Managing event state

• Sending events to scene objects.

Raycasters

used for figuring out what the pointer is over. It is common for Input Modules to use the Raycasters configured in the Scene to calculate what the pointing device is over.

Rect Transform - Blueprint Mode

Edit RectTransforms as if they were not rotated and scaled. This enabled snapping too.

Rect Transform - Raw Edit Mode

When enabled, editing pivot and anchor values will not counter adjust the position and size of the rectangle in order to make it stay in one place.

Canvas - Pixel Perfect

Should the UI be rendered without antialiasing for precision?

Canvas - Render Camera

The camera to which the UI should be rendered (see below).

Canvas - Render Mode

The way the UI is rendered to the screen or as an object in 3D space (see below). The options are Screen Space - Overlay, Screen Space - Camera and World Space.

Canvas - Plane Distance

The distance at which the UI plane should be placed in front of the camera.

Canvas - Event Camera

The camera that will be used to process UI events.

Canvas - Receives Events

Are UI events processed by this Canvas?