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.
In this tutorial, you'll learn how build an effect with 2D animations, using sprite sheets.
Download the sample content to follow along. If you open the project file, you'll see the effect we're going to build is an animated frame with faces and tears.
This effect is produced with sprite sheets - single files with images in rows and columns, where each image is a frame. The metadata is stored in a JSON file.
The animated faces weren't built as one block - they've been split into sections. This is so the effect can handle the aspect ratios of different mobile devices.
Open Spark AR Studio and create a new project. To import sprite sheets:
You'll see that Import as: is set to Texture by default. You'll need to change it to Sprite Sheet, then check the box next to Sequence and click Open.
You should see the PNG listed in the Textures folder of the Assets panel and the animation listed below Animations.
To see the animation in the scene, you'll need to insert a rectangle. This object provides a surface in the scene to which you can apply a material and the animation.
To insert a rectangle:
The rectangle will be in the Scene tab as the child of a canvas.
The rectangle's properties will be open in the Inspector panel. To add the animations:
Your 2D animation should now be in your scene. Change the name of the rectangle to bottom_faces_left in the Scene tab. You'll be adding more of these, so renaming each one will help you keep track.
The animation is moving quite quickly. To change the speed, select your animation in the Animations folder of the Assets panel. Next, go to FPS in the inspector panel.
FPS stands for Frames Per Second. If there are x frames on the sprite sheet and you set FPS to x, the whole animation will take 1 second. If you reduce the FPS rate, the animation will slow down. If you increase the rate, the animation will speed up.
For this tutorial, change the FPS from 25 to 6. Your animation should now have slowed down.
Animations are set to play continuously by default. Unchecking the Loop box will make an animation play once.
To make an animation start from any frame within the sheet, for example if you're reusing a texture and don't want the animation to feel synchronized, you'd check the Start Random box. For this tutorial, keep the settings as they are.
To change the size of the animation:
Your animation should now be much bigger.
Now we need to position the rectangle. We'll start by using Alignment - which moves a child object around within the parent object. In the Inspector panel, go to Alignment and select the options for bottom and left Alignment.
Next, we need to Pin the rectangle. Objects that have been pinned will always maintain the same distance to the parent object's border. Pin this rectangle to the left and the bottom.
To import more textures:
Once you've done that, import the rest of the assets in the Textures subfolder in the same way. All of your animations should now be displayed in the Animations folder of the Assets panel.
Now you have more animations, you'll need to insert more rectangles. To start:
Go to the properties of each animation and set FPS to 6.
Next, go to the properties of the rectangle and:
Rename the rectangle bottom_faces_middle.
Insert another rectangle and follow these steps again for the bottom_faces_right animation. Align it to the bottom and right, and then pin to the bottom and the right of the canvas. Rename the rectangle bottom_faces_right.
You'll need to do the same for the top faces. You'll want:
Rename each rectangle to reflect the associated sequence.
The last animations to build are the tears sequences. You have two for the bottom and two for the top. Follow the same process for each sequence, making sure that:
Finally we'll set Flexibility. Flexibility scales the height and width of the rectangle in relation to the canvas. This means objects will stay in proportion on all devices.
For this effect, we need to set Flexibility for both height and width for every rectangle. You can set Flexibility for all rectangles at the same time by holding down commend on your keypad and selecting each rectangle in the Scene tab. Then, in the Inspector panel, click both sets of arrows next to Flexibility.
To finish the effect, you'll need to make the tears render before the faces. To do this:
Select the rectangle called bottom_tears_left in the Scene tab. In the Inspector panel, change the layer from faces_layer to tears_layer. Do this for all rectangles with tears in their name.
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community