1
\$\begingroup\$

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:

img
(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:

imgs
(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:

gif
(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;
    }
}

img2
(source: gyazo.com)

\$\endgroup\$
  • \$\begingroup\$ 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 \$\endgroup\$ – MathNerd Jul 4 '14 at 16:11
  • \$\begingroup\$ 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. \$\endgroup\$ – MathNerd Jul 4 '14 at 16:34
  • \$\begingroup\$ 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) \$\endgroup\$ – MathNerd Jul 4 '14 at 16:49
  • \$\begingroup\$ @JohnSaita What do you mean by function of time? \$\endgroup\$ – Ben Beri Jul 4 '14 at 20:16
3
\$\begingroup\$

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.

\$\endgroup\$
  • 1
    \$\begingroup\$ Hi, could you expand your answer with somekind of example maybe? You are right and it's good answer, but more information and examples will make your answer more usable and ofcourse, more upvotes maybe. \$\endgroup\$ – Katu Jul 5 '14 at 10:51
  • \$\begingroup\$ Updated my question \$\endgroup\$ – Ben Beri Jul 5 '14 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.