Intro

Custom UI includes button, image, text, etc. displayed on the player’s screen.

You can enter the first-level editing page through “More - Custom HUD”:

In the lower right corner are the “NEW SCRIPT” and “EDIT LAYOUT” buttons.

Note: The custom UI can only be controlled through block script introduced in Chapter 9.

If you haven’t read Chapter 9 yet, it is recommended to read it first.

Manage Custom UI

Click the “CREATE HUD” button in the upper left corner to add a new UI.

Select a custom interface and you can rename, copy, and delete it:

Edit Custom UI

Each custom UI is like a bag that can hold various widgets.

Click “EDIT LAYOUT” in the lower right corner to enter the second-level editing page:

Click the four square buttons in the lower left corner, in the order from left to right to add text, image, button and empty node respectively.

The eye button in the lower right corner controls whether to display the game interface, and the arrow paper buttons are for undo and redo.

In the “PROPERTY SETTINGS” panel on the right, you can change various properties of widgets, including their graphics and name.

Select a widget and the buttons on its frame can be used to scale, rotate, and delete it.

The HIERARCHY panel on the left indicates the relationship between widgets.

Widgets at a higher level will move, scale, and rotate their subordinate widgets together;

Widgets at lower rows in the panel will block widgets at higher rows.

If you need to adjust the hierarchy of a widget, you can long-press and drag it.

Note: place the button where it does not conflict with other game buttons.

Write the Logic

As mentioned before: custom UI can only be controlled by block script.

Return to the first-level editing page and click the “NEW SCRIPT” button. Add the following blocks:

Don’t forget to drag the “Triggering Player” block into the empty space in the “Entity” slot.

In simple terms, we will use a button to control the player’s invincibility property.

The “When pressing button” event will set the player’s invincibility property to true; the “When releasing button” event will set the player’s invincibility property to false.

Once you add a button while editing custom UI, these corresponding events will be automatically added to the left panel.

Enter the game, the custom UI will not be displayed, because this script is mounted on the custom UI, and the custom UI has not yet been created.

Enter the global script and add the following blocks onto those from the previous chapter, to display this custom UI for players joining the game:

Enter the game, player will become invincible while holding down the button:

If you want to stop using this custom UI (for example, at the end of the round), you can hide it using the following blocks:

Note that the above blocks need to be added to the script of the custom UI.