OasisWManual 한국어
Section 8. UI and sound How-to Pending 2

Make a button

Make buttons the player presses on screen, such as "Retry" or "Start", and have a script do something when one is pressed. A button is an entity with a BUTTON component and an Image Element, and its label is a child Text Element.

The tests on this page were done on 2026-10-29 in the oasisw.ai editor (version shown as OasisW 7e2aa65, macOS Chrome). Behavior without a separate note was tested once.

Before you start

Do it in the editor

1. Create a button

  1. Select 2D Screen in HIERARCHY.
  2. Click + → User Interface → Button.
  3. A Button is created under 2D Screen, along with a child Text under it.

The new Button has BUTTON and ELEMENT (Image, 100×100, centered on screen) components. In our tests, on Launch a white square with black Text appeared in the center of the screen. The child Text's Font was set to the font asset already in the project (NanumGothic.ttf). In a project with no font asset at all, the Text's Font was Empty, and on Launch only the white square appeared, with no label (tested 2026-10-30, 1 run). In that case, upload a font asset and set it in the Text's Font to make the label appear.

2. Change its look

  • Button label: select the child Text and change the Text field. Example: Retry. If the label uses Korean, add those characters to the font's Characters and regenerate.
  • Size and position: change the Button's Width, Height and Preset.
  • Color: the Button's ELEMENT Color is the base color, and Hover Tint and Pressed Tint in BUTTON are the colors on hover and on press.

All fields are listed in Element properties.

3. Make it do something when pressed

A button sends a click event when pressed. Receive this event in a script. The script below logs which press it is each time the button is pressed. To create and attach a script, see Create and attach a new script.

var ButtonClick = ow.createScript('buttonClick');

ButtonClick.prototype.initialize = function () {
    this.count = 0;
    this.entity.button.on('click', this.onClick, this);
};

ButtonClick.prototype.onClick = function () {
    this.count += 1;
    console.log('Button pressed: #' + this.count);
};
  1. Attach this script to the Button entity.
  2. Open the game with ▶ Launch and press the button.
  3. Check that the log appears in the browser Console of the game tab (Debugging).

In our tests, we created a script with the code above in the launched game, attached it to Button, and pressed the button twice. onClick was called both times (#1 and #2).

A Button created from the menu has Use Input in ELEMENT turned on from the start. In a test on 2026-10-30, one click on the button produced the events hoverstart → pressedstart → click in that order, and after turning Use Input off at runtime, clicking the same spot produced no events at all (1 run).

Restart the game from the beginning

The simplest way is to reload the current scene. Every entity in the scene returns to its initial state as saved in the editor.

var RestartButton = ow.createScript('restartButton');

RestartButton.prototype.initialize = function () {
    this.entity.button.on('click', this.onClick, this);
};

RestartButton.prototype.onClick = function () {
    // The name in quotes must match Scene Name in SETTINGS
    this.app.scenes.changeScene('physics-1029');
};

In our tests, after moving the box to X -2 and running this.app.scenes.changeScene('physics-1029'), the scene reloaded and the box fell again from its initial spot (height 4) and stopped at X 3, height 0.5 (1 run). If the scene name changes, the code must change too, so it's convenient to expose the name as a script attribute (type: 'string').

For a game made by the AI, it may be better to connect the button to the restart feature it already has (e.g. a key press). If a script manages the score across the whole project, reloading only the scene may leave the score in place.

Let the AI do it

When the game ends, show a "Retry" button in the center of the screen, and restart the game from the beginning when it's pressed.
Create the button under 2D Screen and name it RestartButton.
Don't touch anything else.

When it's done, play the game to the end with Launch and press the button. If the button label is in Korean, also check that the font contains those characters. Pending Test Let the AI do it — same prompt 3 times

Troubleshooting

SymptomCauseFix
The button is visible but has no labelThe child Text's Font is empty, or the font doesn't contain those charactersChange score and message text
Nothing happens when pressedUse Input is off, or another Element is covering itTurn on Use Input on the Button, and move the covering Element above the button in HIERARCHY. Confirmed that the button doesn't respond when Use Input is off (2026-10-30) Pending Test the case where another Element covers it

Next steps

Source ui-sound/buttons.html