Isometric Grid Created in Gimp Not Aligning properly

#1

Hi,

I am trying to create a 64*32 isometric tileset in Gimp to import into Tiled.

I am creating the grid by creating a layer and then rendering a grid with vertical lines. I then duplicate that layer and rotate by 60 degrees then I duplicate the vertical lines and rotate by -60 degrees. Then I merge that together, but the problem is that it doesn’t appear to have the correct proportions as when I import that into tiled, the alignment is not right.

I have uploaded some screen shots. One of these shows how it appears in Tiled, another shows the dialog in Gimp when I create the first grid layer. The other image is the grid against what I imported into tiled and below that is an actual image by someone else which has the correct proportions to show how it doesn’t align with the grid I created.

Belowingimp intiled gimpdialog

Can someone advise on how to create an isometric grid that will work with Tiled? Should I be using different software/ technique to create the image that I import?

#2

While officially isometric projection uses a 30-degree angle, because this way each axis has the same proportions, this does not work nicely with pixel art. As you can see from the brick tile in your image, the lines actually have a 2:1 ratio between x and y axis. The angle of these lines is actually atan(1/2)*(180/pi) ~= 26.565 degrees (see https://en.wikipedia.org/wiki/Isometric_video_game_graphics).

That said, you can use Tiled with your own tiles at 30-degree, if you adjust the tile size of the map (increasing the tile height until your tiles align perfectly). But you may want to consider using the 2:1 ratio in case you’re going for pixel art since it tends to look a lot cleaner.

1 Like
#3

Many thanks, I’ve managed to work out a grid based on this informaton.

#4

Rather than using that angle (which is an approximation and will be off or blurry if you use rotation tools), make sure your lines have a 1:2 slope, two pixels over for every pixel up or down. Some graphics editors even have this type of line as one of the defaults that the line tool will snap to when holding Shift, since it’s very common in pixel art.