# Why does my isometric rendering technique leave large gaps between tiles?

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: 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

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.