Jump to content

Block input action while animation is played


Recommended Posts



I'm currently implementing some actions via the ActionManager class in my project.

I want to control a sprite with the keypad, and so I'm mixing the actual sprite animation (player.playAnimation) with a position animation where the sprite is moving a certain distance (custom animation with easing via scene.beginAnimation).

Problem is, I'd like to have successive inputs blocked until the movement animation has finished so that the functions don't get called again during that time.

Is that somehow possible ?  


Thanks in advance!

Link to comment
Share on other sites

Hiya @danksch, welcome to the forum.  Let's tour THIS playground:  http://www.babylonjs-playground.com/#9WUJN#22

First, you should know that this was ORIGINALLY a 180 frame animation, but I added 5 more frames in lines 37-40 (box does not change position at all during that 5 frames at the end). 

I do this...  because we are about to put a BABYLON.AnimationEvent on frame 180.  BUT, a 0-180 frame animation... might never "land-on" frame 180.  Often, the last frame is 178.6 or 179.2, etc.  An animationEvent placed on frame 180... might never occur. 

Now you know WHY I added some frames BEYOND the AnimationEvent on frame 180.

Watch the JS console.  You'll see the AnimationEvent (from lines 45-48) report to console near/at the animation ending.

There is ANOTHER way... a "callback" called 'onAnimationEnd'.  It is available as a final arg/parameter in line 61... scene.beginDirectAnimation().  This calls my onAnimationEndFromCallbackFunc()... in lines 54-57.

Okay, NOW you have TWO different types of "triggers/actions" that signal the end of an Animation.  What can you do with it?


Well, you spoke-of stopping keypresses during animation runs.  BUT, WHAT IF, instead, you block startMyAnimation()... IF boolean flag OkToStartAnim... is set false? 

Begin by using a function to START your animation (perhaps called from within your keyDown handler func).  Example:

var startMyAnim = function() {
     if (OkToStartAnim) {
          scene.beginDirectAnimation(blah, blah, blah);
          OkToStartAnim = false;

As soon as you start your animation, ALSO set global OkToStartAnim flag...  to false.  If OkToStartAnim is false, the user can do keypresses until they go crazy, but no repeat-starting of THIS animation. 

Using EITHER method of "my animation has ended", you can set your OkToStartAnim = true;  THEN the user will be able to start a "repeat" animation.

SO... OkToStartAnim is this one animation's "starter lock", right?  You can use EITHER of the end-of-animation handlers to toggle that boolean lock.  With me?  I hope so.  Holler if you have any questions.  Party on!

Link to comment
Share on other sites

Hey @Wingnut,

thanks for the thorough answer (plus the playground), I really appreciate it! 

Your solutions make sense; actually, I've already been using the callback-argument to resume the idle sprite animation. Just didn't think about switching a boolean on and off...well, sometimes it's the simple things. ;)

Thanks again!



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...