CLEAR

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.

Building Effects that Respond to Touch

Spark AR Studio lets you build effects that respond to touch information from mobile devices. In this tutorial, you'll learn how to:

  1. Add the Touch Gestures capability.
  2. Write scripts using the TouchGestures Module.
  3. Preview what you build.

Download the sample content to follow along.

If you open the finished version in the sample content folder, you'll see that the project we're going to build is a birthday effect with 3D balloons that the viewer can burst.

Adding Capabilities

To start, open Spark AR Studio. Select Open Existing Project and open the unfinished version from the sample content folder.

You should see the 3D objects in the Viewport and the Simulator, and listed in the Scene tab.

Before you can add a touch gesture to your effect, you'll need to add the capability for this feature to your project. Most capabilities are added automatically, but Touch Gestures needs to be added manually.

Go to the menu bar and click Project, then:

  1. Select Edit Properties.
  2. Go to the Capabilities tab.
  3. Click +, and enter 'touch gestures' in the search bar.
  4. Select Touch Gestures from the search results.
  5. Click Add.

Your project should now support touch gestures. If you click the arrow next to Touch Gestures to expand it, you'll see there are several touch gestures available.

Tap Gesture is enabled by default. This is the only one we need for this effect, so leave that box checked.

Scripting Touch Gestures

Touch gestures can be used in a variety of ways. You might use them to start or stop animations and sounds, or to move objects in the scene.

We provided the code you need for this project in the sample content folder. To add it to the scene:

  1. Go to the bottom of the Assets panel, and double-click script.js to open the script file in your default script editor.
  2. Open birthday_script.js in the sample content folder.
  3. Copy and paste the contents into the project's script file.
  4. Save and close the file.

You can also use the Patch Editor to add Touch Gestures and other interactive effects to a project - learn more in this tutorial.

Previewing Effects

To preview your effect:

  1. Click Run in the Toolbar.
  2. Click on the Simulator to expand the menu.
  3. Click the gear icon and then select Simulate Touch.

If you click on one of the balloons inside the Simulator, Spark AR Studio will register your click as a touch gesture and perform the action you scripted. You should see the balloon pop.

To simulate touch in the Simulator, you can also hold down Command on your keyboard and click the screen.