Getting started

Make sure you have the latest version of Meta Spark 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 Meta SparkStudio 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 Meta Spark Studio projects.

Using the extension

Start by opening a project in Meta Spark 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 Meta Spark 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 Meta Spark 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 Meta Spark Studio project structure are detected.

Mirroring the console

Messages logged to the Meta Spark Studio console via the DiagnosticsModule API are mirrored in the console panel of the Terminal’s Meta Spark 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 Meta Spark Studio.

The left dropdown allows you to select a specific project, if there are multiple projects open within Meta Spark 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 Meta Spark 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 Meta Spark Studio as the target. However, you can also debug a mirrored effect running in the Meta Spark Player app for Android.

To do so, connect your mobile device to your computer with a USB cable. Then, with the effect open in Meta Spark 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:

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

Learn more about debugging in Visual Studio Code.

Multipeer Debugging

If there is an effect using the multipeer capability open in Meta Spark Studio, the extension displays the multipeer debugging tool within the Meta Spark 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.

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 Meta Spark: Graph Visualizer tab in the terminal window will display the following nodes and dependencies: