2D texture animation

Get Started

Create AR effects for Instagram and Meta.
Get Started

Articles

Animation

2D Texture Animation

2D texture animation

Add your own textures, turn them into an animation using an Animation Sequence and then add the animation to an object.
Use the quick import and optimization method and Meta Spark will automatically add your textures to an Animation Sequence and assign them to a plane object. You have to use the quick method to import GIFs.

Textures you can import

You can import:

A series of individual texture files, creating a sequence.
Sprite sheets.
Texture atlases.
Animated GIFs.

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

Creating the textures

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

Prepping textures

Naming textures

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

JSON data for sprite sheets

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 in Meta Spark Studio.

Importing the textures

The fastest way to import, optimize and add a texture sequence or an animated GIF is to use the quick import and optimization method described below.

Quick import and optimization method

To quickly import a texture sequence or GIF:

Click + at the bottom of the Assets panel.
Select Import and then Texture Animation.
Select Choose Files and select either a GIF or multiple files that make up a texture sequence.

Optimization

Once you add your texture sequence or GIF you can optimize it in the Import Texture Animation window by reducing the total file size. The texture file can't exceed the maximum effect size (4MB) and we recommend keeping it below this number. The window has a number of settings that you can edit by selecting the box to the right of each setting.

Texture Reduction

This setting configures the size, transparency and quality of your texture sequence. Meta Spark supports textures no larger than 1024 x 1024 pixels. As a general rule, try to use the smallest texture size possible.

If you’ve imported GIF or PNG files but your texture sequence doesn’t contain transparency you can clear the Transparency box.

The quality of the file (0 — 100) controls the level of compression. Lower quality means more compression and a smaller file size.

Frame Reduction

Use this setting to reduce the number of frames used in the 2D animation derived from your texture sequence. The Quantity (Low, Medium, High) sets the number of frames that will be removed from the animation.

Import Options

When you're happy with the optimization results choose how to add the sequence to your project. To add it to both a plane and an Animation Sequence:

Select the box to the right of Add To Plane.
Click Import.

Your animation will play straight away!

To simply add your sequence to an Animation Sequence, click Import. You'll then need to follow the instructions on this page under Adding animations to an object to get your animation to play in the scene.

Alternatively, to import textures:

Click + at the bottom of the Assets panel.
Select Import and then From Computer.
Select the textures you want to import.

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

A series of textures, displayed in the Assets panel.

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

To change a series into a single asset called a Texture Sequence:

In the Assets panel, select the textures.
Go to the Inspector.
Change the Type to Texture Sequence.

The textures will now be grouped as one asset.

The series of textures is now grouped as one asset.

Add JSON data to sprite sheets

To add JSON data to sprite sheets:

In the Assets panel, select the texture.
In the Inspector, go to Sprite Sheet.
Change the Config to Grid.
Add the correct number of rows and columns.

Adding textures to an animation sequence

Start by creating the animation sequence:

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

A texture being added to an animation sequence using the Inspector.

Adding animations to an object

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

Add an object to your scene — for example a plane or particle system.
Create a material for the object.
Select the material in the Asset panel.
In the Inspector, click the dropdown under Diffuse, to the right o Texture and select the animation sequence.

The animation will be playing:

A boombox is shown above the user's head. It is pulsing with the music.

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

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

Randomize

Select 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.

Sprite 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

Select 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.

Use 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. Click the arrow to the left of the material to show any other assets indirectly using the sprite sheet. For example, any objects that the material is applied to.

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

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

To connect multiple sequences:

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

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

2D texture animation

On this page

On this page

Textures you can import

Creating the textures

Prepping textures

Importing the textures

Quick import and optimization method

Adding textures to an animation sequence

Adding animations to an object

Properties

Connecting multiple sequences