Module 6: Creating Animated TikTok Effects
Animated textures are widely used in popular effects like randomizers and are a fun way to add visual engagement to your effect. You can also use visual scripting to control these animations, which adds a layer of creativity and depth.
This module introduces how to create, import, and apply animated textures in Effect House.
Module Objectives: By the end of this module, you should be comfortable with the following objectives:
- Explain the difference between a texture sequence and an animated texture
- Define the requirements for importing a series of images as a texture sequence into Effect House
- Understand how to modify an animated texture's playback properties
- Apply an animated texture to create an interactive randomizer effect
- Demonstrate how to import an animated texture from the Asset Library and use it to create a unique effect
This video was recorded using Effect House v2.4.0. Later versions of Effect House have features that may not be covered in this video.
Animated Texture and Texture Sequence
An animated texture is a sequence of images compiled into a single, animated texture that can be used anywhere a Texture property is indicated.
A texture sequence is simply a series of images. In Effect House, you can import images as a texture sequence, which is automatically compiled into an animated texture.
Import a Texture Sequence
First prepare a number of images to use, as an animated texture is simply a series of images that are strung together. Use any image processing tool to prepare your images, but make sure that they all have the same dimensions, otherwise you won't be able to import them properly into Effect House.
To import a series of images into Effect House, click on the Add button [+] in the Assets panel, go to Import, then select Texture Sequence. Select your desired images.
The images automatically upload to the Assets panel as an Animated Texture and a Texture Sequence, under the Animated Textures and Textures folders, respectively.
Click on the Texture Sequence you just imported, under the Textures folder. Here you can access information like Resolution, Size, and Type and Compression Type in the Inspector panel.
Animated Texture Properties
Click on the Animated Texture, under the Animated Textures folder. Notice the following properties, in the Inspector panel:
Texture: contains the images used in the animation as a texture sequence.
Loop Count: Determines how many times the animation plays. -1 represents an infinite playback, 0 represents no playback, and 1 represents the first play.
Order: Contains different playback modes to choose from.
Reverse: Plays the animation in the reverse order.
FPS: Speeds up or slows down the animation. The default value is 12. A higher FPS means a smoother animation, but more frames, which will affect the performance. It is recommended that you do not exceed 12 FPS.
Duration: Displays the playback duration of the sequence with the current FPS setting. Modifying the duration will also modify the FPS.
Apply an Animated Texture to an Object
The simplest use case for using an animated texture requires an object with an Image component.
Animated Texture on a 2D Object
First add a Screen Image object by going to the Hierarchy panel, clicking on the Add button [+], going to 2D, and selecting Screen Image.
Make sure the Screen Image object is selected, and then go to the Inspector panel. Click the Image component's Texture field, and then select your imported animated texture. The animation now plays on the Screen Image.
For the next section, uncheck the Screen Image object in the Hierarchy panel to hide it from view.
Animated Texture on a 3D Object
Add an Image object by going to the Hierarchy panel, clicking on the Add button [+], going to 3D, and selecting Image.
Make sure the Image object is selected, and then go to the Inspector panel. Click the Image component's Texture field, and then select your imported animated texture. The animation now plays on the Image.
By default, the Image looks flat and 2D. Add a Head Tracker object by going to the Hierarchy panel, clicking on the Add button [+], going to AR Tracking, and selecting Head Tracker. Drag the Image object on top of the Head mesh object to parent it under the Head mesh.
If you change the preview media to display a person turning their head, you will notice that the animated Image object moves like a plane and has perspective.
For the next section, uncheck the Head Tracker object in the Hierarchy panel to hide it from view.
Animated Texture on a Material
Add a 3D Face object by going to the Hierarchy panel, clicking on the Add button [+], going to Face Effects, and selecting 3D Face.
Make sure the 3D Face object is selected, and then go to the Inspector panel. Notice that the Mesh Renderer component has a Material with Face Paint selected by default.
Go to the Assets panel and select Face Paint under the Materials folder. Go to the Inspector panel and click the Base Property component's Texture field. Select your imported animated texture. The animation now plays on the model's face.
For the next section, uncheck the 3D Face object in the Hierarchy panel to hide it from view.
Create a Randomizer Effect
Randomizer effects are a popular way to use animated textures, and you can also make them interactive.
Take the Head Tracker object you previously set up with the parented Image object, and turn it back on in the Hierarchy panel by clicking its checkbox.
To make the animated texture interactive, click the Animated Texture in the Assets panel, go to the Inspector panel, and then click + Add Interaction.
To make the animation play for a few seconds before pausing on a random frame, choose Tap Screen To Play Animated Texture Then Delay Pause.
An interaction subgraph appears in the Visual Scripting panel. Notice that Delay Pause Seconds is set to 3 seconds by default. This means that after a person taps the screen, the animation will play for 3 seconds before pausing on a random frame. You can make the animation play for a shorter time, by changing the Delay Pause Seconds to 2 seconds, for example. This is the most basic form of a randomizer.
To add an extra layer of interactivity, you can change what triggers the animation to start. For example, you can use visual scripting to make the animation start and stop whenever a person opens their hand.
To do so, double-click on the Tap Screen To Play Animated Texture Then Delay Pause subgraph to view the Event Trigger: Touch subgraph. Double-click on the Event Trigger: Touch subgraph to view the base level of logic.
Double-click on the dotted space to access the Node menu. Search for and then add the Gesture Detection node. Change the Gesture Detection node's Gesture to Open Palm. Then connect the Gesture Detection node's Begin: Exec and End: Exec outputs to the Output node's Touch: Begin and Touch: End inputs, respectively.
Change the preview media to display a person opening their hand by clicking the Preview menu, going to Hand, and selecting from any of the Hand Appear options. The animation will play when a palm is detected, and then stop after two seconds.
For the next section, uncheck the Head Tracker object in the Hierarchy panel to hide it from view.
Download Animated Textures from the Asset Library
You can use the Asset Library to import premade animated textures to your effect. Open the Asset Library, and then click on the 2D tab. Here you can find assets that use premade animated textures. Choose Rain Diagonal, hover over the download icon, and select Import and apply.
Click on the Rain Diagonal object in the Hierarchy panel then go to the Inspector panel. Notice that the Image component's Texture property uses Rain Diagonal_AnimatedTex, which you can locate in the Textures folder in the Assets panel.
You can use visual scripting to start and stop the animation with a hand gesture. Click back to the Main Graph of the Visual Scripting panel and find some empty space. Double-click on the dotted space to access the Node menu. Search for and then add the Gesture Detection node. Change the Gesture Detection node's Gesture to Open Palm.
Click on Rain Diagonal_AnimatedTex in the Assets panel and then go to the Inspector panel. Click on the icon next to Loop Count and then select Set Loop Count. This adds a node to the Visual Scripting panel.
Change the Value in the Loop Count node to 0, then connect the Gesture Detection node's Begin: Exec output to the Loop Count node's Set input.
Duplicate the Loop Count node by copying and then pasting it. Change the duplicate Loop Count node's Value to -1. Then connect the Gesture Detection node's End: Exec output to this Loop Count node's Set input.
Now the animation pauses whenever an open palm is detected and resumes when the palm is no longer detected.