I'm trying to create a hexmap based game, like Panzer General, well actually I'm trying to animate unit movement.

And this is where I have problem. I am using A* algorithm to determine the path, so that is not problem.

My problem is that image I'm animating is always a couple of pixels on X-axis late.

This is how I calculate the movement:

int SPEED = 1; int SOUTH_EAST = 300; double newX = Math.cos(Math.toRadians(SOUTH_EAST)); double newY = Math.sin(Math.toRadians(SOUTH_EAST)); this.speedX = SPEED * newX; this.speedY = -SPEED * newY; .... // later in code inside each frame this.x += this.speedX; this.y += this.speedY // drawing of image inside each frame g.drawImage(this.tileImage, (int) this.x, (int) this.y, (int) this.x + TILE_SIZE, (int) this.y + TILE_SIZE, frameX, frameY, frameX + TILE_SIZE, frameY + TILE_SIZE, observer);

The problem is that those 300 degrees is from 0,0 to 39,39 (My tile size is 40) which is diagonal of the square inside which the hexagon is, and I need a little sharper angle since I'm not working with squares but hexagons. Ok, I know I need to provide correction for x and y, but that is not the point, point is that my movement by X-axis is late and if I put the angle of 305 that is too much.

Well my question is, how am I suppose to animate the unit movement from one hextile to another?

Is my approach good and I just need to do a better math calculation (I'm terrible in math, BTW) or is there some other approach?