Hover, pressed and disabled looks

See and use the looks of an element when it is pointed at, pressed or disabled.

A good button reacts when you point at it or press it. These looks are called states:

• Normal: how it usually looks.
• Hover: when the mouse is over it.
• Active: while it is being pressed.
• Disabled: when it can't be used.

See the states

1. Select a button.
2. Open the States tab.
3. Click a state, for example Hover: the canvas shows the button in that state.
4. Click Normal to go back to how it usually looks.

The preview is only for looking. It does not change your design, and it ends when you click Normal, leave the tab or select something else. The eye button next to the state's name turns the preview off while you keep editing that state.

What the built-in components do

Most built-in components already have nice states. A game button grows slightly and gets a stronger shadow on Hover, shrinks a little when Active, and fades out when Disabled. The list in the States tab shows what each state changes, for example "Root: transform, shadows".

Your own hover effect

The built-in states follow the element's own colours, so a red button still gets a red hover look. For a different effect on one element, use the Animate tab instead: add an animation with the Hover start trigger (for example a grow or a wiggle) and one with Hover end to go back. See Animations.

Selected: one choice at a time

Selected is the look of the element the player has chosen. By default an element is selected while a controller or the keyboard is on it. To make a click select it and keep it selected, for example for character cards, shop items or difficulty buttons:

1. Open the States tab and pick Selected.
2. Turn on Stays selected after a click.
3. Give the elements that belong together the same Selection group name, for example heroes. Then only one of them is selected at a time. With no group, a second click deselects the element.
4. Turn on Selected when the screen opens for the one that starts selected.

Then change what the selected one looks like (a gold border, a bigger size…), and use the On Selected / On Deselected triggers in the Actions tab to show its details, play a sound or set a variable.

Disabled

An element is disabled when:

• you turn on Disabled in its Properties, or
• an action disables it while the game runs (Actions → Disable).

A disabled element shows its Disabled look and ignores clicks. Use Enable to bring it back, for example when the player has enough coins.

Tip: States work in Play mode and in Unity. In Unity they are driven by the normal button events, so they also work with a gamepad. See Gamepad and keyboard.