0
\$\begingroup\$

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?

\$\endgroup\$
0
\$\begingroup\$

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)
\$\endgroup\$

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.