Node Copied to Clipboard!

Buttons


Buttons can be used to enhance the interactivity in your lessons.

Buttons need to be setup in a Setup Node. You can add a button to your scene by right-clicking in the setup window and selecting Add > UI > Button, or clicking the add button icon in the setup tab of the The Ribbon after simulating the lesson.

You can then click on the newly created Button object in the setup list to access its properties in the properties tab.

NOTE: If the button is not visible in the Editor window make sure the toggle UI icon in the top left corner is selected.

Click on the button UI in the editor window and you can resize and position the button using the adjustable box labelled Button.

A button has three different states

Normal: The buttons resting state without any user interaction.

Hover: What the button will look like while the player is hovering over the it.

Pressed: What the button will look like as it is being pressed.

For each of these states you can adjust the text and background color so that it is clear to the player what state the button is in.

Applying Interactions

You can have your lesson react when a button is interacted with by applying the IsClicked node.

First you need to drag the button UI object from either the Editor window or the Scene Hierarchy into the storyboarder.

Dereference the IsClicked node by clicking the bottom handle and typing IsClicked in the search bar. Dereference an If node from the IsClicked.

This new node will perform whatever action is attached to the upper handle of the if statement, only if the button is pressed.

We must continuously check if the player has pressed the button or not, so we need to attach it to a loop.

This example will continuously check if the button has been pressed and only display the messagebox when the button is clicked and then stop checking by ending the loop.

If you have multiple buttons, you could apply their Button-IsClicked nodes to a Branch node.

Node