Skip to main content
TikTok Effect House Platform Logo
Latest
Download
Log in
Animation

2D Animation Sequence

You can use Animation Sequence to apply a 2D animation to a material as a texture or render as an animated image on a 2D screen canvas.

Import Texture

Import animation assets by clicking + > Import > Texture Sequence.

Asset Requirements

  • Format: PNG and JPG files are supported.
  • File frame number (number of files in one texture sequence): Less than 20.
  • For each texture in the Texture Sequence:
    • Resolution limit: The maximum resolution limitation is 1024 x 1024 px.
    • Single file size: Less than 1 MB.
  • Total file size: Less than 200 MB.
Note
Note

Apply Texture Sequence

Apply Texture Sequence on a 2D Image

Select the Image entity you’ve created. Add an Animation Sequence component to the Image object in the Inspector panel.

Set the Texture Sequence to your imported animation.

Set the Texture Binding to Albedo.

Congratulations! You have just added an animated image on the 2D canvas.

Apply Texture Sequence on a Face Mask

Select the Face Mask you created. Add an Animation Sequence component to it in the Inspector panel.

Set Texture Sequence to your imported animation.

Set Texture Binding to BaseTexture.

Select the Opacity Enable checkbox.

Set Texture Binding to BaseTexture. The Face Mask will show the pattern of your animation.

Apply Texture Sequence on a 3D Object’s Material

Select the 3D object you’ve created. Add an Animation Sequence component to it in the Inspector panel. Set the Texture Sequence to your imported animation.

Object With PBR Material

If your object is using a PBR material, you can set the Texture Binding to AlbedoTexture, NormalTexture, MRAOTexture, EmissiveTexture, or AmbientTexture.

Tip
Tip

Make sure you also select the Texture On checkbox in the Material setting panel that aligns with the Texture Binding type you select here.

AlbedoTexture

Select the Texture On checkbox in the Albedo section of the Material preview panel.

NormalTexture

Select the Normal checkbox in the Normal section of the Material preview panel.

MRAOTexture

Select the Texture On checkbox in the MRAO section of the Material preview panel.

EmissiveTexture

Select the Emissive checkbox in the Emissive section of the Material preview panel.

Adjust the Intensity value to see the pattern.

AmbientTexture

Object With Unlit Material

If your object is using Unlit Material, you can set the Texture Binding to None and AlbedoTexture.

Click Unlit in the Assets panel and select the Texture On checkbox under Material Property in the Inspector panel. If left unchecked, the material will only render based on the tint color.

Be Transparent

If you want your material to be transparent, since this alien animation has transparency, an easy fix is to change the Blend Mode of the material by selecting it in the Assets panel, and editing the Blend Mode under the Render State 0 property.

Sample Texture

Download the following sample texture file.

TextureSequence.zip

Use Multiple Texture Sequences

You can add several Animation Sequence components to one object if the object material has more than one texture property to apply it to.

For example, if the object uses PBR material, you can add one texture sequence to the Albedo channel, and then another texture sequence to the MRAO channel.

However, if the object has multiple materials, the Animation Sequence component can only be applied to the first material in the list.

Animation Sequence Properties

Add an Animation Sequence component by clicking + Add component > Animation > Animation Sequence.

Texture Sequence: Click to open an asset picker window. You can select all Texture Sequence type assets in your current project.

Texture Binding: Click to open a drop-down where you can find a list of all the texture types the material is currently using. You can choose one texture type that the Texture Sequence will apply to.

  • If this Texture Sequence is added to an Image object, then the drop-down will only include Albedo.
  • If your Mesh Renderer is using a PBR material, the Texture Binding drop-down will include None, AlbedoTexture, NormalTexture, MRAOTexture, EmissiveTexture, and AmbientTexture.
Tip
Tip

Select the Texture On checkbox in the Material setting panel that aligns with the Texture Binding type you select here.

  • If your Mesh Renderer is using an Unlit Material, the Texture Binding drop-down will include None and AlbedoTexture.
  • If it is a 3D Face object, the Texture Binding drop-down will include None and BaseTexture.
  • If it is a Face Mask object, the Texture Binding drop-down will include None, BaseTexture, and OpacityTexture.

Play Mode: Choose between the following play modes:

  • Once: Play the sequence once and stop at the last frame.
  • Loop (default): Play the sequence in a loop.
  • Randomize: Play the sequence frames randomly.
Tip
Tip

Randomize can be used for animations that are meant to have many options that you want to randomly select from.

  • Ping-Pong: Play the sequence in reverse when it gets to the last frame.

FPS: Adjust the frames per second (FPS) to speed up or slow down the animation. The default value is 12. A higher FPS means a smoother animation, but more frames, which will affect the performance.

Auto Play: Enable or disable the animation from automatically playing.

Demo: 2D Animation Controller

Check out this article to learn how to control animation sequence playback and its relevant properties using the Animation Sequence Controller node.