Animation of mesh in strategy game

Questions
1

Hey guys, im developing multiplayer strategy game and i have few questions:
this is code which i want to talk about

        const obs = this.scene.onBeforeRenderObservable.add(() => {
          //mesh.movePOV(0, 0, -0.015);
          mesh.translate(new BABYLON.Vector3(0, 0, 0.015), 1, BABYLON.Space.LOCAL);
        });
        //obs.unregisterOnNextCall = true;//at some point will be set to true, when unit will arrive to his new position

  1. What is the best way to implement animation of mesh movement in strategy-like game? For example i select unit, select some coordinate(mouse click) - some walk animation activated and some coordinate function added to render loop. But which function is correct? What is the difference?
    mesh.movePOV(0, 0, 0.015);
    mesh.translate(new BABYLON.Vector3(0, 0, 0.015), 1, BABYLON.Space.LOCAL);
    Maybe we have better solution?

  2. Which function i should use for loop? i see that everyone uses onBeforeRenderObservable.add()
    i’m afraid that if user will have lags this function will not be rendered needed amount of times and coordinate of mesh will be invalid. For example unit need to travel 1m of distance. Every frame i will move it by 0.1 So i will need 10 frames. i know that unit will travel by some time X. And after X time code will expect that mesh is needed position and will stop animation. But if user had 30 fps instead of 60 mesh will be moved to 0.5m. So user will have visual problem. Do we have solution for this?

  3. What about problem with not active tab of browser? if user selected another tab, browser will run all loops once a second. So everything will be slowed: movement and animations and all positions of unit etc will be wrong. What about this?

2

I wrote the movePOV method. It along with the local space translate, neither should probably not used in a loop. For animation you really want to determine your final end point, & how long you wish to get there. When combined with where you are starting from, you can interpolate, Vector3.LerpToRef(), during each frame.

If using the POV way, there is a calcMovePOV()

This just determines the end point, but does not actually move anything. I am not sure how to do the calculation the other way without actually doing the move. Vector3.LerpToRef() takes an amount parameter, 0 - 1, so you can base your animation on time, no frames. Something like this.

const startTime = BABYLON.Now;
const durationMillis = 1000; // 1 sec

const startPos = mesh.position.copy();
const endPos = mesh.calcMovePOV(0, 0, -0.015).addInPlace(startPos);

const obs = this.scene.onBeforeRenderObservable.add(() => {
     const amount = Math.min(1, (BABYLON.Now - startTime) / durationMillis );
     BABYLON.Vector3.LerpToRef(startPos, endPos, amount, mesh.position);

     if (amount >= 1) obs.unregisterOnNextCall = true;
}
2 Likes
3

Hey, thanks for your answer.
Method movePOV is used in a babylon tutorial for character moving Getting Started - Chapter 3 - A Walk Around The Village | Babylon.js Documentation
https://playground.babylonjs.com/#KBS9I5#81
That’s why i thought it’s a legal way to write character moving

4

Hey guys, actually i faced with the same problem but now i want to rotate mesh by some angle instead of moving. Do we have similar(Vector3.LerpToRef()) method for it?
Thank you very much

5

As long as you are using rotation (which is a Vector3 too) & not rotateQuaternion you can use almost identical code. Otherwise you would need to substitute Quaternion.SlerpToRef() for LerpToRef()

1 Like