Scribd
Upload
3 views

Tutorial 3

This tutorial provides a comprehensive guide on creating animated TikTok effects using animated textures. It covers understanding animated textures, applying them to 2D and 3D objects, creating interactive effects, and importing textures from the asset library. Key takeaways include the differences between animated textures and texture sequences, as well as the use of visual scripting for enhanced interactivity.

Uploaded by

ZeeSeker
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Tutorial 3

This tutorial provides a comprehensive guide on creating animated TikTok effects using animated textures. It covers understanding animated textures, applying them to 2D and 3D objects, creating interactive effects, and importing textures from the asset library. Key takeaways include the differences between animated textures and texture sequences, as well as the use of visual scripting for enhanced interactivity.

Uploaded by

ZeeSeker
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

TUTORIAL 3

CREATING ANIMATED
TIKTOK EFFECTS
Enhance your TikTok effects with animated textures.
Structure
Introduction & Overview

Understanding Animated Textures

Applying Animated Textures

Creating an Interactive Randomizer Effect

Importing Animated Textures from the Asset Library

Wrap-Up and Next Steps

Set Up
Your Project
Open Spark AR and create a new project. Let’s name it ‘ANIMATED Effect.’
Introduction &
Overview
Structure
Understanding Animated Textures.
Applying Animated Textures.
Creating an Interactive Randomizer Effect.
Importing Animated Textures from the Asset Library.
Wrap-Up & Next Steps.
Understanding
Animated Textures
Overview
Animated textures are widely used in popular effects like randomizers to enhance
engagement. They provide dynamic visuals that can be controlled using visual
scripting.

Animated Texture vs. Texture Sequence


Animated Texture: A sequence of images compiled into a single animated texture,
usable anywhere a texture property is indicated.
Texture Sequence: A series of individual images imported into Effect House and
compiled into an animated texture automatically.

Importing a Texture Sequence


Prepare multiple images with the same dimensions.
In Effect House, click on Add [+] in the Assets panel.
Select Import > Texture Sequence.
Choose the images to be imported.
The images will appear under Animated Textures and Textures folders in the Assets
panel.

Animated Texture Properties


Texture: Contains the sequence of images used in the animation.
Loop Count: Defines how many times the animation plays (-1 for infinite playback,
0 for no playback, 1 for single play).
Order: Determines different playback modes.
Reverse: Plays the animation in reverse order.
FPS (Frames Per Second): Controls animation speed (default 12 FPS).
Duration: Adjusting this modifies playback time and FPS.
Applying Animated
Textures
Applying to a 2D Object
Add a Screen Image object from the Hierarchy panel (Add [+] > 2D > Screen Image).
Select the object and navigate to the Inspector panel.
Click on the Image component’s Texture field and select the imported animated
texture.
The animation will now play on the 2D screen image.

Applying to a 3D Object
Add an Image object from the Hierarchy panel (Add [+] > 3D > Image).
Assign the animated texture to its Texture field in the Inspector panel.
Attach a Head Tracker (Add [+] > AR Tracking > Head Tracker).
Parent the Image object to the Head Tracker, allowing it to move with the user’s
head.

Applying to a Material
Add a 3D Face object (Add [+] > Face Effects > 3D Face).
Select Face Paint under the Materials folder in the Assets panel.
Assign the animated texture to the Base Property component’s Texture field.
The animation will now play on the model’s face.
Creating an Interactive
Randomizer Effect
Setup
Activate the Head Tracker object in the Hierarchy panel.
Select the Animated Texture in the Assets panel.
In the Inspector panel, click + Add Interaction.

Adding Interaction Using Visual Scripting


Select Tap Screen To Play Animated Texture Then Delay Pause.
A subgraph appears in the Visual Scripting panel.
Set Delay Pause Seconds to 3 (animation plays for 3 seconds before pausing).

Enhancing Interactivity
Open the Tap Screen To Play Animated Texture Then Delay Pause subgraph.
Open the Event Trigger: Touch subgraph.
Add a Gesture Detection node.
Set the Gesture to Open Palm.
Connect the node’s outputs to the Output node’s inputs.
Change preview media to a hand opening gesture.
Importing Animated Textures
From the Asset Library

Downloading and Applying Assets


Open the Asset Library and navigate to the 2D tab.
Select Rain Diagonal, hover over the download icon, and choose Import and apply.
The asset appears in the Hierarchy panel and the Textures folder.

Using Visual Scripting to Control Animation


In the Visual Scripting panel, add a Gesture Detection node.
Set the Gesture to Open Palm.
Select Rain Diagonal_AnimatedTex in the Assets panel.
In the Inspector panel, click the icon next to Loop Count and select Set Loop Count.
Duplicate the Loop Count node and set:
First node’s Value to 0 (pause animation when palm detected).
Second node’s Value to -1 (resume animation when palm is no longer detected).
Connect Gesture Detection node's Begin: Exec to Loop Count Set input.
Wrap-Up and
Next Steps
Key Takeaways
Understanding Animated Textures: Difference between texture sequences and
animated textures.
Applying Animated Textures: How to use them on 2D and 3D objects, as well as
materials.
Interactive Randomizer Effect: Utilizing visual scripting to add engagement.
Importing from Asset Library: Enhancing effects with pre-made animated
textures.

Next Steps
Experiment with different animation speeds and loop counts.
Try applying animated textures to multiple objects simultaneously.
Explore advanced visual scripting interactions for unique effects.

You might also like