# Animation of mesh in strategy game

**URL:** <https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561>\
**Category:** Questions\
**Tags:** animation\
**Created:** [May 4, 2021, 6:33pm UTC](https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561 "2021-05-04T18:33:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\
**Post date:** [May 4, 2021, 6:33pm UTC](https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561/1 "2021-05-04T18:33:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [May 4, 2021, 7:26pm UTC](https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561/2 "2021-05-04T19:26:16Z")

</div>

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()

> <https://github.com/BabylonJS/Babylon.js/blob/master/src/Meshes/abstractMesh.ts#L1196>

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.

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\
**Post date:** [May 5, 2021, 8:07pm UTC](https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561/3 "2021-05-05T20:07:56Z")

</div>

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://doc.babylonjs.com/start/chap3/walkpath)  
[https://playground.babylonjs.com/#KBS9I5#81](https://playground.babylonjs.com/#KBS9I5#81)  
That’s why i thought it’s a legal way to write character moving

---

<div class="post-metadata">

**Author:** ![TooCalm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/toocalm/32/3301_2.png) [@TooCalm](https://forum.babylonjs.com/u/TooCalm)\
**Post date:** [May 6, 2021, 7:39pm UTC](https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561/4 "2021-05-06T19:39:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [May 6, 2021, 8:32pm UTC](https://forum.babylonjs.com/t/animation-of-mesh-in-strategy-game/20561/5 "2021-05-06T20:32:35Z")

</div>

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()