Elaboration of Animation

[amorgan]

Hello, I am trying to understand everything I can do with the Babylon animations, but have yet to really find what I'm looking for. In general, are there any complex examples of using animations. The 07 Animation tutorial seems to leave me hanging on understanding the complex animation usage.

 

For example, say I had a box that was scaled to (1,4,1) (so a tall rectangle) and want to rotate it left and right (0 to PI/2) as the animation, but then when I rotate the box 90 degrees I want it to continue the rotating animation but now (0 to PI/2) + 90 degrees, which is the direction the box was turned. What is the correct way to do this?

 

Below is a start using the playground:

 

http://www.babylonjs-playground.com/#1CCDVC

 

Thank you,

amorgan

[JCPalmer]

I am not real familiar with the animation system, but does replacing the keys build section with this what you want to do?

    // Animation keys    var keys = [];    //At the animation key 0, the value of scaling is "1"    keys.push({        frame: 0,        value: new BABYLON.Vector3(0,0,0)    });    //At the animation key 20, the value of scaling is "0.2"    keys.push({        frame: 30,        value: new BABYLON.Vector3(0,Math.PI/2,0)    });    //At the animation key 20, the value of scaling is "0.2"    keys.push({        frame: 60,        value: new BABYLON.Vector3(0,Math.PI,0)    });    //At the animation key 100, the value of scaling is "1"    keys.push({        frame: 90,        value: new BABYLON.Vector3(0,Math.PI * 1.5,0)    });

[amorgan]

Yea, the only thought I had so far is on 90 degree rotation (or some arbitrary mesh rotation separate from the animation) , recreate the keys and set the new animation, but I feel like that is not the correct way to do it.

 

Edit: I guess I didn't read your post well enough, what I really want to do is more like

 

// Animation keys    var keys = [];    keys.push({        frame: 0,        value: new BABYLON.Vector3(0,box1.currentAngle,0)    });    keys.push({        frame: 30,        value: new BABYLON.Vector3(0,box1.currentAngle + Math.PI/2,0)    });    keys.push({        frame: 60,        value: new BABYLON.Vector3(0,box1.currentAngle,0)    });

[amorgan]

Wanted to update that I was able to do what I wanted by following Temechon's tutorial http://www.pixelcodr.com/tutos/toad_attack/toad_attack-2.html under Basic Animations, by creating a function that had the keys with variables and then just calling that function when I want to animate to get the current rotation. I thought this would be computationally heavy, but it seems fine. So unless there is a way to do this other than recreating the animation, I will stick with this method.

[Wingnut]

Hi amorgan, welcome to the forum.  Um, do you want a small delay between the rotations?  In other words, do you want to rotate 90 degrees, then stop for a moment, then rotate another 90 degrees, etc?

If so, think about this...

frame 0-100 :      animate y from 0 to Math.PI/2  (0 to 90 degrees)

frame 101-200:   animate y from Math.PI/2 to Math.PI/2  (a 100 frame do-nothing delay)

frame 201-300:   animate y from Math.PI/2 to Math.PI  (90 degrees to 180 degrees)

frame 301-400:   animate y from Math.PI to Math.PI  (a 100 frame do-nothing delay)

frame 401-500:   animate y from Math.PI to (Math.PI+Math.PI/2)  (180 degrees to 270 degrees)

frame 501-600:   animate y from (Math.PI+Math.PI/2) to (Math.PI+Math.PI/2)  (a 100 frame do-nothing delay)

frame 601-700:   animate y from (Math.PI+Math.PI/2) to (Math.PI*2)  (270 degrees to 360/0 degrees)

Don't quote me, but I THINK this will work.

Or maybe you want to rotate 90 degrees each time the box is clicked?

Then maybe see our ActionManager demo at http://playground.babylonjs.com/?17  (click on the sphere)

 

Another method:

I once made a playground demo that used a "phase" variable... and a switch/case (line 471) to test what phase of animation was needed next.  http://playground.babylonjs.com/#YIT1S .  This method of animation doesn't use keyframes (except for a delayer/pauser function).

Push the "show editor" button, and scroll about halfway down in the code (or choose GET ZIP and take it all home and study it there).  I added two properties to my box... .phase and .nothing.  Phase keeps track of which phase of the animation is needed next (for the switch/case function called update_mybox). 

The box starts out with mybox.phase = 1;  The update_mybox is called by the animate function, and if you look at line 764 - scene.registerBeforeRender(animate);...  that causes the animate function to run once per frame (continuously).  So, the switch/case function runs once per frame. 

Let's look at case 18:

case 18:	if (tb.rotation.y >= Math.PI) {		tb.rotation.y = Math.PI;		updateDelay(tb, scene);	}	else {		tb.rotation.y += offset;		printrot();	}	break;

Inside each 'case' of the switch/case, an if/then test checks if the box is done with THAT phase of rotation.  IF rotation is equal-to or greater than Math.PI.. then set it EXACTLY to Math.PI (square it up in case the last animation step went a bit too far).  Then I call the delayer... updateDelay(tb, scene); which is a 100 frame animation of the .nothing variable on box.  It does nothing.    And inside the updateDelay function, I increment the box.phase... indicating that the previous animation phase is done.

If rotation is NOT equal-to or greater than Math.PI... add a small amount of rotation to the box Y-axis with this fancy incrementing line...  tb.rotation.y += offset;  and then printrot();... which just prints the current rotation values to a DOM node on the top of the screen.  Since the rotation was not yet finished, no updateDelay was called (no pause), and therefore box.phase was not incremented.  Remember that the giant switch/case function called update_mybox runs every frame.  And in line 472... var offset = 0.02;  ... this is a tiny amount of rotation to be added per frame.

AND... if you don't need a delay after each 90 degree rotation...  you can rotate from 0 to Math.PI*2... for a 360 degree rotation, of course.  You probably already knew that.

By the way, anytime you need to obtain box1.currentAngle, you can simply use/query box1.rotation.y and it will return the box's current Y rotation. You probably knew that already, too.  If you notice in my update_mybox function... I need to look-up the box in order to get its current Y rotation.  You may need to do something similar... maybe like this.

var somefunction = function() {     var scene = engine.scenes[0];     var thebox = scene.getMeshByName("mybox");     var curboxrot = thebox.rotation.y;     ...}

*shrug*

I don't know if ANY of this helps, but I wanted to show it to you in case it does.    At least you have some more things to experiment-with.  Be well.  Keep us posted.

[amorgan]

Thanks for the response! This is still all good stuff, but what I was trying to do was be able to animate an object relative to the "front facing" direction of the mesh. What I am doing is rotating the object for walking, so I want to then animate it relative to the new position.

 

What I am doing right now is just creating a function similar to the function in Temechon's example and just calling the function each time, where I recreate the entire animation and calculate the value right before the animation. So I'm wondering if there is a better way, or if that is actually the best way to do this?

[GameMonetize]

This is the best way to do because you need a really dynamic animation (based on front facing info)

[amorgan]

Thanks for the confirmation! I would mark something answered, but I'm not sure which post provides the most value as to being marked the "answer".

[amorgan]

I wanted to post my solution, but what I have done after porting it to the playground, it does not seem to be working properly.

 

http://www.babylonjs-playground.com/#1QRKQF

 

The onEnd function I have should be called on the end of the animation, but seems to be called at the beginning? This code (at least in my program) works, but not on the playground.

[GameMonetize]

when I hit space I can see the animation and then the object is returning to its original position

 

Sounds good no?

[amorgan]

Well it does not always go back to the currentFacingAngle and isn't playing the animation with respect to all directions. For me after I run on the Playground, it reacts differently if I hold down the spacebar vs if I just press it. In addition, when I download the code so I can step through it in the chrome debugger, the onEnd function seems to run at the beginning of the animation and not the end? It does work for me with my code, just not in the playground?

[GameMonetize]

I found the problem: you were not using an anonymous function or a callback name for the onAnimationEnd:

http://www.babylonjs-playground.com/#1QRKQF#1

[amorgan]

Thanks! Such a silly mistake O.o