This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

The Spark AR Studio extension is an extension available to Visual Studio Code that provides a number of features that make it easier to develop Spark AR effects using scripts. These features include:

  • Code syntax highlighting and auto-completion;
  • Javascript and Typescript debugging;
  • SparkSL syntax support and auto-completion;
  • Map Spark AR Studio debug console
  • Monitor and debug reactive signals through mapped monitor views;
  • A responsive graph visualizer for real-time code execution observations.

Ready to start

Make sure you have the latest version of Spark AR Studio installed. If you do not already have Visual Studio Code installed, you will need to install Version 1.47 or later.

Install the extension

Extensions can be installed from the Visual Studio Code Marketplace website, or from the Visual Studio code itself. To install from Visual Studio Code, open the Extensions TAB and type Spark AR Studio in the search bar.

Select the options shown below to open the extension page and click the Install option.

Use the extension

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

If your project does not contain any scripts, or if you have already created a new project, add the script by clicking Add Asset and then clicking Script in the Assets panel.

JavaScript and TypeScript files are supported with extensions.

Open your script in Visual Studio Code. If you have created a new script and have not renamed it, it will be called script.js by default.

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

This can also be used as a connection status indicator to show whether the project successfully connected to the extension.

Activating the extension creates a new workspace in Visual Studio Code with a structure that mirrors the project structure of a synchronized Spark AR Studio project.

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

If any changes to the Spark AR Studio project structure are detected, the workspace is automatically updated.

Mapping console

Messages logged to the Spark AR Studio console through the DiagnosticsModule API are mapped to Visual Studio code. In your existing script, or in the script.js file you added in the previous step, add the following code:

const Diagnostics = require('Diagnostics');
Diagnostics.log("Hello from Spark!");           
				 
Copy the code

If you are using TypeScript, replace the first line with:

import Diagnostics from 'Diagnostics'; 
Copy the code

After activating the extension, you will see Spark AR Studio console output (next to the extension UI panel) in Visual Studio Code.

You’ll also see a mapping error in the console:

debugging

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

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

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

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

import FaceTracking from 'FaceTracking';
import Diagnostics from 'Diagnostics';   
Copy the code

Place a breakpoint at line 5

In the debug panel, select Run and Debug, and then select Spark AR Studio from the drop-down box.

The debugging session starts and then stops at the specified breakpoint. Hovering over variables in debug mode displays more information about their state:

Learn more about debugging in Visual Studio Code.