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

The Basics of Scripting

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

In previous tutorials you've learned how to use 2D animations to build effects.

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

Please download the sample content to follow along.

If you open the finished effect in the sample content folder, 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

To get started, 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, go to the Assets panel, scroll down and double click script.js. The script file should have opened in your default script editor. 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.

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 the purposes of this tutorial, please copy and paste the contents of pizza_eats.js into the AR Studio script file open in your script editor. Then save it and go back to AR Studio.

Testing and Debugging

If you click Run now and open your mouth, the animation should work. If there is a problem with the script, AR Studio will report it in the Console.

Congratulations, you now know the basics of scripting in AR Studio.


To recap, in this tutorial you learned how to add a script to an effect and how to test it.