Rendering an isometric tilemap

by flooblebit   Last Updated June 24, 2018 18:13 PM

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?



Related Questions



Tile rendering problem in LibGDX

Updated December 09, 2017 11:13 AM

How do I reverse this function?

Updated March 26, 2015 14:04 PM


3D isometric depth sorting

Updated May 31, 2015 02:05 AM