CLEAR

2D Texture Animation

You can use 2D textures to create animations. To do this, add textures to your project as either:

  1. A series of individual texture files, imported as a sequence.
  2. Sprite sheets. You can add a JSON file to tell Spark AR Studio how the frames should be arranged, or add the information yourself. Sprite sheets are a more efficient option than sequences.
  3. A texture atlas. You'll need to use external software, like texture packer, to create these.

A texture atlas will create the most efficient, best quality effect. Sequences create the least.

If you're importing a sequence, you'll need to name the files accordingly. For example: name.frameNumber.fileExtension.

Like any other texture, you'll need to apply them to an object in the scene - like a rectangle - for them to render.

Build an effect using 2D texture animation with this tutorial.

Importing

Click + in the Assets panel, and select Import From Computer....



To import a sequence, check the box next to Sequence.



To import a sprite sheet or texture atlas, change Import as: to Sprite Sheet.

If there's no JSON file in your folder, you'll need to add the data manually. Specify how many rows, columns and frames are in the sprite sheet:



Click Open.

You'll see both an animation and a texture in the Assets panel:



Using the Same Texture Sequence for Multiple Animations

You can create additional animations, and apply the same textures to them. Just select Create New Animation:



And apply the texture to it in the Inspector panel.

Making Changes to 2D Animations

Select the animation in the Assets panel, and make changes to it in the Inspector panel.

Texture

The textures you've applied to the animation.

Duration

How many frames are in the sequence.

FPS

Adjust the frames per second, to either speed up or slow down the animation.

Loop

Check this box to loop the animation continually while the effect is being used.

Start Random

Check this box to start the animations randomly after the effect has been opened.

Current Frame

Create a patch to represent this frame. Connect this to other patches to create an effect with logic or interactivity.

Actions

Create a series of patches to add interactivity to your project, involving the animation

Used By

The object the animation is applied to.