Processing move between tiles with an animation in isometric map

Question

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:

_{(source: gyazo.com)}

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:

_{(source: gyazo.com)}

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) {
            
            // adding relative offsets
            tiles[5][5].relativeX += moveX;
            tiles[5][5].relativeY += moveY;
            
            // adding moved token
            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[5][5].updateX(1);
                tiles[5][5].updateY(1);
                
                // clears relatives offets
                tiles[5][5].relativeX = 0;
                tiles[5][5].relativeY = 0;
            }
            
            // upadates time
            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:

_{(source: gyazo.com)}

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[5][5];
        
        if (moveX > 0.001)
            tile.updateX(moveX);
        
        if (moveY < 0.045)
        tile.updateY(moveY);
        
        moveX -= 0.001f;
        moveY += 0.001f;
    }
}

_{(source: gyazo.com)}

Answer 1

Use floating point variables for entities' velocity and position. Use integers only when translating from world position to screen position. This way, your ship will move smoothly thorugh tiles. Also, add a Camera object to convert your world coordinates to screen coordinates as soon as possible.