Tweening in render loop

[Numa]

Hi there!

I'm still fighting with my labels  Now they follow around nicely, but I'd like them to not just linearly move but tween continuously. (similar to this: http://codepen.io/grayghostvisuals/pen/kepDb/)

I've tried animating from current position to new position in the update loop but it stacks up a million animations and does nothing. I had a look at blended animation too with no success.

http://www.babylonjs-playground.com/#EVYAT#11

var tweenLabel = new BABYLON.Animation("tweenLabel", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

// Animation keys
var keys = [];
keys.push({
    frame: 0,
    value: label.position
});

keys.push({
    frame: 100,
    value: newPosition
});

tweenLabel.setKeys(keys);
label.animations.push(tweenBackground);
scene.beginAnimation(label, 0, 100, false);

What's the trick?

 

Thanks

[GameMonetize]

Guess what? We need a repro in the playground to help you

[Numa]

Making one as we speak  I need to clean up the code to make it simple hehe

[Numa]

edit: http://www.babylonjs-playground.com/#EVYAT#12

there  switch line 74/77 for linear or with animation.

Looks like it's starting a new tween every frame and it never gets to move at all.

[GameMonetize]

It does not work to me: camera.CameraUpVector does not exist

[Numa]

damn, sorry sorry. here: http://www.babylonjs-playground.com/#EVYAT#12

[adam]

I got something moving for you:

http://www.babylonjs-playground.com/#EVYAT#13

It is not in the render loop though.  If you want it in the render loop, you have to make sure you aren't constantly reset the animation.

[Numa]

Hey Adam, thanks hehe but I know it works outside the loop   My problem is specifically about constantly tweening a position (to follow the camera for instance, or the mouse pointer etc etc). Maybe I shouldn't use the animate function and just += the position manually in the render loop?

[adam]

22 minutes ago, Numa said:

My problem is specifically about constantly tweening a position (to follow the camera for instance, or the mouse pointer etc etc).

Yeah, I wouldn't use animations for that.

[JCPalmer]

Numa,  You want to just set the position of something in a beforeRender.  Forget starting an animation, the before render IS the animation.

I did something similar, not sprites or in a before render, but label meshes & in a registerAfterworldMatrixUpdate.  It kept a label above a mesh.  The part that would be similar to your before render is:

cloth.registerAfterWorldMatrixUpdate(
  function(){
	label.position.x = cloth.position.x;
	label.position.y = cloth.position.y + 5;
	label.position.z = cloth.position.z;
}
);

Here is an old scene I did.

[adam]

I don't know what you are trying to accomplish, but this example might help:

http://www.babylonjs-playground.com/#3HQSB#1

[Numa]

I ended up doing it manually as you guys suggested. I used an old "chase" behavior I had lying around somewhere, works perfectly

scene.registerBeforeRender(function () {
    var targetDirection = newPosition.subtract(label.position);

    var speed = 0.005;
    var moveDistance = speed * deltaTime;

    // Move towards target until we're really close
    if (targetDirection.length() > moveDistance / 10)
    {
        // Here I don't use the normalized targetDirection vector so that the object
        // slows down before reaching the target. Similar to an ease-out tween.
        label.position.addInPlace(targetDirection.scale(moveDistance));
    }
    // If we're too close just jump to target position to avoid overshooting
    else
    {
        label.position = newPosition;
    }
});

Thanks again!