Triggering 2d animation to play onEvent, and reverse...
This is really hard to explain, but I have a 2D animation of a pencil breaking, I would like to have it stay on the first frame until say, the MouthOpenEvent happens, then it would play the animation (the pencil breaks), play until the end of the animation, hold on last frame, and then when the person closes their mouth (MouthClosedEvent), it would reverse the animation back to the starting frame.
is this possible?
-
Can anyone help with this?
Comment actions -
Hi Topher!
Yep! You're right we just need to bind an animation play function to those events..
First, we will turn off auto play on our animated texture so that we can control when it plays. Select the texture in your Resources panel, then in your Inspector panel untick Always Play
Then we'll create a script to control the animation.
On the object holding your sprite with the 2D animation, click Add New > Script. Then in the new Script component, press Add Script. In the popup, in the top left press Add New > Script.
In this script we will first get the control object for our animated texture. Take a look at https://lensstudio.snapchat.com/api/classes/AnimatedTextureFileProvider/ for more information.
var control = script.getSceneObject().getFirstComponent("Component.SpriteVisual")
.mainPass
.baseTex
.control;Then, we can create a few event to tell this control to play.
We'll create a MouthOpenedEvent to play our animation forward.
var mouthOpenedEvent = script.createEvent("MouthOpenedEvent");
mouthOpenedEvent.bind(function(eventData)
{
control.isReversed = false;
control.play(1,0);
});We'll also create an event to play the animation in reverse when we close our mouth. Notice that we play from our current frame, rather than frame 0 as we did in the mouthOpenedEvent, in case the user closes their mouth before the animation has finished.
var mouthOpenedEvent = script.createEvent("MouthClosedEvent");
mouthOpenedEvent.bind(function(eventData)
{
var currentFrameIndex = control.getCurrentPlayingFrame();
control.isReversed = true;
control.playFromFrame(currentFrameIndex, 1);
});and that's it!
Let me know if this works for you, and what you come up with!
Cheers,
Jon
P.s you may want to stop the animation half way. If you want to do this, create an UpdateEvent where you check the current animation frame, and then pause it when it reaches that frame.
var updateEvent = script.createEvent("UpdateEvent");
updateEvent.bind(function(eventData)
{
var currentFrameIndex = control.getCurrentPlayingFrame();
if (currentFrameIndex == 35) {
control.pause();
}
});Comment actions -
How would the bove code be updated for the new lens studio version?
Im getting an error: no component at index: 0
From reading up on this I'm seeing mention that I simply need to change "component.spritevisual" to "component.Image" due to updates in Lens Studio. However this is having no effect.
Comment actions -
Hi Travis!
Correct--make sure you have capitalization right as well: Component.Image
and that the script is on an object which has an Image Component on it!
Cheers,
Jonathan
Comment actions -
Hi Travis!
Correct--make sure you have capitalization right as well: Component.Image
and that the script is on an object which has an Image Component on it!
Cheers,
Jonathan
Comment actions -
Thanks! The trigger is working correctly now, however the mouth closed event (playing in reverse) isn't working. Instead, when my mouth is closed the animation just disappears...
Anything I need to change for that control?
Comment actions -
Actually it does play in reverse if I close my mouth before the animation has finished. But if I let the animation finish (and then it holds on the last frame) it just disappears on mouth close instead of playing in reverse.
Comment actions -
Hi Jonathan. I've got one last hiccup here I was hoping you could help with.
When I start this lens the animation is already at its final frame. When I open my mouth it restarts as it should and when I close my mouth it reverses as it should. Its just the starting state that is the problem.
Is there a way to have it only activate once the first mouth open event and not be on by default when starting the lens?
As a reference I have a red carpet unrolling out of the users mouth. So when I start the lens currently the carpet is already at its last frame fully unrolled.
Comment actions
Please sign in to leave a comment.
Have a comment?