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 Add Asset 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 Visual Studio Code.

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!");           
				 

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

import Diagnostics from 'Diagnostics';           
         

With the extension active, you’ll see the Spark AR Studio console output in Visual Studio Code along with the extension UI panel.

You’ll also see errors mirrored in the console:

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:

Learn more about debugging in Visual Studio Code.

Multipeer Debugging

With a multipeer effect 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

Opening a SparkSL script file in Visual Studio Code with the extension active will enable syntax highlighting.

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

Was this article helpful?