Using the Patch Editor

Patches in Spark AR Studio allow you to add interaction, animation and logic to your effects. You can also use them to create materials.

Patches act as visual building blocks, with each patch performing a unique function. You'll connect them together in what's known as a graph, allowing the patches you've connected to pass and receive information to and from one another.
Many capabilities available in scripting can be added to your effect as patches, so you can add interaction and complexity without knowing how to code.

In this guide, you'll learn about:

• Opening the Patch Editor.
• Creating patches.
• Understanding and editing patches.
• Connecting patches together, to build graphs.
• Creating a very simple effect, using the main patch types.
• Grouping patches.

Once you've learned the basics, it's worth taking a look at the different ways we've used patches to build full effects, in our sample effect tutorials.

Opening the Patch Editor

To open the Patch Editor:

1. Select View in the menu bar.
2. Select Show/Hide Patch Editor.

The Patch Open will open at the bottom of the Spark AR Studio interface.

Creating patches

Many elements of your project can be represented as patches.

The patches you'll use to add logic, interaction, animation and other audio effects are known as Intermediary patches. These patches take the information from the producer patch and manipulate it - depending on the type of intermediary patch you choose.

Objects in the Scene Panel

Drag objects from the Scene Panel, into the Patch Editor. To try this out, add a face tracker to your scene, and drag it into the Patch Editor.

The face tracker will detect the position and movement of the face of the person using your effect, and produce a signal that can be passed to the patches it's connected to. Because of this, it's known as a producer patch.

Properties in the Inspector

Every graph you build will eventually pass a signal to a patch representing the property of something in your scene, making something happen to that property.

To create a patch representing a property, select the object in the Scene tab, and click the arrow next to the property in the Inspector.

A yellow patch will be created:

These patches will generally be the final patches in a graph. This is because they consume the signals created by the producer patch and other patches you've added. As a result, changes will be made to the property the patch represents.

Assets

You can drag and drop assets into the Patch Editor too, for example to create patches representing textures and audio files.

You can add multiple instances of Asset patches to your projects. Find about more about creating patches to represent audio assets, and textures.

Intermediary Patches

Create intermediary patches by right-clicking in the Patch Editor, and selecting the patch you need from the menu.

There are lots of intermediary patches to choose from in Spark AR Studio, that you can use to achieve all kinds of different effects.

Understanding and editing patches

Let's take a closer look at the labels and features you can see on patches in Spark AR Studio.

Name

The name is at the top of the patch. In the example above, the patch is called Loop Animation. You can rename some patches by double-clicking their name at the top of the patch.

Ports

The small circles with arrows in along each side of the patch are known as 'ports'. Ports along the right side of a patch are known as 'output ports'. The ports on the left are 'input ports'.

You'll link one patch to another by making a connection from an output port, to an input port.

Ports are labelled to indicate what they do. Loop Animation has 3 input ports:

• Enable - this port enables the animation to play - turning it on or off.
• Duration - you'd adjust the value of this port to edit the duration of an animation, in seconds.
• Reset - you'd use this port to reset an animation.

It has 1 output port, Progress. This port creates a signal representing the progress of the animation.

Editing Values

When a port has a box next to it, it means you can edit the value associated with the port.

In the Loop Animation patch, 2 values can be edited. Editing the Duration value will change how long the animation plays for.

Checking the box next to Mirrored will mean the animation plays in reverse, after it completes.

Data Types

You'll choose different data types for some of the patches. For example, if you're manipulating the shape of a 2D object, you'd set the data type of certain patches to Vector 2. If you're applying a color to a material, you'd change the data type of certain patches to Color.

To change the data type of a patch, select the patch. A box containing the current data type will appear at the bottom of the patch.

The data type of the Transition patch in the example is set to Vector3. That means the patch can be used, for example, to transition an object from one position to another in 3D space. To change this, you'd click the arrow next to Vector 3, and select an option from the list:

If you changed the data type to say, Color, it could be used to transition the color of an element in your scene.

Connecting patches and building graphs

Connect patches using their ports - the small dots on each patch.

Patches can only be connected from left to right. This means you'd always connect a port on right side of a patch - known as an output port - to a port on the left side of another patch - known as an input port.

To connect patches together:

1. Click and hold the first port.
2. Drag the connector across to the second port.

You should see a blue line appear, which will turn green once it has found a connection. If you let go, you should see a connection made between your patches.

To disconnect patches, either:

• Select one of the ports and press delete on your keypad.
• Select the output port, drag the connection into an empty space and let go.

Making Multiple Connections

An output can have more than one outgoing connection, but an input can only have one incoming connection. This means that the result of an output port can be applied to more than one patch.

Example

Here's an example of a simple graph. It uses:

• A consumer patch representing the face tracker.
• An intermediary patch, Smile. This patch can detect when someone using the effect is smiling.
• 3 consumer patches, each representing the Visible property 3 objects.

As a result of connecting these patches, when a face with an open mouth is detected, 3 objects will appear in the effect.

Let's take a closer look at how the patches in this graph makes this happen.

The Face output port in the the face tracker patch captures data on the face detected by the face tracker. It's connected to the the Smile patch, which narrows down this information to focus on gesture the face is making.

The Smile patch outputs a signal when a smile is detected. If we connect the output of the Smile patch to the input of the Visible patches, it means the objects will be visible when a smile is detected.

Grouping patches

You can group patches to help organize your graph. You can also save patch groups to use again in other projects, and share with other creators. Find out more.

Learn more

• Add interactivity in the Patch Editor.
• Use face landmark patches to detect facial features
• Animate objects in your effects.