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

2D Animation Sequence

Note
Note

This guide is applicable to Effect House versions prior to v2.3.0. If you are using v2.3.0 or a later version, see this guide.

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

Import Texture

Import an animation asset by clicking the Add button [+] > Import > Texture Sequence in the Assets panel.

Asset Requirements

  • Format: PNG and JPG files are supported
  • File frame number (number of files in one texture sequence): Less than 200
  • 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 property to your imported animation.

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.

Use the Texture Binding dropdown to select BaseTexture.

Select the Opacity Enable checkbox.

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 Texture Sequence to your imported animation.

Object With PBR Material

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

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 Texture Binding to 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.

Make the Material 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 Render State 0.

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 in the Inspector panel.

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

Texture Binding: Click to open a dropdown 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 dropdown 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 dropdown will include None and AlbedoTexture.
  • If it is a 3D Face object, the Texture Binding dropdown will include None and BaseTexture.
  • If it is a Face Mask object, the Texture Binding dropdown 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.

Visual Scripting

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