# 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?

Tags :