Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.


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: Creating an Effect with Scripting

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

In this tutorial you'll learn about the basics of scripting in Spark AR Studio. Scripting can be used to animate both textures and objects. Animations can be based on time elapsed or specific triggers.

Download the sample content to follow along. If you open the finished effect, you'll see what you're going to build. This effect was designed with a specific trigger in mind - when you open your mouth, slices of pizza are supposed to fly in.

Adding Views

Open the unfinished version in the sample content folder.

To see the objects more clearly, you can zoom out by moving two fingers over your trackpad, or by using your mouse wheel.

You'll see that the objects form a wheel of pizza. When it's animated, this wheel creates the illusion that the pizza is flying into your mouth.

If you click Run in the Toolbar, you'll see that it doesn't do this at the moment, so click Stop.

To make the pizza fly in, you need to add a script. To do this:

  1. Go to the Assets panel.
  2. Scroll down and double click script.js. The script file should have opened in your default script editor.
  3. Next, go to the sample content and open pizza_eats.js.

The Script

Let's take a look at the script itself. Each object in a scene exposes the ability to bind to a stream of values for properties like position.

We use scripting to create expressions which bind objects in the scene to other objects or to values from imported modules like Animation. You'll see that the modules are imported first. In this effect, we used the Animation module, the FaceTracking module and the Scene module. You can find other modules in our scripting reference library.

The Animation module gives you a time value and you can bind that into a formula and use it to move objects in a scene over time. wheelDriver represents the time. Here, it's 1500, which translates to 1.5 seconds. wheelSampler defines the movement. You'll see that it's linear and set as 0 to Pi x 2, so the animation will move at the same speed over time. In this script, wheelDriver and wheelSampler are bound together to make a whole rotation of the pizza wheel.

You'll also see that we've used the FaceTracking module to specify that the animation is hidden when the mouth is closed.

A trigger has also been defined for this effect. The animation will start when a face is detected in the scene and the mouth is open.

Adding Scripts

For this tutorial, copy and paste the contents of pizza_eats.js into the script file open in your script editor. Then save it and go back to Spark AR Studio.

Testing and Debugging

Click Run and open your mouth to test the animation. If there is a problem with the script, Spark AR Studio will report it in the Console.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.

Read FAQs