Rendering an isometric tilemap

Question

I have a tile which is 512x256 pixels and I'm trying to render it in an isometric fashion.

I have this helper function:

Pos cartToIso(Pos p) {
    xa := p.x - p.y;
    ya := (p.x + p.y) / 2;
    return new Pos(xa, ya);
}

And to render I do this:

// note this is smaller than the image since
// it's being scaled down
const tileWidth = 256;
const tileHeight = tileWidth / 2;

for (int y = 0; y < 32; y++) {
    for (int x = 0; x < 32; x++) {
        int ya = y * tileWidth;
        int xa = x * tileHeight;
        Pos p = cartToIso(xa, ya);

        drawImage(grassTile, p.x, p.y, tileWidth, tileHeight);
    }
}

This nearly works but there is a big black gap around the tiles. It's fixed when I change the rendering to this:

// note this is smaller than the image since
// it's being scaled down
const tileWidth = 256;
const tileHeight = tileWidth / 2;

for (int y = 0; y < 32; y++) {
    for (int x = 0; x < 32; x++) {
        int ya = y * tileHeight; // <- here!
        int xa = x * tileHeight;
        Pos p = cartToIso(xa, ya);

        drawImage(grassTile, p.x, p.y, tileWidth, tileHeight);
    }
}

But why? This seems to be counter-intuitive compared to what the isometric 2d tutorials I have read have said.

Is there a flaw to my rendering logic?

Answer 1

Isometric Grids have the property of being Equilateral; which is to say that all four sides are the same length. By attempting to paint the texture in a 2x1 fashion, you're saying "don't fill in some of these pixels" giving you black edges (presumably quite thick ones) between the tiles.

---

IMO, You should probably be using an equilateral texture rather than one that is either going to be:

• Compressed in one direction by 2x
• Chopped off at the mid point in one direction
• Leave empty space (as happened in your case)