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)