Everything you need to know to create an interactive augmented reality experience.
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.
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.
First, you're going to add an interaction that changes the size of the clown nose when you pinch the screen. To do this:
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:
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.
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:
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:
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.
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community