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 Spark AR Studio in the dropdown.

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.

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';        
         

With the extension active you’ll see mirrored watchers in the Watchers 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 reactive graph 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?