How to use Babylon animations in local space ( translate )

[rainerpl]

Hi,

Im relatively new to babylon, and i find its animation's api somewhat confusing.

Atm, my problem is making a game object jump forward. 
I managed to do that, but the animation is applied to the object's position coordinates in using world orientation.
If my game object rotates e.g 90 degrees, then the jump will be animated sideways, not forward.

How can i tell the animation api to use local coordinates(translate property value ).

[JohnK]

Hi and very welcome to the forum. One thing that helps everybody to help you is for you to do an example in the Playground which people can then edit.

Read about it here

In the meantime there are alternatives to using the animation api. Use scene.registerAfter(Before)Render instead, perhaps these will suit you better. These pages may help:

Rotate and Translate

Rotate and Translate in Detail

 

[Wingnut]

Hi @rainerpl, welcome to the forum.  I'm no expert in animations, either, but I wanted to show you something.

http://www.babylonjs-playground.com/#1JBLBL#2

This does not use animations, but it uses .rotate and .translate, done in local space.  Click on canvas, then try your WASD keys.

Maybe this will help you, and maybe not.  For now, let's pretend spacebar is your "do jump".

SOME experts know how to code keypress inputs... so you can hold W key (forward) and STILL use A, D keys to steer, and STILL use spacebar to jump.  I'm not sure how to do that.

IF you CAN get steering to happen WHILE continuously moving forward or backward, then the same can be done for jumping.  In other words... jumping would ONLY animate up and down... not forward or backward.  If coded better than I, and IF spacebar is pressed WHILE moving forward or backward, then it becomes a forward or backward jump.  (Because forward and backward keys are still held and remain operating WHILE the spacebar-jump happens.)

So, forward jump would be W key held... and tap spacebar.  Backward jump is S key held... and tap spacebar.  Left and right turns could do the same... HOLD W or S, and STILL use A and D keys without interrupting backward/forward movement.  Maybe others will have ideas.  Perhaps someday, someone will write the "Driving A Player/Vehicle" tutorial, eh?

Sorry I could not be more help.  Here is an animation playground I once made:  http://playground.babylonjs.com/#HH1U5#57

It shows some easing functions on the positional and rotational animation.  To make a good "jump"... I think you will need two animations.  First is the animation from ground... to height of jump.  It would use an ease-out.  You want player to leave the ground quickly, and slow... as the player arrives at the jump height. 

Once at the jump height, another animation would start... using ease-in.  Player would slowly leave jump height, and arrive back at ground... at full speed.

ANYWAY... I think... if you use these .translate and .rotate methods, your local space problem will be gone, but you will have a few more challenges ahead.  Good luck, keep us posted.

PS:  Here is a basic mouse-based forward/backward/left/right thing... made specifically for a playground-sized canvas.  It can be adjusted for full screen.  Maybe not useful for you, but I thought I should show it to you.  http://playground.babylonjs.com/#1X4ODI#5   It uses .rotation property and not .rotate method, but you know how to change that, now, if wanted.

[rainerpl]

Hi,

Thanks for the answers.
As i mentioned, i already know how to make the character jump. I also have the character move with wasd, and rotate using mouse.
What doesnt work, is that rotating character does not effect the jump direction, and thats the problem.
Character runs forward...jumps...everything works fine. 
If character turns right...jumps...then he still jumps forward(sideways) according to world coordinates.

Simple playground example is here.
http://playground.babylonjs.com/#EPOE7

The cube keeps moving back and forth between 2 points. Now, press space and the cube will rotate. As you can see, the rotation has no effect on the movement direction. I need to tell my animation api to use BABYLON.Space.LOCAL, the same way i do in: object.translate(BABYLON.Axis.Z, 0.4, BABYLON.Space.LOCAL);

[Wingnut]

On 10/5/2016 at 10:35 AM, rainerpl said:

and rotate using mouse.

When you do this rotation, are you use .rotation property... or .rotate() function?

(Wingy looks at the playground finally).

See, I was hoping... that when using .rotate() ... the animation would magically correct itself.

http://playground.babylonjs.com/#EPOE7#1

(See my line 71.)  It didn't work.     Then I tried to trigger a done() function, by setting the animation's loop parameter to false.  What I was hoping... is that IF the animation was reset and restarted... it would use the rotated box local coordinates for its animation.  That failed also.

Fellow forum helpers, tap key to rotate animated box.  Notice that after box rotation, animation still remains doing same motion.  rainerpl would like the animation to change orientation... after the box has changed orientation.  hmm.  *scratch scratch*  Good challenge.

[GameMonetize]

To use a local space animation I suggest not using the animations library but instead a small timeout function.

Animation library is here to animate value regardless of the meaning of this value. Here you aniamte object.position which is the position of the mesh in the world. So you animate world position

But now let's add a parent for your box:

http://playground.babylonjs.com/#EPOE7#2

As you can see, now position is relative TO the parent and this could fix your issue

[rainerpl]

Thanks for the reply.

I ended up not using Babylon's animation, since it cant use local scope. 
I could use it by creating helper objects like Deltakosh suggested, but i have lots of jumping/moving objects, and that would add significant extra geometry and complexity.

So i decided to use GreenShock's JS TimelineMax library to tween the positio property from n to n + 50, and use the onUpdate callback to do the actual translation.
It seems to work well.

[GameMonetize]

that's why I love Javascript:) there is always a framework for your need.

[dbawel]

I'm glad you found a solution. However for future reference, as DK mentioned - I always use a parent node to provide the coordinate system by which objects are animated. And I often create a seperate parent for each of the 3 axis' as this will often if not always provide as much flexbility in determining how your animation is defined and avoid reference to the world axis when necessary. Another method is to create a seperate parent for each type of transform - translate, rotate, and scale - as this will solve issues such as flipping and gimble lock - especially when utilizing Euler angles beyond -179 and 179 for rotations. Regarless of the framework, I personally recommend to always provide additional center axis' as parents for most any animated object - considering the animation and object type, of course.

Cheers,

DB