I've followed tutorial after tutorial for converting from cartesian coordinates to isometric coordinates.

The cartesian behavior of my game works fine... that part is easy... For the most part, I can even get the isometric display to work, following along with the math I've found online. But it comes with some serious problems.

I use the following formulas in the getIso() functions:

isoX = (X-Y) - xOrientation
isoY = ((X+Y)/2) - yOrientation

I also apply the following transformation and draw each terrain square with its filter:

double axis = (double) GameWorld.GRID_SIZE;
transform.scale(1, 0.5);
transform.rotate(Math.toRadians(-45), axis, axis/2);
op = new AffineTransformOp(transform, AffineTransformOp.TYPE_BILINEAR);

It comes out looking like this when the terrain is drawn: enter image description here

Each block should be neatly side-by-side. If I change the scale values (while maintaining the 2:1 ratio) then either the terrain image is clipped or they start to overlap one another, but it's never perfectly aligned. Here's the function I use to draw the terrain:

void draw(Graphics2D G)
    int x = world.getIsoX(xCoord, yCoord);
    int y = world.getIsoY(xCoord, yCoord);
    if (isVisible() == true) G.drawImage(op.filter(sprite.buffer, null), x, y, null);       

1 Answer 1


Because you rotated it (and scaled it), the tile sizes are warped. Instead of scaling the isoX and isoY coordinates by GRID_SIZE you need to scale them by GRID_SIZE * Math.sqrt(2) / 2.0 to account for the transformation.

When I tested this it wasn't pixel-perfect (the tiles were separated by about 1-2 pixels), but I think it was mostly rounding issues.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .