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.

Tutorial: Building Effects with Sprite Sheets

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.

Importing Sprite Sheets

Open Spark AR Studio and create a new project. To import sprite sheets:

  1. Go to Assets.
  2. Click +.
  3. Select Import Assets....
  4. Open the Textures folder in the sample content folder, and open bottom_faces_left.png.

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.

Inserting Rectangles

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:

  1. Click Insert.
  2. Select Rectangle.
  3. Click Insert.

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:

  1. Go to Material in the Inspector panel and click +.
  2. Double-click the material that's appear to open its properties.
  3. Go to Diffuse, click in the gray box next to Texture and select your animation from the menu.

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.

Editing Animations

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.

Changing the size of the animation

To change the size of the animation:

  1. Select the rectangle in the Scene tab.
  2. Go to Size in the inspector panel.
  3. Set the Width and Height options to 360.

Your animation should now be much bigger.

Changing the position of the rectangle

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.

Importing More Textures

To import more textures:

  1. In the Assets panel, click +.
  2. Select Import Assets....
  3. Select bottom_faces_middle.png from the sample content folder on your computer - remember to change Import as: to Sprite Sheet and check the box next to Sequence before you open it.

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.

Inserting more Rectangles

Now you have more animations, you'll need to insert more rectangles. To start:

  1. Right-click on the canvas in the Scene tab.
  2. Select Insert from the menu and then select Rectangle.
  3. Create a new material for the rectangle and set the Texture to the bottom_faces_middle animation.

Go to the properties of each animation and set FPS to 6.

Next, go to the properties of the rectangle and:

  1. Set the Width and Height to 360.
  2. Align the rectangle to the bottom and the middle.
  3. Pin the rectangle to the bottom of the canvas.

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:

  1. Top_faces_right to be aligned to top and right, and pinned to the top and middle.
  2. Top_faces_middle to be aligned to top and middle, and pinned to top and the middle.
  3. Top_faces_left animation to be aligned to top and left, and pinned to the top and the left.

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:

  1. Bottom_tears_left are both aligned and pinned to the bottom and left.
  2. Bottom_tears_right are both aligned and pinned to the bottom and right.
  3. Top_tears_left are both aligned and pinned to the top and left.
  4. Top_tears_right are both aligned and pinned to the top and right.

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.

Creating Layers

To finish the effect, you'll need to make the tears render before the faces. To do this:

  1. Go to the Layers tab
  2. Click + to create a new layer
  3. Rename the new layer 'tears_layer', the original layer 'faces_layer'.

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.