What is the UI

UI stands for User Interface. In games, such as the fire button, minimap, and crosshair — all part of the game’s UI.

In short, the UI is the way you communicate with the game.

Making a button that makes a sound

Let’s make a button that makes a sound when clicked.

Entering the UI editor

First, you need to go to the UI editor from “More” - “Customize UI”, where you will create a UI.

In the UI management interface, you can rename, copy and delete the entire UI at 1., edit the logic of the blockscript at 2., or edit the various elements on the UI at 3.

We don’t have any elements yet, so let’s go directly to the layout editor from 3.

Add a button widget

In layout editing, the center is our UI canvas, and the bottom left corner is where we can place elements on the canvas. There are four types of elements: text, images, buttons, and empty nodes. We call these UI elements with certain functions widgets.

Select the button in the lower left corner, and a basic button will appear in the center of the canvas.

The right panel shows various settings for the button. In this case, we don’t need to adjust the settings for the button. On the left side is a panel for viewing all UI widget levels, which currently only contains the button we just added.

Adding button text

Next, we will add a text widget. When you add the text widget, you might notice that it appears either below or at the same level as the button.

The text widget we added may be below the button’s level or at the same level as the button. This is because when you click in the lower-left area to add a widget, if you have selected a button, the new widget will be added below the button’s level; if no widget is selected, the new widget will be created at the top level.

Changes made to a parent widget will also affect its child widgets, such as moving, scaling, deleting, or closing the display. However, adjustments to child widgets are not synchronized to the parent.

We need the text to be a child of the button, so we need to select the button before creating it.

Next, select the text and modify the text on the right, for example, “Press me”:

What if the widgets are stacked on top of each other and I can’t select them? Click a few times to select the widgets in the current position in sequence.
You can also select the widget you want directly via the left-hand hierarchical menu.

Accessibility

The UI editor has a very useful accessibility feature in the bottom right corner:

On the right are the “Undo” and “Redo” options. If you make a mistake, these two functions can quickly get you back on track.

Clicking the left button displays the default UI on the canvas for reference, which can be used to help you adjust the custom UI widgets.

Let’s use this function to place the newly created button below the weapon bar:

Script editor

The button has been created, but the “press to make a sound” behavior needs custom logic. At this time, we need to go back to the previous page and select New Script to help us implement this logic.

Drag “When pressing button” into the canvas:

Remember what we need to do? We need the player to hear an audio effect when they press the button. Look for “Create Sound Effect” in the left-hand menu:

We found that the “Create sound effect” block needs some necessary parameters to run, which are in order:

1. For which player to play the sound effect
2. What sound effect to play
3. Whether to play the sound effect in a loop
4. Whether to start playing the sound effect immediately after it is created

You need:

1. Drag the triggering player from the red event block to the first parameter

2. Click on the second parameter and select the sound effect type in the recommendation bar that pops up on the left. After entering the sound effect type, click on the sound effect type on the Create Sound Effect block, and the sound effect selection UI will appear.Select a sound effect you like — for example, “Reaction” from the UI widget sound effect category.

3. Click on the loop type parameter, select the loop type on the left, and then select Play once. Imagine if you played a looping sound effect every time you clicked a button.

4. Select True for the Autoplay parameter

So far, we have created a custom UI, and now we are just one step away from the final step: how to open this custom UI.

Opening and closing the custom UI

Although the custom UI has been created, we need to open and close it at the right time.

First go to the global script editor:

Select “When the player joins” in the event category

In the game category, select “Create custom UI”

Like the script for the UI itself, this block script for creating custom UIs also needs some parameters to run.

1. For which player to open the custom UI
2. Which custom UI you want to open

You need:

1. Drag the player from the event into the first parameter:

2. If you have multiple custom UIs, select the one we just created:

Next, select the game category’s waiting block

The waiting time is set to 30,000 milliseconds, which is 30 seconds

In the physical category, select destroy blocks

Drag the entity returned in the Create custom UI block into this destroy block

And that’s it!

Effect

We have now created a button that makes a sound when clicked, and the logic to control whether it is switched on or off.

It will be created when the player joins and destroyed 30 seconds after creation.

Let’s click on the debug to see the effect.

Note: If you select loop playback for the sound effect or the duration of each playback is very long, clicking this button repeatedly will cause the sound effects to be played one after the other, causing them to overlap or play in quick succession.