Isometric tile map - Having tiles with bigger sizes?

Question

Hello I have the following two Isometric tiles:

Normal tile (water):

Rock tile:

I need to add some tiles like the rock tile into my game board, but the problem is, that some tiles like this rock needs a bigger height level.

Currently, the rock tile has bigger height by 18px. I tried separating the rock into 3 tiles, but it just looks ugly as you can see the lines of the floor tiles on the on the rock.

Currently, the board looks like this:

_{(source: gyazo.com)}

As you can see, because of the height difference the tiles will have a different location.

My graphics code layer is designed by layers, where there is a layer named Board, and the Board layer contains a layer named Nature, which is responsible for rocks, flowers and so on.

My board drawing:

@Override
public void render(Graphics g) {
    g.translate(this.translate.getX(), this.translate.getY());

    for (int i = 0; i < tiles[0].length; i++) {
        for (int j = 0; j < tiles[1].length; j++) {
            int x = (j * sprite.getWidth() / 2) - (i * sprite.getWidth() / 2);
            int y = (j * sprite.getHeight() / 2) + (i * sprite.getHeight() / 2);
            this.tiles[i][j].render(g, x, y);
        }
    }
    
    // rendering rocks and so on..
    this.nature.render(g);
}

And that's how I render nature layer:

@Override
public void render(Graphics g) {
    for (int i = 0; i < this.tiles[0].length; i++){
        for (int j = 0; j < this.tiles[1].length; j++){
            if (this.tiles[i][j] == null)
                continue;
            int width = this.tiles[i][j].getWidth();
            int height = this.tiles[i][j].getHeight();
            int x = (j * width / 2) - (i * width / 2);
            int y = (j * height / 2) + (i * height / 2);
            
            g.drawImage(this.tiles[i][j], x, y);
        }           
    }
}

I have tried subtracting the height by 18 but still not luck, it's still messy. Are there any proper ways do draw tiles that are bigger than it's actual size?

Answer 1

Make an abstraction of your tiles. You currently seem to assume a tile is simply represented as an Image and that everything is of uniform size.

As you see that doesn't always hold up. If you make an explicit Tile class you can encapsulate all its details in there and move the responsibility for handling of the odd stuff in there.

A simple Tile class could look like this:

public class Tile {
    int offsetX;
    int offsetY;
    Image image;

    // Renders the tile at logical coordinates x, y        
    public void draw(Graphics g, int x, int y) {
        g.drawImage(image, x + offsetX, y + offsetY, null);
    }
}

In short, the tile manages its oddities itself.

You could go farther and attach game related data to the tile (e.g. player passable, damaging etc.). You keep a uniform interface for working with tiles (the Tile class API), but each tile can alter rendering as needed (using offsetX/Y to adjust for its image size).

Edit: Change the formula for calulating x/y in render to work with the size of the basic floor tile (112, 56 i guess), independtly of how large the actual tile sprite is. You don't want the sprite size to mess up positioning in the grid (the grid size is dictated by the basic floor tile size). The tile only compensates for the difference between its sprite and the basic size (with the offsets).