Using the Patch Editor or scripting

Start by adding custom instructions to your project's properties. If your project has a face, hand, body or target tracker, the instructions capability is added by default, which means you can skip steps 1 to 3:

1. Click the gear icon in the toolbar.
2. Select Capabilities, click + and select Instructions.
3. Click Insert.
4. Click the arrow to the left of Instructions.
5. Select the box to the right of 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.

Then:

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

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

    // Create 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, 'displayInstructions' will be false and vice versa 
    const displayInstructions = Reactive.not(FaceGestures.hasMouthOpen(face));

    // Use the above bool signal to set the instructions' visibility
    // If the mouth open boolean wasn't reversed, the instructions would
    // display even if the mouth is already open
    Instruction.bind(displayInstructions, 'open_mouth');

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

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