Clear
Back

2D Texture Animation

In Spark AR Studio you can use 2D textures to create animations.

You’ll add your own textures either as sprite sheets, atlas textures or sequences. You'll then turn them into an animation using an asset included in Spark AR Studio called an Animation Sequence.

You can use TexturePacker to create sprite sheets and texture atlases.

Learn about:

Types of textures you can import

You can add textures to your project as:

  1. A series of individual texture files, creating a sequence.
  2. Sprite sheets - either add a JSON file to tell Spark AR Studio how the frames should be arranged or add the information yourself.
  3. Texture atlases.

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

Importing the textures

To import the textures:

  1. Click Add Asset at the bottom of the Assets panel.
  2. Select Import From Computer....
  3. Select the textures.

If you're importing a series of texture files, name them accordingly. For example: name.frameNumber.fileExtension.

With sprite sheets the JSON data will be added to the project, if the JSON files are in the same folder as the textures you’re importing. Otherwise you can add it manually by editing the texture's properties.

Once you’ve added them to the project the textures will be listed in the Assets panel under Textures:



Unless you've added a sprite sheet with JSON data you'll need to make a couple of changes to the textures:

Change a series of textures into a texture sequence

If you’ve imported a series of textures you’ll need to change its Type in the Inspector before it can be used in your effect, from Single Texture to Texture Sequence:

  1. In the Assets panel, select all the textures at the same time.
  2. In the Inspector, change the Type from Single Texture to Texture Sequence.

The textures will now be grouped as one asset:



Add JSON data manually

To do this:

  1. Select the texture in the Assets panel.
  2. Go to Sprite Sheet in the Inspector.
  3. Change the Config to Grid.
  4. Add the correct number of rows and columns.

Adding the textures to the animation sequence

Start by creating the animation sequence:

  1. Select Add Asset, then Animation Sequence.
  2. In the Inspector, click the dropdown under texture and choose the texture animation you want to add.

Adding the animations to an object in your scene.

Apply the animation sequence to a material like you would any other texture:

  1. Add an object to your scene - for example a plane or particle system.
  2. Create a material for the object - a flat material usually works best.
  3. Select the material in the Asset panel.
  4. In the Inspector, click the dropdown under Diffuse and select the animation sequence.

The animation will be playing:



To change to how it behaves, edit its properties in the Inspector.

Properties

Animation sequences

Texture

The textures you've applied to the animation.

Duration

How many frames are in the sequence - you can’t edit this.

FPS

This stands for frames per second. Adjust it to either speed up or slow down the animation.

Loop

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

Randomize

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. For example, make the frame change in response to a tap on the device screen.

Interactions

Create a series of patches to add interactivity to your project.

Used By

The object the animation is applied to.

Sprites sheets

File, File Size and Dimensions

The file, file size and dimensions of the texture.

Alpha Channel

Whether the texture has an alpha channel or not.

Premultiply

Check this box to integrate transparency information.

Color Encoding

Choose whether colors are interpreted as Linear or sRGB.

Disable compression

Disable compression on this texture.

Sampling

Edit the Filtering options to correct errors in textures.

Tiling Mode

Use U Tiling mode to repeat, clamp or mirror image contents along its horizontal axis.

User V Tiling Mode to repeat, clamp or mirror image contents along its vertical axis.

Sprite Sheet

Edit the option next to Config to select either:

  • JSON - if the sprite sheet was imported with a JSON file.
  • Grid - to manually input the number of Rows, Columns and Sprites.

Interactions

Create a patch to represent the sprite sheet in the Patch editor.

Used By

Any materials using the sprite sheet.

Texture sequences

File, File Size and Dimensions

The file, file size and dimensions of the texture.

Alpha Channel

Whether the texture has an alpha channel or not.

Sequence

The number of frames in the sequence.

Connecting multiple sequences together

You can join together multiple sprite sheets to make longer and more complex 2D animations without exceeding the 1024x1024 texture size limit.

To do this:

  1. Select two or more textures containing sprite sheet data - either through Json configuration or grid.
  2. Set the Type to Multipack in the Inspector.

You’ll be able to refer the texture group from the animation sequence.

Join the Spark AR Creator's community

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

Join Community

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
Was this document helpful?