How to blend animations?

[ozRocker]

I'm using preview version 2.4 to try and get animation blending happening.  I've checked the playground and also the tutorial but I still don't understand how to apply it to my character animations.

My character moves like this:

avatar.skeleton.beginAnimation("Idle",true,1);

//some stuff

avatar.skeleton.beginAnimation("Walk",true,1);

I don't know where to apply "enableBlending" and "blendingSpeed" to this.  Does anyone know?

[GameMonetize]

Hello

to enable blending, just go through skeleton's animations like this:

avatar.skeleton.animations.forEach(function(animation) {
   animation.enableBlending = true;
   animation.blendingSpeed = 0.05;
});

 

[ozRocker]

7 hours ago, Deltakosh said:

Hello

to enable blending, just go through skeleton's animations like this:

avatar.skeleton.animations.forEach(function(animation) {
   animation.enableBlending = true;
   animation.blendingSpeed = 0.05;
});

 

My skeleton doesn't have an "animations" property.  This spits out an error saying its undefined.

This is what my "skeleton" object looks like:

[GameMonetize]

Sorry I'm stupid:

avatar.skeleton.bones.forEach(function(bone) {
   bone.animations.forEach(function(animation) {
      animation.enableBlending = true;
      animation.blendingSpeed = 0.05;
   });
});

 

[ozRocker]

13 hours ago, Deltakosh said:

Sorry I'm stupid:

avatar.skeleton.bones.forEach(function(bone) {
   bone.animations.forEach(function(animation) {
      animation.enableBlending = true;
      animation.blendingSpeed = 0.05;
   });
});

 

I'm not able to do this :/  I get "Uncaught TypeError: Cannot read property '0' of undefined" when trying to change the "enableBlending" property.

On further inspection via developer tools I can see "blendingSpeed" is initially 0.01 but "enableBlending" is set to "undefined".

[ozRocker]

Here's a playground where I'm trying out that code.  This will cycle through animations idle and running.

http://www.babylonjs-playground.com/#GTHTR#2

 

[tranlong021988]

hi @ozRocker, I have a simple test and facing same problem.

https://dl.dropboxusercontent.com/u/86585940/babylon-dance/index.html

I did export 3d model and animation (babylon format) from 3d Max, it contain two animation dance, I'm making it turn cycle after each 5 sec, til now it work, but not blending (smooth change). My main code below:

            // set blending enable for each bone animation
            skeleton.bones.forEach(function(bone) {
			   bone.animations.forEach(function(animation) {
				  animation.enableBlending = true;
				  animation.blendingSpeed = 0.01;
			   });
			});
			//console.log(skeleton);
			
			skeleton.createAnimationRange("dance1",0,300); //  define dance 1 animation
			skeleton.createAnimationRange("dance2",450,560); //  define dance 2 animation
			skeleton.beginAnimation("dance1",true,1); // play the first one
			
         
            // change animation dance each 5 secs
            window.setInterval(function(){
				if(currentDance=="dance1"){
					currentDance = "dance2";
				}else{
					currentDance = "dance1";
				}
				girl.skeleton.beginAnimation(currentDance,true,1);
				},5000);

I used to check your Playground sample but it is just black screen, so I wonder how you success. Can you point me?

SOrry for my poor English.   

 

[ozRocker]

3 minutes ago, tranlong021988 said:

I used to check your Playground sample but it is just black screen, so I wonder how you success. Can you point me?

I get a black screen because this line:

animation.enableBlending = true;

gives me an error and breaks the code.

If I remove that line then the code will run, but there is no animation blending.  I'm still stuck, sorry!

[tranlong021988]

3 minutes ago, ozRocker said:

I get a black screen because this line:

animation.enableBlending = true;

gives me an error and breaks the code.

If I remove that line then the code will run, but there is no animation blending.  I'm still stuck, sorry!

That so sad, I dig around and see that it's not too many success case, this is what I find out (may be the best):

 And @RalphEl have a create contribution here: 

But I don't know how to make it work with my case. 

[adam]

It appears that enableBlending is a function:

https://github.com/BabylonJS/Babylon.js/blob/86da83bc317787dd9b35c4e0a977ca71c0bdb805/src/Animations/babylon.animatable.js#L52

Edit: I'm looking at the wrong file.  That should probably be named differently though.

[tranlong021988]

@adam it's seem that  enableBlending function is belong to Animatable object  not Animation. It throw error when I try  animation.enableBlending (0.05). 

[gryff]

Oz, I've been keeping an eye on this thread, and I have just tried your playground example above. When I disable the blending code, I see "Josh" cycle through the animations BUT this error, at line 44,  is being thrown repeatedly in my FF web console"

Quote

TypeError: avatar.skeleton is null

There also seems to be oddities in the debug layer values (eg. Total Textures = 0, when Josh  obviously has a texture)

Not sure what it all means though

cheers, gryff

[ozRocker]

yeh, I can see its spitting out

VM118:47 Uncaught TypeError: Cannot read property 'beginAnimation' of null

for me too.  Same as the other playground in my other thread.  But the playground still runs, so the mesh obviously must have a skeleton and animations.  Also, I don't get these errors in my production environment.

[tranlong021988]

I already check bone properties from log console, it has range property but empty although its skeleton has.

It's seem that we have to set range animation for each bone, not only skeleton. I think. 

[GameMonetize]

Ok there is a bug in the Matrix Lerp code...I'll fix it soon

[tranlong021988]

@Deltakosh Many thanks. I almost give up with this. T__T

[GameMonetize]

Here we are (please clear your cache): http://www.babylonjs-playground.com/#GTHTR#7

I'm pushing the version on github in 10 minutes

[adam]

Sweet!

avatar.skeleton.enableBlending(0.05)

[ozRocker]

It works beautifully!