The Spark AR Extension for Visual Studio Code

The Spark AR Extension for Visual Studio Code

Spark AR Studio Extension for VSCode is a Visual Studio Code extension providing support for Spark AR Studio scripts, featuring Language Support, Debugging, Mirrored Console and more. You’ll also have access to integrated code helpers to see inline errors and warnings.

Getting started

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

Downloading the extension

Click the box below to display the Download Extension option.

By downloading the extension, you agree to the Spark AR Studio Terms and Facebook's Data Policy. You can uninstall the extension at any time.

I accept the Spark AR Studio Terms and Facebook's Data Policy

Unzip the downloaded file in a directory of your choice and make a note of its path, as you'll need to point Visual Studio Code to the .vcix file it contains.

Installing the extension

If you haven’t already installed Microsoft Visual Studio Code, download it here. You’ll need to install v1.47 or above.

To open the Spark AR Studio extension in Microsoft Visual Code:

  1. Open Microsoft Visual Code.
  2. Under the extensions menu, click then Install from VSIX.
  3. Navigate to the unzipped folder from the earlier download step and select Spark AR Studio Helper.vsix.

With these steps complete you’ll see the extension in your Installed section:

Using the extension

Start by opening a project in Spark AR Studio.

Next, create a new script:

  1. In the Assets panel, click Add Asset.
  2. Select Script from the menu.

In Visual Studio Code, open the script you just created. It will be called script.js by default.

Click on the connection status indicator found at the bottom of the window to activate the extension:

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

This allows you to easily switch between and edit multiple scripts, 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

To mirror the Spark AR Studio Console in Visual Studio Code:

  1. In Spark AR Studio, create a new script.
  2. In the script, write the following code:

In Visual Studio Code, activate the Spark AR Studio Extension. You’ll see the console output in Visual Studio Code along with the extension UI panel.

You’ll also see errors in console:


In VSCode, create a script file using the following code:

Place a breakpoint in line 6:

In the debug panel, select Run and Debug, then Spark AR Studio.

The debug session will start and stop at the breakpoint assigned:

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

Create a new script with the following code:

Next load the script in Visual Studio Code and activate the extension. 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]

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?