Tutorial: Adding Touch Gestures with the Patch Editor

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

In previous tutorials you learned how to build effects that respond to touch gestures using JavaScript.

In this tutorial, you'll learn how to use the Patch Editor, our visual programming environment, to create an effect with touch gestures. The patches you'll use include Screen Pinch and Screen Long Press.

Please download the sample content to follow along. If you open the finished effect, you'll see you're going to build an effect with a clown nose that changes when you pinch or long press the screen.

Opening the Patch Editor

To get started, open the unfinished version in the sample content folder. You should see the 3D object in the Viewport and Simulator, attached to the face, and you should also see a particle system creating confetti.

To start working with the patches, open the Patch Editor by clicking View in the menu bar and selecting Show Patch Editor. You should now see it below the Viewport. There should already be a graph in the Patch Editor - this graph is fixing the 3D object to the tip of the nose.

Using the Screen Pinch Patch

First, you're going to add an interaction that changes the size of the clown nose when you pinch the screen. To do this:

  1. Double-click anywhere in the Patch Editor.
  2. Select Screen Pinch from the menu
  3. Click Insert to add the patch.

Screen Pinch has four ports. We're only going to use Scale, because we want to use this interaction to control the size of the clown nose.

To control all of the scale coordinates of the clown nose at once, you'll need to take the screen pinch gesture and convert it into one point. To do this, double-click in the Patch Editor again and, find and insert the Point Pack patch.

Then, connect the Scale port on the Screen Pinch patch to the X port on the Point Pack patch. Do the same for the Y and Z ports.

Now you've converted the screen pinch gesture into one point, you can connect it to the clown nose itself:

  1. Go to the Scene tab and select clown_nose.dae, then find Scale in the Inspector panel.
  2. Click the small circle next to Scale to add a clown_nose.dae patch to the Patch Editor.
  3. Connect the 3D Point port on the Point Pack patch to the clown_nose.dae patch you just added.

The scale of your clown nose should now change when you pinch the screen.

To test this, click on the Simulator to expand it, click the gear icon and select Simulate Touch from the menu, then click Run in the Toolbar and pinch the nose in the Simulator. Once you've seen it in action, click Stop in the Toolbar.

Using the Screen Long Press Patch

As you can see in the Viewport and the Simulator, at the moment the confetti is visible all the time. You can change this by using the Screen Long Press patch.

First, double-click anywhere in the Patch Editor, find the Screen Long Press patch and insert it.

This patch has three ports. We're going to focus on the State port. Its a boolean data type, which means at any point in time, it's either true or false. In our case, this means that the long press gesture is either detected or it isn't.

To tell Spark AR Studio what to do when a long press is detected, you'll need to:

  1. Insert an If Then Else patch.
  2. Connect the State port on the Screen Long Press patch to the Condition port on the If Then Else patch.
  3. Change the 0 next to the Then port to 10, to set how long the press needs to be.

Next, you'll need to send this signal to the particle systems in your scene. The property that controls the rate at which particles are emitted is the birthrate, so that's where you need to send the signal.

To send the signal to the particle system:

  1. Go to the Scene tab, select the first particle system and then go to the Inspector panel.
  2. Click the small circle to the left of Birthrate to insert this patch into the Patch Editor.
  3. Do the same for the other two particle systems in the scene.
  4. Connect the output port on the right hand side of the If Then Else patch to the Birthrate ports on the birthrate patches.
  5. Change the value next to the Then port in the If Then Else patch to 10, to change the birthrate depending on the long press state.

The confetti in your scene should now only appear when a long press is detected.

To test this, make sure the Simulator is still set to simulate touch, click Run in the Toolbar and click and hold anywhere in the Simulator.