Will there ever be animation blending or transitions ? Would be great to have that breaking change :D

[RalphEl]

 

Will there be ever animation blending, transiting  for BABYLON ?

it's so great engine...... but for game genre I would like to do with that I need that smooth transitions. 

Edited February 21, 2016 by RalphEl

[Gugis]

Are you talking about skeletal animations? There was few topics about this feature in the past, but still there's no such feature in roadmap. So I guess it is unlikely to happen in the near future.

[adam]

This post might be of use:

 

[adam]

That demo is using a "hacked" version of BabylonJS.

https://dl.dropboxusercontent.com/u/208774/babylon.js

Check out the Scene.beginAnimation function that has a weightAtFrame param:

Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, weightAtFrame) {
            if (speedRatio === undefined) {
                speedRatio = 1.0;
            }
            // this.stopAnimation(target);
            if (!animatable) {
                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, null, weightAtFrame);
            }
            // Local animations
            if (target.animations) {
                animatable.appendAnimations(target, target.animations);
            }
            // Children animations
            if (target.getAnimatables) {
                var animatables = target.getAnimatables();
                for (var index = 0; index < animatables.length; index++) {
                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, weightAtFrame);
                }
            }
            return animatable;
        };

 

and Animatable:

 

var Animatable = (function () {
        function Animatable(scene, target, fromFrame, toFrame, loopAnimation, speedRatio, onAnimationEnd, animations, weightAtFrame) {
            if (fromFrame === void 0) { fromFrame = 0; }
            if (toFrame === void 0) { toFrame = 100; }
            if (loopAnimation === void 0) { loopAnimation = false; }
            if (speedRatio === void 0) { speedRatio = 1.0; }
            this.target = target;
            this.fromFrame = fromFrame;
            this.toFrame = toFrame;
            this.loopAnimation = loopAnimation;
            this.speedRatio = speedRatio;
            this.onAnimationEnd = onAnimationEnd;
            this.weightAtFrame = weightAtFrame;
            this._animations = new Array();
            this._paused = false;
            this.animationStarted = false;
            if (animations) {
                this.appendAnimations(target, animations);
            }
            this._scene = scene;
            scene._activeAnimatables.push(this);
        }
        // Methods
        Animatable.prototype.appendAnimations = function (target, animations) {
            for (var index = 0; index < animations.length; index++) {
                var animation = animations[index];
                animation._target = target;
                if (this.weightAtFrame != null) {
                    animation.weightFunction = this.weightAtFrame;
                }
                this._animations.push(animation);
            }
        };
        Animatable.prototype.getAnimationByTargetProperty = function (property) {
            var animations = this._animations;
            for (var index = 0; index < animations.length; index++) {
                if (animations[index].targetProperty === property) {
                    return animations[index];
                }
            }
            return null;
        };
        Animatable.prototype.pause = function () {
            if (this._paused) {
                return;
            }
            this._paused = true;
        };
        Animatable.prototype.restart = function () {
            this._paused = false;
        };
        Animatable.prototype.stop = function () {
            var index = this._scene._activeAnimatables.indexOf(this);
            if (index > -1) {
                this._scene._activeAnimatables.splice(index, 1);
            }
            if (this.onAnimationEnd) {
                this.onAnimationEnd();
            }
        };
        Animatable.prototype._animate = function (delay, cache) {
            if (this._paused) {
                if (!this._pausedDelay) {
                    this._pausedDelay = delay;
                }
                return true;
            }
            if (!this._localDelayOffset) {
                this._localDelayOffset = delay;
            }
            else if (this._pausedDelay) {
                this._localDelayOffset += delay - this._pausedDelay;
                this._pausedDelay = null;
            }
            // Animating
            var running = false;
            var animations = this._animations;
            for (var index = 0; index < animations.length; index++) {
                var animation = animations[index];
                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this.speedRatio, cache);
                running = running || isRunning;
            }
            if (!running) {
                // Remove from active animatables
                index = this._scene._activeAnimatables.indexOf(this);
                this._scene._activeAnimatables.splice(index, 1);
            }
            if (!running && this.onAnimationEnd) {
                this.onAnimationEnd();
            }
            return running;
        };
        return Animatable;
    })();
    BABYLON.Animatable = Animatable;

 

That looks like a good starting point for blending animations.

 

[GameMonetize]

And PLEASE remember that Babylon.js is an open source project. Which means you can (and should) contribute to improve it.

This is the way you pay for it

[RalphEl]

On 2/21/2016 at 4:58 PM, adam said:

That demo is using a "hacked" version of BabylonJS.

https://dl.dropboxusercontent.com/u/208774/babylon.js

Check out the Scene.beginAnimation function that has a weightAtFrame param:

Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, weightAtFrame) {
            if (speedRatio === undefined) {
                speedRatio = 1.0;
            }
            // this.stopAnimation(target);
            if (!animatable) {
                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, null, weightAtFrame);
            }
            // Local animations
            if (target.animations) {
                animatable.appendAnimations(target, target.animations);
            }
            // Children animations
            if (target.getAnimatables) {
                var animatables = target.getAnimatables();
                for (var index = 0; index < animatables.length; index++) {
                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, weightAtFrame);
                }
            }
            return animatable;
        };

 

and Animatable:

 

var Animatable = (function () {
        function Animatable(scene, target, fromFrame, toFrame, loopAnimation, speedRatio, onAnimationEnd, animations, weightAtFrame) {
            if (fromFrame === void 0) { fromFrame = 0; }
            if (toFrame === void 0) { toFrame = 100; }
            if (loopAnimation === void 0) { loopAnimation = false; }
            if (speedRatio === void 0) { speedRatio = 1.0; }
            this.target = target;
            this.fromFrame = fromFrame;
            this.toFrame = toFrame;
            this.loopAnimation = loopAnimation;
            this.speedRatio = speedRatio;
            this.onAnimationEnd = onAnimationEnd;
            this.weightAtFrame = weightAtFrame;
            this._animations = new Array();
            this._paused = false;
            this.animationStarted = false;
            if (animations) {
                this.appendAnimations(target, animations);
            }
            this._scene = scene;
            scene._activeAnimatables.push(this);
        }
        // Methods
        Animatable.prototype.appendAnimations = function (target, animations) {
            for (var index = 0; index < animations.length; index++) {
                var animation = animations[index];
                animation._target = target;
                if (this.weightAtFrame != null) {
                    animation.weightFunction = this.weightAtFrame;
                }
                this._animations.push(animation);
            }
        };
        Animatable.prototype.getAnimationByTargetProperty = function (property) {
            var animations = this._animations;
            for (var index = 0; index < animations.length; index++) {
                if (animations[index].targetProperty === property) {
                    return animations[index];
                }
            }
            return null;
        };
        Animatable.prototype.pause = function () {
            if (this._paused) {
                return;
            }
            this._paused = true;
        };
        Animatable.prototype.restart = function () {
            this._paused = false;
        };
        Animatable.prototype.stop = function () {
            var index = this._scene._activeAnimatables.indexOf(this);
            if (index > -1) {
                this._scene._activeAnimatables.splice(index, 1);
            }
            if (this.onAnimationEnd) {
                this.onAnimationEnd();
            }
        };
        Animatable.prototype._animate = function (delay, cache) {
            if (this._paused) {
                if (!this._pausedDelay) {
                    this._pausedDelay = delay;
                }
                return true;
            }
            if (!this._localDelayOffset) {
                this._localDelayOffset = delay;
            }
            else if (this._pausedDelay) {
                this._localDelayOffset += delay - this._pausedDelay;
                this._pausedDelay = null;
            }
            // Animating
            var running = false;
            var animations = this._animations;
            for (var index = 0; index < animations.length; index++) {
                var animation = animations[index];
                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this.speedRatio, cache);
                running = running || isRunning;
            }
            if (!running) {
                // Remove from active animatables
                index = this._scene._activeAnimatables.indexOf(this);
                this._scene._activeAnimatables.splice(index, 1);
            }
            if (!running && this.onAnimationEnd) {
                this.onAnimationEnd();
            }
            return running;
        };
        return Animatable;
    })();
    BABYLON.Animatable = Animatable;

 

That looks like a good starting point for blending animations.

 

Thaks for all  stuff & wisdom  you've sent me,,,, I've been trying your experimentation earlier but didnt know that there was modified babylon.js file.... I am gonna loook into it much deeper........... loooks like you really did skeletal animation blending,, ,,

[GameMonetize]

I recently added animations blending support: http://www.babylonjs-playground.com/#2BLI9T#3

[adam]

1 hour ago, RalphEl said:

loooks like you really did skeletal animation blending,, ,,

That wasn't my code.  I found that in a demo in some other thread.

[RalphEl]

23 hours ago, adam said:

That wasn't my code.  I found that in a demo in some other thread.

Ok,,, so ,,,, i used that hacked version its version 2.1beta which is hacked..........

I looked into it and did easingIN  function,,,,,,,,it works great, !,, i think its very great solution for blending  skeletal animations,,,,,,,,,, so what I am trying to do,, ,is ......... that I have implemented this into the latest version of babylon 2.4alpha...

 

conclusion for now --- > everythings works great,, but,,...."?"......  one thing i am missing is   that somehow i cant figure out why _activeAnimations for my specific target won't have more that 1 animatabale,,, I've also disabled animation stop on beginning of animation.........          I will let U know if I will finish this for 2.4a........... or I will do some extension code for latest version..

..................... working on .....  please stand by......

 

 

this is solved for now.... blending works !! but will need to dynamically change speed of animation

[RalphEl]

 

Skeletal blending I did for Babylon,,,, -->Preview

****transitions has never been easyer

 

[RalphEl]

code is now ON my github

https://github.com/lemontmoon/Babylon.js

 

[GameMonetize]

But I cannot validate because you updated 159 files

[Xeonzinc]

As I'm so keen to use this feature I copied RalphEL's code onto my own fork (a week is a long time ) The blending works really well  

I was going to try doing a pull request to get it into babylon as RalphEL doesn't seem to have had time to fix the issue you mentioned above, but noticed my pull request would look exactly like his commit (with a tiny bit of formatting). So, being new to github, what is needed to resolve the 159 file issue?  

[adam]

2 hours ago, Xeonzinc said:

RalphEL's code

The blending code above was added by @root77 

[dbawel]

@RalphEl - I really like the scene you built for both the animation as well as the behaviors. I would recommend posting as a babylon.js demo, and If you have a chance to improve the aesthetics a bit, then it would be something to showcase.

I hope newbies to game develoment look at such scenes and understand the code driving them - but also understand all of the preparation required to sucessfully blend character animation for a character driven game - such as move trees. If there are users on this forum who don't understand move trees, then it might be worth a seperate post and discussion. I would like to know what users are currently using to solve this piece of development, which is what software they use to build their move trees and are there blending tools in these applications.

Cheers,

DB