Tap Through Animation Layers

Featured
  • Hi, would there be anyway to have each animation play its own sound?

    Comment actions Permalink
  • Hi Zachery!

    Yep! You would do something very similar. 

    First create an Audio component for each of your sound. In the objects panel: Add New -> Empty Object; then in Inspector panel: Add Component -> Audio. put your mp3 herein the Audio Track field. 

    You can pass these Audio components in via an array input like in the guide.

    // @input Component.AudioComponent[] audioComp

    Then when you tell the script to play animation in playAnimIndex, you can tell it  to play the AudioComponent as well.

     script.audioComp[index].play(1)

    Finally, we tell the sound to stop when we stop the animation in stopAnimIndex

    script.audioComp[index].stop(false)

    Let me know how it goes! Would love to see what you create :)

    Cheers,
    Jonathan

    Comment actions Permalink
  • I used the final script but Im getting any error 

    SyntaxError: empty expression not allowed (line 40)
    at [anon] (Hipster/Scripts/MultiAnim:40) internal

    Any idea what could be the problem?

    Comment actions Permalink
  • Hi Wayne, 

    Can you show us your script / line 40? This looks like a JavaScript error, but can't be sure without the code.

    Thanks in advance!

    Jon

    Comment actions Permalink
  • Problem fixed... missed the } off right at the end.

     

    All working but it brings me to another question. 

    All the animations look at the moment .

     

    Is it possible to keep the idle animation on loop until triggered with the tap and then play the other animation just once then revert back to idle?

    Comment actions Permalink
  • Glad to hear you found the issue :)

     

    You can take a look at Interactive Tap templates for an example of that. It's a template that's design to play an animation and then go back to the idle animation. 

    To have that in this script, something you can do is: instead of 

     script.animMixer.start(script.tapAnimLayer[index], 0, -1);

    You can use something like 

     script.animMixer.startWithCallback(script.tapAnimLayer[index], 0, 1, playIdle);

    where playIdle is a function that plays your idle animation. You can see more about this function here.

     

    Cheers!

    Jon

     

    Comment actions Permalink
  • Thanks Jon, 

    I replaced

    script.animMixer.start(script.tapAnimLayer[index], 0, -1); with
    script.animMixer.startWithCallback(script.tapAnimLayer[index], 0, 1, playIdle);

    so the script now reads as

    // -----JS CODE-----
    //@input Component.AnimationMixer animMixer
    //@input string[] tapAnimLayer
    // Starting animation index
    var currentAnimLayerIndex = 0;
    // Function runs at start of lens
    function onLensTurnOnEvent()
    {
    // start the new animation
    playAnimIndex(currentAnimLayerIndex);
    }
    var turnOnEvent = script.createEvent("TurnOnEvent");
    turnOnEvent.bind(onLensTurnOnEvent);
    function onTap(eventData)
    {
    // stop current animation
    stopAnimIndex(currentAnimLayerIndex);

    // increment current animation
    incrementAnimIndex();
    // start the new animation
    playAnimIndex(currentAnimLayerIndex);
    }
    var tapEvent = script.createEvent("TapEvent");
    tapEvent.bind(onTap);
    function incrementAnimIndex()
    {
    currentAnimLayerIndex = currentAnimLayerIndex + 1;
    currentAnimLayerIndex = currentAnimLayerIndex % script.tapAnimLayer.length;
    }
    function playAnimIndex(index)
    {
    script.animMixer.startWithCallback(script.tapAnimLayer[index], 0, 1, playIdle);
    script.animMixer.setWeight(script.tapAnimLayer[index], 1.0);
    }
    function stopAnimIndex(index)
    {
    script.animMixer.stop(script.tapAnimLayer[index]);
    script.animMixer.setWeight(script.tapAnimLayer[index], 0.0);


    and I get this error


    09:35:26 ReferenceError: identifier 'playIdle' undefined
    at playAnimIndex (Hipster/Scripts/MultiAnim:33)
    at onLensTurnOnEvent (Hipster/Scripts/MultiAnim:10) preventsyield

    Any idea what the problem is ? sorry I don't really have any coding knowledge

     

    Wayne

    Comment actions Permalink
  • Hi Wayne,

    Ah this error is because you haven't made a playIdle function.

    As mentioned above, playIdle should be a function you define to stop any current animation and play your idle animation. For example: 

    function playIdle() 
    {
    stopAnimIndex(currentAnimLayerIndex);
    script.animMixer.start(script.idleAnimLayer, 0, -1);
    script.animMixer.setWeight(script.idleAnimLayer, 1.0);
    }

    In this case we added a new variable to define our "idle" animation in the Inspector panel at the top of the file.

    // @input string idleAnimLayer

     

    We should also add a script to stop the idle animation similar to how we stopAnimIndex so that when we play a tap animation our idle animation will stop. 

    function stopIdle() 
    {
    script.animMixer.stop(script.idleAnimLayer);
    script.animMixer.setWeight(script.idleAnimLayer, 0.0);
    }

     

    Finally we can tell the script to use these new functions.

    When the lens start we want to play our idleAnimLayer instead of our tapAnimLayer

    function onLensTurnOnEvent()
    {
    // start the idle animation
    playIdle();
    }

    and when we tap we want to stop our idle animation as well. 

    function onTap(eventData)
    {
    // stop idle animation
    stopIdle();

    // stop current animation
    stopAnimIndex(currentAnimLayerIndex);

     

    So the overall lens script can look something like: 

    // @input Component.AnimationMixer animMixer
    // @input string idleAnimLayer
    // @input string[] tapAnimLayer
    // Starting animation index
    var currentAnimLayerIndex = 0;
    // Function runs at start of lens
    function onLensTurnOnEvent()
    {
    // start the idle animation
    playIdle();
    }
    var turnOnEvent = script.createEvent("TurnOnEvent");
    turnOnEvent.bind(onLensTurnOnEvent);

    function onTap(eventData)
    {
    // stop idle animation
    stopIdle();

    // stop current animation
    stopAnimIndex(currentAnimLayerIndex);

    // increment current animation
    incrementAnimIndex();

    // start the new animation
    playAnimIndex(currentAnimLayerIndex);
    }

    var tapEvent = script.createEvent("TapEvent");
    tapEvent.bind(onTap);
    function incrementAnimIndex()
    {
    currentAnimLayerIndex = currentAnimLayerIndex + 1;
    currentAnimLayerIndex = currentAnimLayerIndex % script.tapAnimLayer.length;
    }

    function playAnimIndex(index)
    {
    script.animMixer.startWithCallback(script.tapAnimLayer[index], 0, 1, playIdle);
    script.animMixer.setWeight(script.tapAnimLayer[index], 1.0);
    }

    function stopAnimIndex(index)
    {
    script.animMixer.stop(script.tapAnimLayer[index]);
    script.animMixer.setWeight(script.tapAnimLayer[index], 0.0);
    }

    function playIdle()
    {
    stopAnimIndex(currentAnimLayerIndex);
    script.animMixer.start(script.idleAnimLayer, 0, -1);
    script.animMixer.setWeight(script.idleAnimLayer, 1.0);
    }

    function stopIdle()
    {
    script.animMixer.stop(script.idleAnimLayer);
    script.animMixer.setWeight(script.idleAnimLayer, 0.0);
    }


    Let me know how it goes!

     

    Cheers,

    Jon

    Comment actions Permalink
  • Hi there, Jon! This is an excellent tutorial, thank you. 

    I was actually wondering if I could get some help accomplishing something similar. 

    I have an animation of a bird separated into three layers: Landing, Idle, and Launch. I'd like for the bird to come into frame, landing on a surface at the start of the lens. Then, once that animation is done, cycle through the idle animation. Finally, when the user taps the screen I'd like for the launch animation to play, where he flies out of frame. 

    I've tried scouring the forums for help, but this tutorial has been the most close-ish I've come to what I want to do. If I had Javascript skills I'd try and figure it out myself, but sadly I'm just a 3D Animator. :) 

    I would love your thoughts if you have the time! 

    Comment actions Permalink
  • Hey!

    you can use the behavior script to trigger each animation! Let me know if you have any questions.

    Ben

    Comment actions Permalink
  • Hi there, Ben! 

    Unfortunately, I haven't been able to get the behavior script to work in my scene at all. I've actually tried using it in a fresh scene without my 3D animation and the script works fine; however, it refuses to function in my scene with my flying bird. It's so odd because other scripts like the TapAnim script, IdleAnim script, and custom scripts all work just fine. I'm sure it's something I'm doing wrong. 

    I followed the exact instructions given on how to export my animations from Maya, so everything should be properly set up. Maybe it's a matter of where I'm putting the script? 

    Comment actions Permalink
  • Hi Abigail,

    If you upload your project file to google drive, i will take a look for you.

    Comment actions Permalink
  • I'm having trouble getting this script to run at all. I've added the script to my 3D object, below the Animation Mixer in the Inspector. However, there are no fields available in the inspector view, to add animation layers.

    Comment actions Permalink
  • Peter Steiner 

     

    Hey, looks like your script isn't saved make sure to press Crtl + S in the Script Editor to save the script

    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!