There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Using the Patch Editor

Something Went Wrong
We're having trouble playing this video.

You can use the Patch Editor to animate your objects and add interactivity and logic to your projects, without using scripting.

Parts of your scene are represented as patches that you can connect to build a graph. Once connected, your graph visualizes the animations and interactions in your project.

Download the sample content to follow along. If you open the finished effect, you'll see you're going to rebuild the pizza effect from the scripting tutorial. The difference is that this time you won't need to use JavaScript.

To make the slices of pizza fly into your mouth, you'll animate them using the Patch Editor. The patches you'll use for this include Mouth Open, Loop Animation and Transition.

To learn more about the different patches in Spark AR Studio and how to use them in your effects, take a look at our example graphs.

Adding Views

To get started, open the unfinished version in the sample content folder.

To see the objects more clearly you can add more views to the Viewport. To do this, click Viewport in the Toolbar and select the option you want to use from the menu. You can zoom out by moving two fingers over your trackpad, or by using your mouse wheel.

Open the Patch Editor by clicking View in the menu bar and selecting Show Patch Editor. You'll see it below the Viewport.

Controlling Visibility

For this effect, you'll need to use the face tracker to trigger the animation. We call this kind of patch a producer patch.

To add this patch, select the face tracker in the Scene tab and drag it into the Patch Editor. You'll see that the face tracker patch has 4 ports and each one has a different function. The only one we need for this is the Face Tracker port.

Next we'll build a graph that controls whether or not you can see the pizza. To do this:

  1. Double-click anywhere in the Patch Editor.
  2. Select Mouth Open from the menu and click Insert. Mouth Open is what we call an intermediary patch, like the others in that menu.
  3. Click the port next to Face Tracker on the face tracker patch and drag it to the Face Tracker port on the Mouth Open patch.

You should now see a connection between the 2 patches.

Now you'll need to add the wheel of pizza to the Patch Editor. You'll do this by creating blue consumer patches to control the visibility of the pizza. To do this:

  1. Select pizzas_123 in the Scene tab, then go to the Inspector panel.
  2. Below Properties, click the small circle next to Visible. This will add a pizzas_123 patch that controls whether the object is visible or not.
  3. Repeat these steps for pizzas_456 and pizzas_789.

Connect the Mouth Open patch to each of the pizza patches by clicking and dragging from the port next to Visible.

Click Run in the Toolbar. You'll see that the pizzas appear and disappear when you open and close your mouth.

Creating Animations

Now you'll use patches to make the pizza fly into your mouth. You already have the face tracker patch, so you'll start by adding a second Mouth Open patch. This patch will control the movement of the pizza wheel. To do this:

  1. Double-click in the Patch Editor and select Mouth Open.
  2. Click Insert to add the patch, then connect it to the face tracker patch.
  3. When you've done that, double-click and select the Loop Animation patch. This tells AR Studio to create a repeating animation, such as a pizza continuously flying into an open mouth. It also determines how often the animation should loop. For this effect, you want it to loop every 4 seconds.
  4. On the Loop Animation patch, change the number next to Duration to 4.
  5. Then connect the Mouth Open port on the Mouth Open patch to the Enable port on the Loop Animation patch.

Next we'll add a Transition patch, which tells Spark AR Studio which coordinates you want to animate. Add the patch by double-clicking and selecting it from the menu. To create the illusion that pizza is flying into the mouth, we want the pizza wheel to rotate around the X-axis. On the Transition patch, change the End X coordinate to -360, then connect the Progress port on the Loop Animation patch to the Progress port on the Transition patch.

The final step is to add patches that tell AR Studio what to animate. To do this:

  1. Select pizzas_123 in the Scene tab, then find Rotation in the Inspector panel.
  2. Click the small circle next to Rotation to add a pizza_123 patch to the Patch Editor.
  3. Repeat this step for pizzas_456 and pizzas_789.
  4. Connect the Value port on the Transition patch to each of the Rotation patches you just added.

Click Run in the toolbar to see the complete effect in action. When you open your mouth, you should see pizza flying into your mouth. When you close your mouth, the pizza should disappear.