Button

The Button object creates a form button which the user can click to perform an action. It can also be set to be a checkbox. Below shows both modes of the Button object in Google Chrome: a push button on the left, and a checkbox on the right.

Form controls are actual HTML elements floating above the game canvas in the HTML page. Therefore, nothing can be displayed on top of a form control, apart from other form controls.

Form controls position themselves according to the layer parallax, scale and so on. However they are not truly "in the game" (since they float above), so it is recommended to avoid using scrolling, parallax and layer scaling with form controls, otherwise the end result can feel unnatural.

Styling Button objects

Button controls can be customised in a huge number of ways via CSS (Cascading Style Sheets). Rather than adding actions to set all of the possible properties, the Button object exposes a Set CSS style action. Knowing CSS will of course be an advantage here, but it is simple to use for simple properties. A few examples are listed below.

Make the text red: Set "color" to "red"

Make the background yellow: Set "background-color" to "yellow"

Make the border a thick light grey: Set "border" to "3px solid [#]AAAAAA"

Make the font bigger: Set "font-size" to "2em"

Make a dashed red border: Set "border" to "2px dashed red"

Button properties

Type

Either Button for a push-button or Checkbox for a checked/unchecked control. See the image above for a demonstration of both types.

Text

The text appearing on the button face or checkbox label.

Tooltip

A tooltip that appears in most browsers if the user hovers the mouse over the button and waits. Leave blank for no tooltip.

Initial visibility

Whether or not the button is shown on startup. If Invisible, the button must be shown with the Set visible action.

Enabled

Whether the button is initially enabled. If No, the button will be greyed out and cannot be pushed.

Auto font size

Automatically set the font-size property of the element according to the layout and layer scale. This will prevent the font-size CSS property being manually set with the Set CSS style action. Set to No if you intend to use Set CSS style to adjust the font-size property.

ID

(optional) An optional id attribute for the element in the DOM (Document Object Model). This can be useful for accessing the element's value from external scripts, or styling with CSS in the HTML page.

Checked

If Type is Checkbox, this is the initial check state of the control.

Button conditions

Is checked

If Type is Checkbox, is true if the control is currently checked.

On clicked

Triggered when the user pushes the button or checks/unchecks the control, either by keyboard, mouse or touch input.

Button actions

Set CSS style

Set a CSS (Cascading Style Sheets) style on the Button element. For more information, see the section Styling Button objects. Note that if the Auto font size property is set to Yes, any changes to the font-size property will be overridden.

Set checked

If Type is Checkbox, set the current check state of the control.

Set enabled

Set the button enabled or disabled. When disabled, the button appears greyed out and cannot be pushed.

Set focused

Set the input focus to the button.

Set text

Set the text on the button face.

Set tooltip

Set the text that appears for the button tooltip. Leave blank for no tooltip.

Set unfocused

Remove the input focus from the button.

Toggle checked

If Type is Checkbox, toggles the check state of the control.

Button expressions

The Button object does not have any of its own expressions.