In this example, we will demonstrate how the animations are used to create effects with DeepAR Studio.

At the end of this post, there is an example folder with DeepAR studio file that contains all assets mentioned here. You can download it and use it to try these animations effects or create your own animation effect.

Example 1 - Triggered png sequence animation

  • Open the DeepAR Studio

  • Now import FBX via File → Import Legacy FBX → choose rainbow_v3.fbx from the Image_sequence/example_1 folder

Now, load the texture animation

  • In Textures tab → Add →Animation

  • Choose the "animation" folder from the Image_sequence/example_1 folder then click open

  • Select the "PNG - 100%" texture quality to ensure transparency is displayed correctly

Wait until the DeepAR Studio processes the animation frames (might take up to a minute depending on the machine DeepAR Studio is running on)

The animation will run at 30 FPS, to change this select the animation in Texture list editor and enter the desired value.

Now you need to set up materials

  • Select the rainbow quad

  • In Materials properties, under Select shader drop-down lists choose Unlit texture

The unlit texture is there to only render texture without any lighting.

  • For Diffuse texture choose animation which we added before

It is possible to simply play and end an animation on a single trigger, but for this example, we will create a slightly more complex state where the beginning of the animation plays when the mouth opens, the middle part is looped until the mouth is closed, at which point the end of the animation plays and the state becomes idle again. Start offset and Duration values are chosen to loop the rainbow animation as smooth as possible.

  • Go to Assets → Animations state editor

First, we are going to add three states

  • Click Add state name it "rainbow start", set the Material to "lambert7" and set a Duration to 300 ms

  • Click Add state name it "rainbow middle", set the Material to "lambert7", set loop to true, set Start offset to 300 and Duration to 500 ms

  • Click Add state name it "rainbow end", set the Material to "lambert7", set Start offset to 500 and Duration to 1000 ms

Name - animation state identifier. This parameter should be unique, meaning two states shouldn't have the same name.

Material - a material that has an animated texture attached. The attached texture will be played in this state.

Loop - if set to false animation plays only once, otherwise, it is played in a loop

Start offset - set the start time for animation, enables the user to play any part of the animation.

Duration - duration of one animation loop. By default, it is set to the animation loop duration, but it can be shortened or prolonged. If it is shorter than the default animation loop time the animation will be cut before it finishes. If it is longer than the next loop will not start until duration time passes.

Next, we are adding triggers for all states

  • Select the idle state and Add trigger, set the Trigger name to mouth_open trigger and Next state to the rainbow start state

  • Select the rainbow start state and Add trigger, set the Trigger name to on_end trigger and Next state to the rainbow middle state

  • Select the rainbow middle state and Add trigger, set the Trigger name to mouth_closed trigger and Next state to the rainbow end state

  • Select the rainbow end state and Add trigger, set the Trigger name to on_end trigger and Next state to the idle state

Triggers - a list of triggers that cause the animation state machine to advance to the next state.

Trigger name - an action that causes the animation state to advance to the next state.

  • Click Update model

  • Close Animations state editor

Check all list parameters for animation states and triggers in the article before.

Final results

Example 2 - Animated camera overlay

  • Open the DeepAR Studio

  • Now create the new effect via File → Create new effect

  • The next thing you need to do is select the Root and in Node properties set the Position to Position in camera space.

  • Now add new quad vie Node → Add Quad

  • Select the new Quad and in Node properties set the Layer to Overlay.

Now, load the texture animation

  • In Textures tab → Add →Animation

  • Choose the "lightsOnBlack" folder from the Image_sequence/example_2 folder then click open

  • Select the "PNG - 100%" texture quality to ensure transparency is displayed correctly

Wait until the DeepAR Studio processes the animation frames (might take up to a minute depending on the machine DeepAR Studio is running on)

The animation will run at 30 FPS, to change this select the animation in Texture list editor and enter the desired value.

Now you need to set up materials

  • Select the Quad

  • In Materials properties, under Select shader drop-down lists choose Unlit texture

  • For Blend mode choose Add

  • For Diffuse texture choose lightsOnBlack animation which we added before

Animation setup

  • Go to Assets → Animations state editor

Add a new state and for the Material set the Quad Material.

Duration will automatically appear. Just make sure that you check the Loop so the animation will constantly run in a loop.

Now, choose the idle state and add a new trigger.

For name set it uncond and for next state choose the new state you added before.

That's it, here is your final results.


Download this example with all assets

Did this answer your question?