Interaction Components

This section covers components in the UI system that handles interaction, such as mouse or touch events and interaction using a keyboard or controller.

Selectable Base Class

All the interaction components have some things in common. They are all selectables, and that means they all have shared built-in functionality for visualising transitions between states, and for navigation to other selectables using keyboard or controller. This shared functionality is described here.

Within a selectable component there are several transition options depending on what state the selectable is currently in. The different states are: normal, highlighted, pressed and disabled.

Here are the transition options:

• Color Tint - Changes the colour of the button depending on what state it is in, it is possible to select the colour for each individual state. It is also possible to set the Fade Duration between the different states. The higher the number is, the slower the fade between colors will be.

• SpriteSwap - Allows different sprites to display depending on what state the button is currently in, the sprites can be customised.

• Animation - Allows animations to occur depending on the state of the button, an animator component must exist in order to use animation transition. It’s important to make sure root motion is disabled. To create an animation controller click on generate animation (or create your own) and make sure that an animation controller has been added to the animator component of the button. See Animation Integration for more information.

• None - This option is for the button to have no state effects at all.

The Navigation options refers to how the navigation of UI elements in play mode will be controlled.

Button

Buttons have an option for OnClick functionality to define what the Button will do when clicked. In the bottom right is a ‘plus’ symbol to add a delegate; the first section is for selecting an object whose functions are required, then next is for selecting a function and the last area is used for variables depending on the selected function.

The label attached to the button has a Text component, the Label is separated from the Button to allow more freedom in design and customisation. It is possible to set the displayed text, font, font style, font size, text colour and whether or not rich text formatting is enabled.

Toggle

A Toggle has a Rect Transform component, an Image component and a Toggle component. It also has a child Label gameObject attached to it which has a Rect Transform component and a Text gameObject. Toggle has an additional child Image gameObject attached called Background which is where the the toggle background is set, as well as having its own Image gameObject child called Checkmark to show the toggle to selected or unselected.

The Is On checkbox determines whether or not the toggle is currently on or off.

Toggle Transition gives you the option to fade between the toggle being active and not active.

The graphic option is for changing the Toggle background to a more suitable image, this will be affected by colour changes if ColorTint is selected.

There is an option for On Value Changed functionality to define what the Toggle will do if selected. In the bottom right is a ‘plus’ symbol to add a delegate; the first section is for selecting an object whose functions are required, then next is for selecting a function and the last area is used for variables depending on the selected function.

Toggle Group

A Toggle Group can be used to group a set of Toggles. 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.

In the image below you can see a Toggle Group with one Toggle that’s on and the remanders off.

The Toggle Group is setup by dragging the Toggle Group object to the Group property of each of the Toggles in the group. Toggle groups are useful anywhere the user is to make a choice from a list of mutually exclusive items.

Slider

The Slider gameObject can be either vertical or horizontal, it has a child object attached to it called the Fill Area which also has child attached to it called Fill. The Fill gameObject’s transform values are driven by its parents transform values so that it cannot exceed the bounds of the Slider gameObject.

The direction of value increase can be set to left to right or right to left for a horizontal Slider, or up to down and down to up up for a vertical Scroll Bar.

You can set the minimum and maximum slider values in the Min Value and Max Value fields. If Whole Numbers option is selected then the slider will only move up or down when the value is a whole number. Value is the current value the slider is positioned at.

It is also possible to add script behaviour for when the value of the slider is changed, which can be customised in the On Value Changed field.

Scrollbar

The Scrollbar gameObject can either be vertical or horizontal. It has a child object attached to it called Background which also has child attached to it called Sliding Area which has a child called Handle. The Handle gameObject’s transform values are driven by its parents transform values so that it cannot exceed the bounds of the Scrollbar gameObject.

Handle Rect defines what the slider will look like, by default it is set to the child gameObject called Handle. The direction of value increase can be set to left to right or right to left for a horizontal Scroll Bar, or up to down and down to up up for a vertical Scroll Bar.

The beginning Scroll Bar value can be set using the Value field and the size of the scroll bar itself can be changed in the Size field. The scroll bar’s value steps can also be set using the ‘number of steps’ field, e.g 3 steps means the scroll bar will show 0%, 50%, 100%.

It is also possible to add script behaviour for when the value of the scroll bar is changed, which can be customised in the On Value Changed field.

Scroll Rect

A Scroll Rect is used when a large image, or a large group of UI controls needs to be displayed in a small area. The Scroll Rect provides the functionality to scroll over images or other UI elements, with or without the use of scrollbars. Usually it’s combined with a Mask and Image on the parent Rect Transform in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible.

In the Hierarchy, things should be arranged like this: The Rect Transform with the Scroll Rect on it also has a Mask component on it. In the image below this object is called ScrollView.

As a child to the ScrollView should be a single RectTransform that functions as a parent to all the scrollable content. In the image below this object is called Content. All the scrollable UI elements should be children of this Content object. The Content object should also be dragged into the Content property of the Scroll Rect component.

Optionally, the Scroll Rect can be linked to a horizontal and/or a vertical Scrollbar. These are typically placed in the hierarchy as siblings to the scroll view, and when present, should be dragged into the Horizontal Scrollbar and Vertical Scrollbar properties of the Scroll Rect, respectively. Note that the Direction property on such a horizontal Scrollbar should be set to Left To Right, and on the vertical Scrollbar to Bottom To Top.

Input Field

An Input Field is used to make the text of a Text Control editable.