Patches in Spark AR Studio act as visual building blocks. Use them to stitch together all sorts of capabilities, to bring your AR effects to life.
In this guide, you'll learn about:
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.
This is what a patch looks like in Spark AR Studio:
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.
The small circles 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 drawing a connection from an output port, to an input port.
Ports are labelled to indicate what they do. For example, Loop Animation has 3 inputs:
It has 1 output port, Progress. This port creates a signal representing the progress of the animation.
You can find more information about what each port does by right-clicking on the patch, and selecting Patch Info:
Many patches have values that can be edited. You can tell when a value can be edited, because the symbol next to the port or value label will change to a lighter color when you hover the mouse over it.
In the Loop Animation patch, 2 values can be edited:
Ports accept associated data types. You can edit the data type in some patches by right-clicking the port and selecting an option from the Type menu:
The data type of the Transition patch in the example above is set to Point 3D. That means the patch can be used, for example, to transition an object from one position to another in 3D space. You'd do this by editing the values next to Start and End, to choose the X, Y and Z co-ordinates the object will move between.
If you changed the data type to say, Color, it could be used to transition the color of something.
These patches generally represent objects you've added to the Scene tab - like the face tracker:
Create producer patches by dragging an object from the Scene tab, into the Patch Editor.
Producers will usually be at the start of the graph. You'll then choose patches that can use signals from the producer patch, to make things happen in your scene.
These patches represent properties - for example, the visibility or position of an object in your scene. They're blue in color:
You can create producer patches by clicking the circle next to a property in the Inspector panel.
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.
These patches take the information from the producer patch and manipulate it - depending on the type of intermediary patch you choose. They're grey in color.
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:
You can create patches to represent assets you've added to your project, for example an audio file or a texture. They're orange in color.
Asset patches can be inserted multiple times.
Here's an example of a simple graph. It uses:
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. The Mouth Open patch narrows down this information to focus on the movement of the mouth. It outputs two signals:
In this example, we've used the Mouth Open port. We've connected this port to 3 consumer patches. These patches represent the Visibility property of 3 objects. Because they're connected to the Mouth Open port in the Mouth Open patch, the objects will become visible when the mouth is open.
To find out more about creating simple effects with the Patch Editor, take a look at these examples.
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.
Find out more about creating patches and building graphs in this guide.