Scripting
The Spark AR Extension for Visual Studio Code

The Spark AR Extension for Visual Studio Code

The Spark AR Studio extension is an extension available for Visual Studio Code which provides a number of features that make the development of Spark AR effects that use scripting easier. These features include:

  • Code syntax highlighting and autocompletion.
  • Javascript and Typescript debugging.
  • SparkSL syntax support and autocompletion.
  • Mirrored Spark AR Studio debugging console.
  • Reactive signal monitoring and debugging via a mirrored Watch view.
  • Reactive graph visualizer for real-time code execution observation.

Getting started

Make sure you have the latest version of Spark AR Studio installed.

If you don't have Visual Studio Code installed already, download it here. You’ll need to install version 1.47 or above.

Installing the extension

The extension can be installed from the Visual Studio Code marketplace website, or from within Visual Studio Code itself.

To install from Visual Studio Code, open the Extensions tab and type Spark AR Studio into the search bar.

Select the option shown below to open up the extension's page and click the Install option.

The extension is now ready to use with your Spark AR Studio projects.

Using the extension

Start by opening a project in Spark AR Studio or creating a new one.

If your project doesn't contain any scripts, or if you've created a new project, add a script by clicking + and then Script in the Assets panel.

Both JavaScript and TypeScript files work with the extension.

Open your script in Visual Studio Code. If you've created a new one and haven't renamed it, it will be called script.js by default.

While still in Visual Studio Code, click on the Spark AR Studio option found at the bottom of the window to activate the extension.

This also serves as the connection status indicator, which displays whether the project is successfully connected to the extension.

Activating the extension creates a new workspace within Visual Studio Code, the structure of which mirrors the project structure of the synced Spark AR Studio project.

This allows you to easily switch between and edit multiple scripts in the project, as well as visualize textures and other image files.

The workspace automatically updates if any changes to the Spark AR Studio project structure are detected.

Mirroring the console

Messages logged to the Spark AR Studio console via the DiagnosticsModule API are mirrored in the console panel of the Terminal’s Spark AR tab.

In an existing script, or the script.js file added in an earlier step, add the following code:

const Diagnostics = require('Diagnostics');
           
Diagnostics.log("Hello from Spark!");
Diagnostics.warn("WARNING: This may cause an issue.");
Diagnostics.error("ERROR: Ran into an issue.");
Diagnostics.warn("WARNING: This may cause something to go wrong.");
Diagnostics.error("ERROR: Something's gone wrong.");
				 

If you're using TypeScript, replace the first line with:

import Diagnostics from 'Diagnostics';           
         

With the extension active, you’ll see the output in the console:

The mirrored console also provides additional functionality, equivalent to the console found within Spark AR Studio.

The left dropdown allows you to select a specific project, if there are multiple projects open within Spark AR Studio.

You can use the right dropdown to filter console messages by type (normal, warning or error).

The search tool allows you to filter logged messages to those that match the given case-sensitive string.

You can also use the console to execute code:

Debugging

Replace the code in the previous script with the snippet below:

const FaceTracking = require('FaceTracking');
const Diagnostics = require('Diagnostics');

FaceTracking.face(0).mouth.openness.monitor().subscribe((event) => {
    Diagnostics.log(event);        
});
         

If you're using TypeScript, replace the first two lines with:

import FaceTracking from 'FaceTracking';
import Diagnostics from 'Diagnostics';        
         

Place a breakpoint on line 5:

In the debug panel, select Run and Debug, then select your project in the dropdown. If you have multiple projects open in Spark AR Studio, these will all be listed.

The debug session will start and then stop at the breakpoint specified. Hovering over the variables in debug mode will show you more information about their state:


Debugging mirrored effects

By default, the extension begins the debugging session with the instance of the effect running within Spark AR Studio as the target. However, you can also debug a mirrored effect running in the Spark AR Player app for Android.

To do so, connect your mobile device to your computer with a USB cable. Then, with the effect open in Spark AR Studio, mirror the effect to the device.

If the device connected successfully, the mirrored effect will appear as a debugging target in the project selection dropdown within Visual Studio Code:



The versions of the effect running in Spark AR Studio and the Spark AR Player app must match.



Devices connected to the same network as the computer will also appear as debugging targets, if they’re running the Spark AR Player app.

Learn more about debugging in Visual Studio Code.

Multipeer Debugging

If there is an effect using the multipeer capability open in Spark AR Studio, the extension displays the multipeer debugging tool within the Spark AR tab in the console.

The built-in tool allows you to simulate message relays between instances of a multipeer effect.

Take a look at our in-depth Multipeer Debugging article for an in-depth look at debugging multipeer effects.

Adding watchers

Replace the code in the previous script with the snippet below:

const FaceTracking = require('FaceTracking');
const Diagnostics = require('Diagnostics');

Diagnostics.watch("Mouth openness value: ", FaceTracking.face(0).mouth.openness);
         

If you're using TypeScript, replace the first two lines with:

import FaceTracking from 'FaceTracking';
import Diagnostics from 'Diagnostics';        
         

Mirrored watchers can be seen in the Spark AR Watchers dropdown from the Run and Debug panel in Visual Studio Code:

Reactive graph visualizer

The reactive graph visualizer displays the objects and properties in your script and their dependencies. The graph is dynamically updated, allowing you to view how script execution affects the connections between objects in real-time.

This can help to verify that relationships have been set up correctly and when paired with the debugger, to identify lines of code that may have caused issues with object dependencies.

Add a new JavaScript file to the project and copy and paste the code below into it:

// Load in the required modules
const Scene = require('Scene');
const FaceTracking = require('FaceTracking');

(async function() { // Enable async/await in JS [part 1]
    
    // Locate the plane in the scene
    const plane = await Scene.root.findFirst('plane0');
    
    // Create a reference to a detected face
    const face = FaceTracking.face(0);
    
    // Bind the plane's position to the detected face's position
    plane.transform.position = face.cameraTransform.position;

})(); // Enable async/await in JS [part 2]
        

If you're using TypeScript, replace the first two lines with:

import Scene from 'Scene';
import FaceTracking from 'FaceTracking';
        

With the code above, the Spark AR: Graph Visualizer tab in the terminal window will display the following nodes and dependencies:

SparkSL support

Visual Studio Code also has a Language Server setting which shows real time semantic errors for SparkSL script files.

Enabling Language Server

First, with the Spark AR Studio extension active, open a SparkSL script file in Visual Studio Code:

Next:

  1. Open the Extensions tab.
  2. Click the gear icon and select Extension Settings.
Extension Settings highlights in Extensions menu

Finally, select the Enable Language Server option.

Once the extension is enabled, you’ll see inline errors if any issues are detected:

Code autocompletion is also supported. For example, typing std:: will display a list of functions provided by the SparkSL API.

Was this article helpful?