Creating Buttons

Buttons are a fundamental part of experiences built with ZapWorks Studio. They're a key mechanism for introducing interactivity - enabling your users to navigate your zap, or influence its execution.

Buttons

pointerdown Event

The easiest way to create a button in ZapWorks Studio is to use the pointerdown event emitted by plane nodes.

The 'pointerdown' event is emitted when a pointer (typically a finger or, on Zappar Desktop, a mouse cursor) is depressed and intersects with the object's geometry.

Attaching code to the 'pointerdown' event for a plane node is a great way to build a button that the user can press.

Creating a Simple Button

We can turn a plane into a button by right-clicking on the plane node in the Hierarchy and selecting 'New > Script > pointerdown'.

This will create and open a new script node below the plane, populated with a pointerdown handler function. Any code placed within this function will run when the plane is pressed.

We can choose, for example, to launch the Zappar website using the launchURL(...) function.

Example:

parent.on("pointerdown", (e) => {
    // Runs when pointerdown occurs on the parent node
    // The argument e contains useful info about this event:
    // https://docs.zap.works/studio/scripting/reference/object/events/pointerdown/

    Z.device.launchUrl("http://www.zappar.com");
});
zapcode branded_zapcode i