Issue with moving a mesh in Babylon.js

Question

I'm attempting to make a Red Alert style game, just to sharpen my JS skills , and get a basic understanding of game development. I'm attempting to move a block mesh from one part of the ground to another. However, it moves the block instantly, instead of animating it.

Here's my babylonjs-playground... http://www.babylonjs-playground.com/#OYE6Q

I think the issue's with this block of code...

  var moveUnit = function (position, item) { 
    if (position.x > 0) {
        while (item.position.x < position.x) {
            item.position.x += 0.001;
        }
    } else {
        while (item.position.x > position.x) {
            item.position.x -= 0.001;
        } 
    }

    if (position.z > 0) {
        while (item.position.z < position.z) {
            item.position.z += 0.001;
        }
    } else {
        while (item.position.z > position.z) {
            item.position.z -= 0.001;
        } 
    }
}

Answer 1

    while (item.position.x < position.x) {
        item.position.x += 0.001;
    }

By using the while loop, your are updating position to the final position in increments within the same frame of the game. It is equivalent to saying:

item.position.x = position.x;

Because of this, you see it jump from its initial position to its final position from one frame to the next; regardless of how you update the position.

If you want to simulate movement over time, you need to move the object in increments toward it's goal over multiple frames. If the increments are chosen correctly, and the frames are fast enough, it will look like smooth movement.

To accomplish this, objects need to have some idea of where they are moving across frames, and you need to introduce the concept of time into your game.

Take a look at this tutorial for an example of the concept.