Events and Data binding

You can add event handlers to elements in the scene or to the scene itself to handle various events. You can use them to enhance the functionality of your UI or to setup data binding between the game and the UI.

Scene events

Adding event handlers

To add an event handler for a specific event of the scene click on the "Events" menu in the scene properties panel and choose the event from the dropdown list. Currently there is only one possible scene event - "On scene load" which will be triggered after the scene has finished loading.

Adding JavaScript

Once you've selected the event, a window with code editor functionality will appear. The code that you add in it will be attached on 'window' object and it will be executed when the event occurs.

Adding event handlers to scene elements

You can add event handlers to elements from the Events menu of the Properties panel

Types of events handlers

There are four different types of event handlers that you can choose from for each event - Blueprint, engineCall, engineTrigger or JavaScript.

Blueprint event handlers

(UE4 only feature!) You can enter the name of a Blueprint function in the game to be called when this event occurs in the game.

Note that you need to create custom event in a Blueprint that has a Coherent view as component. The Coherent view should show the HTML page created by the Editor. For more information about Coherent views please refer to the UE4 guide.

To create a custom event in UE4 open the Blueprint, right click and from the menu select custom events

Then enter the name of the custom event to match the name in the Editor.

Lastly you just need to connect the custom event to whatever action you want to occur in the game.

In the example above when the user clicks on the "button" element in the HTML page, its click event is triggered which calls the "sendHelloToGame" event in UE4 which prints a message on the screen.

Engine call event handlers

Another type of event handler that you can use is engine call. It allows you to send a call to a specific function in the game. The call can return a value from the game but can have only one handler by itself. You can also add or remove parameters that will be passed to the function in the game using the "+" and "x" icons below the call. For more information about the engine call and how you can register for it in the game please refer to relevant guide for your platform in our documentation.

Engine trigger event handlers

Another type of event handler that you can use is engine trigger. It allows you to send an event to a specific function in the game. The event cannot return a value from the game but it is possible to have multiple handlers for it in the game engine. You can also add or remove parameters that will be passed to the function in the game using the "+" and "x" icons below the call. For more information about engine trigger and how you can register for it in the game please refer to relevant guide for your platform in our documentation.

JavaScript event handlers

Another option for an event handler is to write your own JavaScript code that will be executed when the event occurs. When you click on the JavaScript option in the events` dropdown menu, a window with code editor functionality will appear. You can use it to add your JavaScript code.

You can also use variables and functions defined in the scene events or from external JavaScript file imported from the Files panel.

Data binding attributes

In the data binding section of the properties panel you can also specify data binding attributes that can be bound to a data model in the backend.

By combining the data binding attributes and the engine call/engine trigger/blueprint events you can setup two-way communication between the UI and the application. For more information please refer to the data-binding documentation of the relevant backend renderer.