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.

Drag and drop to create variables

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.

Drag and drop to add event handlers

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

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

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.

Jump to a variable’s declaration

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

Jump to a function’s definition

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.

Peek at a function’s definition

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

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.

Move lines of code

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.

Duplicate current line of code

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

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.

Insert a new cursor anywhere

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.

Toggle block comments

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

Document user-defined data

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.