Transitioning between animations

[josemayi27]

Hey All,

 

For a while and without success, I was looking for a way to transition between animations in babylon 2.0. By transition, I mean transform the bones over time to be exactly where they would be in the first frame of the animation that is about to play before the animation itself plays. This way it won't look weird when moving, say, from a walking animation to an idle animation or vice versa. I am trying to avoid having to create transition animation in blender for every possible combination. Since I could not find a way to do it, I was going to attempt to create a way myself. However, when iterating through the bones I realized that the only when to modify their transforms is to update their matrices. This is where the problem comes in. I am not very familiar with matrix math and would like to see if anyone could point me in the right direction as far as what calculations I need to perform on a bone to move it to the first frame of an animation that is about to play. Thanks in advance for the help!

[GameMonetize]

If you want to transition from current position to a new position, you can go through all bones and set key 0 matrix to the current value (Am I clear?)

[josemayi27]

 

If you want to transition from current position to a new position, you can go through all bones and set key 0 matrix to the current value (Am I clear?)

 

 

Thanks for the quick response Deltakosh!

 

I may not be understanding correctly. I tried something like the following:

for (var indx = 0; indx < skeleton.bones.length; indx++) {                    skeleton.bones[indx].updateMatrix(skeleton.bones[indx].animations[0].getKeys()[106].value); //106 is where the animation to transition to starts                }

But it animates the bone backwards. For example, if the avatar's face is supposed to be looking to the right, it looks to the left instead. There is also deformation in some places, primarily in the fingers. Is the above sample what you had in mind?

[Dad72]

And using .negate () for reverse movement.

 

skeleton.bones[indx].updateMatrix(skeleton.bones[indx].animations[0].getKeys()[106].value).negate();

 

It's just an idea.

[josemayi27]

And using .negate () for reverse movement.

 

skeleton.bones[indx].updateMatrix(skeleton.bones[indx].animations[0].getKeys()[106].value).negate();

 

It's just an idea.

 

Thanks for the idea, but it didn't seem to do anything different than what it was already doing. However, looking through how babylon animates things I was able to update the code to:

for (var indx = 0; indx < skeleton.bones.length; indx++) {            var bone = skeleton.bones[indx];            var currentAnimation = bone.animations[0];            bone[currentAnimation.targetPropertyPath[0]] = currentAnimation.getKeys()[107].value;        }

This seems to correctly move the bones to where they should be on frame 107. Now the question is how do I move from the current value to frame 107's value over time? I currently use tweenJS to animate properties of an object, but I imagine than simply changing m array inside bone[currentAnimation.targetPropertyPath[0]] instance is a bad idea. Any ideas of how I should go about that?

 

I attached a sample of my current progress. Figured it would make it easier. Demo.js has all the logic. The part for the animation starts on line 37.

 

Thanks in advance for the help!

 

Demo.zip

[petemac]

Has anyone figured out how to do this?

 

Maybe?:

http://www.html5gamedevs.com/topic/17135-create-bone-animation-programatically/?hl=programatically

 

Hmm, I understand it, but when I try to implement it, it doesnt work, gets caught up on .value and .value.m.