# Processing move between tiles with an animation in isometric map

In my isometric map, entities can only be in the center of the floor tile. So it's tile per position.

This is my map with an entity:

Entity can either move forward, left, or right.

Where forward is X + 1, left is X - 1, Y - 1, right is X + 1, Y + 1.

I simply can move these entities by doing tile.updateX(1) for forward, etc.

But I want to make an animation for this move, so it can look like this:

Can you see how that small shit moving smoothly through the tiles?

I've tried doing it like this:

public void updateShip() {
this.move = true;
this.moveX = 2;
this.moveY = 1;
}


moveX and moveY are the offsets im going to add in the move.

and in the update method:

@Override
public void update() {
if (move) {
// Update animation every 17ms
if (System.currentTimeMillis() - this.moveTime >= 17) {

tiles.relativeX += moveX;
tiles.relativeY += moveY;

moved++;

// timer to move Y coordinate
if (System.currentTimeMillis() - turnY > 50){
moveY++;
turnY = System.currentTimeMillis();
}

// timer to move X coordinate
if (System.currentTimeMillis() - turnX > 125){
moveX++;
turnX = System.currentTimeMillis();
}

// If moved more than 29 px, cancel animation and locate
// to the right spot.
if (moved >= 29) {

// stops move
move = false;

// sets location
tiles.updateX(1);
tiles.updateY(1);

// clears relatives offets
tiles.relativeX = 0;
tiles.relativeY = 0;
}

this.moveTime = System.currentTimeMillis();
}
}


In the tile's grapics class, I draw the tiles like this:

public void render(Graphics g) {

int width = this.getWidth() - offX;
int height = this.getHeight() + offY;

int x = (this.x * GRID_WIDTH / 2) - (this.y * GRID_WIDTH / 2) - width / 2;
int y = (this.x * GRID_HEIGHT / 2) + (this.y * GRID_HEIGHT / 2) - height;

x += relativeX;
y += relativeY;

g.drawImage(this.sprite.getImage(), x, y);
}


Ignore how messy my design is for now, I am just trying to figure out how moving to sides can be animated with a isometric grid.

however, with my method I could animate forward moving, I just keep the moveX to 2, and moveY to 1, and it will always move forward.

But with my code, this is what it does:

What am I calculating wrong?

Ignore that fact that I need the sprites of the ship's sides. First I need to test without.

Update I think I did it:

private float moveX = 0.045f;
private float moveY = 0.000f;

@Override
public void update() {
if (move) {
Tile tile = tiles;

if (moveX > 0.001)
tile.updateX(moveX);

if (moveY < 0.045)
tile.updateY(moveY);

moveX -= 0.001f;
moveY += 0.001f;
}
}

• Maybe you can use a Vector Valued Function to achieve this. See here en.wikipedia.org/wiki/Vector-valued_function, or by using a Vector Field. See here en.wikipedia.org/wiki/Vector_field Jul 4, 2014 at 16:11
• Pay attention that if you need a rotated graph you may need to use Change of Basis Matrices that translate vectors from your rotated graph coordinate space to vectors in the standard Cartesian Coordiante space. Look here en.wikipedia.org/wiki/Change_of_basis. If you took Calculus III and Liner Algebra I courses at University then doing so should be no problem. Jul 4, 2014 at 16:34
• Also depending on the solution you choose, Pay attention to the way you update your ship's position, Absolute or Relative (by using the Derivative, Have a look here en.wikipedia.org/wiki/Derivative ), I.e. ship.y = f(x) (Absolute) or ship.y += f'(x) (Relative) (Not Java Code), <br/>Note: You can achieve better movement for your ship by using Position as a function of Time and its Derivative as a function of Time (And not functions of X) Jul 4, 2014 at 16:49
• @JohnSaita What do you mean by function of time? Jul 4, 2014 at 20:16