Untitled

📰Getting Started | ⭐**Updates |** 📝 Guides | 🔢 API | ❓FAQ

Guides Overview

Creating Button Elements

To create a Button in your experience that can be pressed to make something happen in your experience, simply press the three dots dropdown in the hierarchy and select the “Button” option.

Untitled

An element labelled “Button” will show up, and a spherical object will appear in the scene. In the Web Editor, you can click it with the left mouse button to see what happens when the button is activated. However, the button won’t do anything on its own - you will need to interact with the Button API.

Untitled

Below is some example code. If this element was created from the “Button” option, its self will contain a button object that enables you to assign something to happen when the button is pressed and change the button’s visual appearance.

See this page for lists of fonts, colors, icons and other values that you can use here.

// includes
const messages = require('messages');
const self = this;
const button = self.button;

// public fields
const LABEL = '{[Label:string]}';
const COLOR = '{[Color:string]}';
const ICON = '{[Icon:string]}';
const FONT_SIZE = {[Font Size:int=80]};
const DISPLAY = "{[Display Mode:string=Occluded]}";

/**
 * Called when the script is initialized.
 */
function enter() {
  button.label = LABEL;
  button.color = COLOR;
  button.icon = ICON;
  button.fontSize = FONT_SIZE;
  button.display = DISPLAY;
  
  button.registerPress(onButtonPressed);
}

function onButtonPressed() {
	log.info("the button was pressed!");
}

function exit() {
	button.unregisterPress();
}

You now have a pressable button that invokes JavaScript code! The best way to make it trigger other events in the experience is to make it dispatch a message on press. See the Messages API.

Untitled

Identifying Button Elements

You will always be able to tell if a scene element is a Button Element if you see this label at the top of its inspector:

Untitled

Button Element in Multiplayer

If you mark a Button Element as “Networked”, if it is pressed while connected to a multiplayer game, the code will be invoked on the Host device rather than on the client’s device. This makes it possible for individual players to affect what’s going on in the central game running on the server.

All Button Element Properties

Search for the relevant property here to see all available options.

button.label = "Hello World!";
button.fontSize = 80;
button.display = "Occluded";
button.lineSpacing = 0.5;
button.color = "Highlight";
button.icon = "play";

button.registerPress(function);
button.unregisterPress();

Sidebar Table of Contents

Untitled

Copyright Š 2021 Enklu, Inc.