[Example Project] Timing effects

Hey Lens Studio Community!

Previously I’ve shared a project where we can drive animation using skeletal tracking and also apply IK kinematics to do dynamic animations. Today we’re going to give it a final polish by adding effects that are timed to music!

Setting up the scene

The last time we left off, we have our skeleton animating with the body. But it didn’t really seem like a dance party since there was only one. At first it may seem like duplicating our skeleton hierarchy would be the quickest way to have more skeletons. However, we can simplify and optimize our Lens by duplicating the result rather than the process. 

Since all our skeletons will dance in the same way, we can render it on a separate camera, and then use a screen image to display them. Instead of having to copy a whole hierarchy, we just need to create 4 screen images, one for each skeleton we want to display.

Secondly, another trick we can do to make our Lens feel more fun is to create variety. We can do this by flipping some of our screen images, changing their scale, and adding some basic tweens. 

Let’s take a look at what we’ve got so far: 

Scripting effects

Now it already looks way nicer and we didn’t even have to code! We can further add spice to our Lens by adding simple effects. Just like a disco ball lights up a room to make dancing more fun, small touches to a Lens can go a long way in setting the mood and creating polish. 

I added a couple simple effects to help spice up our Lens

• Particles (confettis and smoke)
• Post effects (to add color)
• Tweens (to give our effects some rhythm). 

Timing Effects

Although the Lens is looking fun now, it still feels a little static, since nothing changes over time. We can make the Lens feel alive by having it change over time. In our case, we will time our effects to music. 

The effects we mentioned earlier all have different parameters we can effect based on our music, but time is used for all of them. So what we can do is create a script that describes the time in which we want an action on an object to take place. 

In this case, I set up some actions for:

• Enabling a SceneObject
• Playing a Tween
• Calling another script’s functions (this way another script can describe what specific action they may want, like playing a particle)

You can see that in AudioAttachedSequence, you can select an action type, as well as give a list of timestamps and scene objects.

Setting up the Sequence

Now that we have our helper script, we can set up some sequence! 

For example, we can set up a sequence that enables the screen image we added earlier over time. 

By exposing the time value into the script component, it makes it a lot easier to edit the timing because you can see your changes in the Inspector and see the results instantly when the Lens refreshes.

We can do the same with Particles. This time we tell AudioAttachedSequence to call an API that triggers the particles. Now, when our screen image of skeletons appear, it feels more natural.

Finally, we can tween the alpha and scale of a post effect to make our Lens connect with the rhythm of the sound!

That’s it!

To Recap

• We can use a separate camera to manage complex effects better 
• Adding simple effects can make a big difference in the polish of a Lens
• Adding effects over time can make a Lens feel more dynamic and alive

Download the project here!

Let us know if there's something you're interested in creating, or if you have any questions about our process!

Best,

Olha