Skip to content

Scripting Tips and Tricks

Studio is being deprecated, please head over to the documentation page for Mattercraft, our most advanced 3D tool for the web, where you can find the most recent information and tutorials.

ZapWorks Studio provides access to a powerful TypeScript scripting environment, allowing for complete control over your project’s functionality.

This article will go over a few tips and shortcuts you can use to speed up your development workflow.

You can drag and drop nodes found in your project (e.g. Hierarchy nodes, states, timelines etc.) into a script to declare a variable that references that specific node.

Once you’ve done so, you’ll be able to access that variable in your script through the name provided during its declaration.

If you’d like a variable to be accessible from other scripts in your project, be sure to pass in the export keyword in its declaration.

As well as creating an instance variable, certain nodes provide the option to create event handlers when the node is dragged into a script.

The event handlers available will vary depending on the node’s type. You can find a list of events accessible by each node type over on the Scripting References section of the documentation.

Drag and drop to activate a state, or play a timeline

Section titled “Drag and drop to activate a state, or play a timeline”

You can also drag and drop a state into a script to call the activate() or reset() function on the state.

Doing the same with a timeline will allow you to call the play(), stop() or reset() functions on the timeline.

Drag and drop to construct symbol definitions

Section titled “Drag and drop to construct symbol definitions”

Subsymbols can also be dragged into a script from the Symbol Definitions panel to construct a new instance of the subsymbol.

This differs from dragging a symbol’s node from the Hierarchy into a script, which creates a variable that references a specific instance of the subsymbol, whereas this method constructs a new instance of the subsymbol.

CLicking on a variable while holding down the Ctrl / ⌘ key will jump to the point in the script at which it was declared.

Similarly, clicking on a function while holding down the Ctrl / ⌘ key will jump to the function’s definition. This also works with functions exported from a different script node, even those exported from within a subymbol.

Clicking on a function while holding down the Alt + F12 / ⌥ + F12 key combination allows you to peek at the selected function’s declaration without jumping to it.

To remove the pop-up window press ESC.

Select a node/state/timeline declaration in a script to select it within the project

Section titled “Select a node/state/timeline declaration in a script to select it within the project”

Clicking a node’s declaration while holding down the Ctrl / ⌘ key will select the corresponding node in the project’s Hierarchy.

When performing the same action with a state or timeline definition, the corresponding state/timeline within the Controllers panel will be selected.

Using the up/down arrow keys while holding down the Alt / ⌥ key will move the line of code the cursor is currently on in the corresponding direction.

Holding down the Shift+Alt / ⇧+⌥ key combination while pressing the up key will duplicate the current line of code above your current line.

The same key combination with the down key will duplicate this to line below.

Insert a new cursor above/below current line

Section titled “Insert a new cursor above/below current line”

Holding down the Ctrl+Alt / ⌘+⌥ key combination with the up key will insert a new cursor at the end of the line above, allowing you to edit both lines simultaneously.

The same key combination with the down key will insert the new cursor at the line below.

Holding the Alt / ⌥ key while clicking in your script will insert a new cursor at that location, allowing you to type simultaneously at the various cursor locations.

Selecting a line(s) of code, and pressing Ctrl+Alt+A / ⇧ + ⌥ + A will toggle block commenting on the selected code.

JSDoc comments can be used to document user-defined data such as variables or functions.

Text wrapped with /**...*/, and positioned above user-defined data, will be treated as a JSDoc comment for that specific function/variable.

These comments will appear as hints when hovering over the function/variable at any other point in your script.

For a full list of available shortcuts press F1 on your keyboard (on Mac systems you may have to use Fn+F1) while in Studio’s scripting environment.