CLEAR

Scripting Basics

In this guide we'll cover how to:

  • Create and edit scripts.
  • Load modules.
  • Access scene objects.
  • Edit scene object properties.

Before you Start

Below are some important points to consider when scripting in Spark AR Studio:

  • Each project can only have a maximum of one script.
  • As external script editors are used, autocomplete functionality is limited.
  • JavaScript ES6 is supported when writing scripts.
  • Make sure that you test and debug your scripts.

Creating a Script

To create a new script:

  1. Go to the Assets panel and click the + button.
  2. Select Create New Script.



Opening a Script

To open a script:

  1. Double-click on the script file in the Assets panel.
  2. The script should open in the script editor set in the Preferences window.



Editing a Script

To edit a script:

  1. Make the changes within the script editor.
  2. Save the changes and return to Spark AR Studio.



Changing the Script Editor

To change the editor used for editing scripts:

  1. Select Preferences from the Spark AR Studio menu item.
  2. Under the General tab select your preferred editor from the Script Editor dropdown menu.



Loading Modules

In order to use the specific functionality of a module, you'll need to load the module into a script, using the require function.

// Loading in the Scene module
const Scene = require('Scene');

For a complete list of modules and explanations on what they do, check out the Reference Documentation. Every module is identifiable by the word 'Module' in it's name, however, you omit the word 'Module' when using the require function.



Accessing Scene Objects

There are two ways of accessing objects within the scene in a script, child and find. Both methods rely on access to the Scene module so make sure you've loaded it in as shown above.

In the following examples we will be accessing the directional light that comes included with new projects.


Child

You can chain the child method to access objects within the scene using it's path after accessing the root property of the Scene module.

// Accessing the directional light
const directionalLight = Scene.root.child('Device').child('Camera').child('Focal Distance').child('directionalLight0');

Find

The find method can be used to search for an object in the scene after accessing the root property of the Scene module.

// Accessing the directional light
const directionalLight = Scene.root.find('directionalLight0');

The find method will throw an exception if more than one scene object is found with the same name.



Editing Scene Object Properties

Once you have access to a scene object, you can then access it's properties and methods.

// Changing the intensity of the directional light to 0.5 aka 50%
directionalLight.intensity = 0.5;

Once we save the script the project will be updated and the property we edited, in this case intensity, will be grayed out.



All together the script looks like this, using the find method:

// Loading in the Scene module
const Scene = require('Scene');

// Accessing the directional light
const directionalLight = Scene.root.find('directionalLight0');

// Changing the intensity of the directional light to 0.5 aka 50%
directionalLight.intensity = 0;

As we are not changing the values of Scene or directionalLight we declare them as constants.


Next Steps

Now you've mastered the basics it's time to learn about reactive programming, the scripting model used in Spark AR Studio to create relationships between objects, assets and values.