Skip to main content

Button

The Button Component is a convenient shortcut for creating User Interface buttons for use with Screen and Element Components. It responds to input on the element of its own entity, which should have Use Input enabled.

The Button Component can be used in two Transition Modes. Sprite Change, which uses a different sprite or frame for each button state or Tint, which tints a single sprite with a different color for each state.

Common Properties​

PropertyDescription
ActiveWhen enabled the button will respond to and fire events. When disabled the button is set to the Inactive State.
ImageThe entity whose image element changes color or sprite as the button changes state. The User Interface › Button menu sets it to the button's own entity. With no entity, the button doesn't change.
Hit PaddingAdditional space around the button's own element that will be included when testing for input events. Specified as left, bottom, right, top padding values.
Transition ModeThe type of effect to use when transitioning between states. Either Sprite Change or Tint.

Sprite Change Properties​

Sprite Change Button

PropertyDescription
Hover SpriteThe Sprite Asset used when the button is in the Hover State.
Hover FrameThe Sprite Frame to display when the button is in the Hover State.
Pressed SpriteThe Sprite Asset used when the button is in the Pressed State.
Pressed FrameThe Sprite Frame to display when the button is in the Pressed State.
Inactive SpriteThe Sprite Asset used when the button is not active.
Inactive FrameThe Sprite Frame used when the button is not active.

Tint Properties​

Tint Button

PropertyDescription
Hover TintThe color to tint the Image Element with when the button is in the Hover State.
Pressed TintThe color to tint the Image Element with when the button is in the Pressed State.
Inactive TintThe color to tint the Image Element with when the button is in the Inactive State.
Fade DurationThe time in milliseconds to blend between the different state colors.

See Also​

Scripting Interface​

You can control a Button Component's properties using a Script Component. The Button Component's scripting interface is here.