Triggering 2d animation to play onEvent, and reverse...

  • Can anyone help with this? 

    Comment actions Permalink
  • 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 Permalink
  • 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 Permalink
  • 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 Permalink
  • 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 Permalink
  • 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 Permalink
  • 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 Permalink
  • 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 Permalink
Have a comment?

Please sign in to leave a comment.

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!