Scripting Tips & Tricks

Hi ZapWorks Community,

Here’s a quick overview of some helpful tips & tricks for speeding up your scripting workflow in Studio. It’s easy to add more functionality to your Studio projects with very little code while dragging and dropping components and right-clicking to add functions.

Recommended Reading

General Principles
TypeScript Primer


Script Node : A hierarchy Subsymbol that holds the code for your script
Symbol.Node: Any content in hierarchy (e.g image target, 3D model, video, etc) accessible in scripts using the symbol.nodes variable. Note: automatically done if you just drag and drop a node into your script.
Eventhandlers: We can set handler functions on events for many of the node types in the Zappar platform. Event handlers are registered with the on(...) function. Called every time the event condition occurs, like a button press.
Variables: Variables store and modify values, can be numbers, strings of text, arrays (of multiple numbers), and more. Variables must be declared before they can be used.
Controllers/States : The building blocks for transition animations in ZapWorks Studio. A controller stores a user-defined set of node properties and acts as a holder for states and timelines.
Timelines: Extends controllers/states by allowing for the creation of custom, more complex, transition animations e.g. simultaneously rotating and moving a 3D model in the scene.

Keyboard shortcuts to speed up scripting workflow

These are the most commonly used to help you script faster, refer here for more.

Script node basics

Clicking on a script node in the Hierarchy view will reveal its code in Studio’s viewport (the centre of Studio’s UI). If you created a blank script then this will be empty and ready for you to type your own code. If however, you decided to choose one of the event handlers when creating the Script then you will have a function created for you attached to an event.

Creating a new script node

  1. Right-click on any node in the hierarchy.
  2. Hover over new, select blank or one of the pre-set event handlers. Refer to the docs here to see what each of them does.

Depending on the node you may also see options to automatically call common functions on it.

Drag and drop capabilities

Our intuitive drag and drop functionality allows you to quickly create a variable for nodes in your hierarchy and add event listeners to them. It also works for states and timelines, giving you finer control with within your project to activate and play them, respectively, however, you wish.

Using the scripting API reference

The reference shows all the various objects available to our ‘Z’ variable that all scripts have access to. It is used to access the various nodes and elements of the project, in addition to the functions and features of the user’s device Z.device.

Z.device provides a number of functions to interact with the underlying platform that will allow you to easily add dynamic actions to your studio projects. The IDE shows you all the available functions for the object when Z.device is typed.

Putting it all together

Two ways to add an event handler to a node in the hierarchy to launch an email.

Get some practice

Hope this was helpful, now see if you can implement some of these examples in your Studio project using what you learned above.