Using the Patch Editor or scripting

Start by adding custom instructions to your project's properties:

1. In the Menu, go to Project, and select Edit Properties.
2. Select Capabilities, click + and select Instructions.
3. Click Insert.
4. Check the box next to Custom Instructions.

To choose the instructions you want to add:

1. Click the arrow next to Custom Instructions.
2. Click + next to Select Instructions to use.

You'll see a menu with a selection of instructions. Select the instructions you need and click Insert.

You'll then see a Token for the instruction you've added. In the example below, we've selected the Open your mouth instruction from the menu. The instruction token is open_your_mouth.

Copy the instruction token. What to do next depends on whether you're using the Patch Editor or scripting.

Using the Patch Editor

Start by creating an Instruction patch:

1. Select the Device in the Scene panel.
2. In the Inspector, click the circle next to Custom Instruction.

The patch will appear in the Patch Editor, under the Viewport:

Next add your instruction token to the patch:

1. Click the box next to the Token port.
2. Paste the token into the box.

Connect other patches to the Instruction patch to tell Spark AR Studio when to show the instruction.

In the graph below, the face tracker and Mouth Open patches detect when the camera is pointed at an open mouth. Connecting these patches to the Instruction patch through the Not patch means the Open your mouth instruction will show when the mouth is not open.

You can also use the Javascript bridging patch to connect the Instruction patch to a script.

Using script

To start, include the Instruction module in your script:

const Instruction = require('Instruction'); 
        

Then use the bind method to show the instruction. The enabled parameter sets whether the instructions should be displayed, while the token parameter is the token of the instructions to show or hide.

Instruction.bind(true, 'open_mouth'); 
        

For example, we could show the instructions when an open mouth is not detected and hide them when a mouth is opened with the following code:

// Load in the required modules
const Instruction = require('Instruction');
const FaceTracking = require('FaceTracking');
const FaceGestures = require('FaceGestures');
const Reactive = require('Reactive');

// Enables async/await in JS [part 1]
(async function() {

    // Store a reference to a detected face
    const face = FaceTracking.face(0);

    // Create a signal to track when the mouth is open and return the opposite boolean value
    // If the mouth is open, 'shouldDisplay' will be false and vice versa
    const shouldDisplay = Reactive.not(FaceGestures.hasMouthOpen(face));

    // Use the 'shouldDisplay' bool signal to set when the instructions should be enabled
    // If the mouth openness boolean wasn't reversed, the instructions would display when the mouth is already open
    Instruction.bind(shouldDisplay, 'open_your_mouth');

// Enables async/await in JS [part 2]
})();
        

The example above makes use of the Instruction, FaceTracking, FaceGestures and Reactive modules.