Introduction
There are several different styles to consider when creating an isometric grid! There is also a free Isometric Grid Pack of different sized grids that you can download and use to make templates for drawing isometric graphics or designing maps readily available.
The first thing to explain is a small but important distinction that needs to be made before getting too far. It seems that the word “Isometric” has become a blanket term to describe any game with a static, top-down camera that has been skewed to display the game at an angle. Technically, most 2D games are using specific variants of “Axonometric” or “Orthographic” projections, such as Dimetric, Trimetric, Isometric, or Oblique. In a true Isometric projection, each visible angle is exactly the same, whereas in a Dimetric projection, only two of the three angles are the same. The only real difference between most of these types of projection is the angle being used.
Axonomic Projections by CMG Lee (CC BY-SA 4.0)
For the sake of this tutorial, I’ll just be referring to everything as Isometric, even though the actual type of projection used in this tutorial and throughout most of the Screaming Brain Studios graphic packs is Dimetric. This particular style (Dimetric) is also the projection type used by most familiar isometric games, but I will be referring to it as Isometric instead. The angle is close enough to being Isometric that it is not entirely important. This particular projection is better suited to the way computer monitors display everything using pixels and allows for smoother geometric shapes.
Drawing Lines
To create our grid, we will be using the standard 2:1 pixel ratio typically used for isometric artwork. This means that for every 2 pixels you move from left to right, you move up or down by 1 pixel. Or in the case of certain angles, up or down by 2 pixels and left or right by 1 pixel. This produces a nice, smooth line that looks like this:
2:1 Isometric Lines
The actual angle between the bottom left of the tile and the base of the image is around 26.565° (Dimetric), rather than a perfect 30° angle (Isometric). You don’t necessarily have to even think about this number, but it is useful to know. You want to try to avoid any lines that do not follow this 2:1 rule, or they can come out looking messy, as shown below.
An Incorrect Line
Your typical grid line will simply be made of small, 2px segments. There is not necessarily a definitive or best method for drawing the corners of tiles that I am aware of, since some methods seem to work better than others in different game engines or graphics programs, and whether you create your tiles using hand drawn pixel art or utilizing real textures and image transform operations will influence the way tile edges overlap with one another, so you may have to experiment and decide which version works best for you. If you prefer, you can just download some of the free example grids from Screaming Brain Studios and try some experiments of your own! Either way, it is really helpful to pick a corner style and stick with it to avoid any problems further down the road.
Corner Style A
Let’s take a look the first of several different ways to make the corners of your grid tiles. The first type of corner style (we will call this Style A) is to use a 4px wide line on the top and bottom corners of the tile, while the two side corners each have a height and width of 2px.
Corner Style A
This corner style allows for the edges of each tile to overlap one another. In some cases, this may not actually be desirable, but the choice is up to you, depending on your needs. The resulting intersection between grid squares of this type allows tiles to overlap along both the edges and the corners.
4x2px Intersecting Corners
If you zoom into the corners to take a closer look at the pixels themselves, you can see that the tiles line up and overlap one another along the sides and intersect at a point creating a 4×2px block. We can also see that the individual corners are 2px high and 2px wide
As you can see in the examples above, there are no gaps between the tiles when they are placed next to one another, so they form a grid of 1px wide lines. Again, keep in mind that if the grid squares, when placed together create a 1px wide line, then the edges of isometric tiles placed on this grid will overlap with one another slightly.
Corner Style B
The second corner style (which we will call Style B) is rather similar to the first in that the edges overlap one another, however your top and bottom corners are only 2px wide, and the left and right corners are made of just one single pixel. The one small detail to keep in mind about this corner style is that there is technically no bottom corner when placed on its own. Or technically, the bottom corner is made by the top corner of the grid square below it. You can see an example of this a little further down in the tutorial in the Making Grids section. This style also allows for the edges of each tile to overlap, but in a slightly different way than Style A.
2x1px Intersecting Corners
There is not particularly much advantage to this style over Style A, but both are useful if you do not mind having the edges of your tiles overlap. This can be useful for pixel art, hand drawn, or digital painted styles.
You can see in all the examples above that a 1px wide line is formed when these types of grid squares are lined up with one another. Both Style A and Style B are useful for pixel art graphics, where often a specific color palette is used, and it is easier to ignore the overlapping of the edges.
There is a slight difference between these first two styles, and that is how they line up with Wall Tiles. When used in conjunction with any Wall Tiles from the Screaming Brain Studios‘ isometric series, the top edges of Style A tiles are obscured by the bottom edges of the Wall Tiles, whereas the top edges of Style B tiles line up with the bottom edges of the Wall Tiles and are not obscured. An example of this can also be seen in the Making Grids section of the tutorial. Both of these styles can also be useful when you wish to overlay a grid on top of existing isometric tiles, since the size of the grid is only 1px wide and tends to look nice and clean.
Corner Style C
There is yet another type of corner style to look at, and one used in the other Screaming Brain Studios tutorials (we will call this one Style C), where the top and bottom corners are 4px wide and the left and right corners are 2px wide. This creates a 1px wide gap at the bottom of the tile that allows the 2px wide side corners to slot perfectly.
4x1px Intersecting Corners
This particular style does not allow the tile edges or corners to overlap and is best used if you are going to be working with detailed textures, or tile-set designs where you need the edges to line up with one another perfectly. Several Screaming Brain Studios assets use this third style since it allows a texture to tile seamlessly without any unwanted texture overlapping along the edges.
In the example above, I’ve used a darker gray to indicate where the tiles slot together, rather than overlap with one another. This is apparent when looking at how the lines between the grid squares are 2px wide instead of 1px wide. There is also a 1px gap between the bottom of the tile and the bottom row of pixels. While I am uncertain if this is a popular style to use, I developed this technique personally based off textures that had been rotated using a cartesian transformation operation and using a hand drawn mask to extract the exact edges of the newly rotated tile. In my opinion, this is the best style to work with when using real textures in conjunction with skewing or transform operations, especially the type covered in the Isometric Textures Tutorial.
Making Grids
Once you have selected a corner style to work with, we want to draw out a template tile to use as our base. This is also a good time to make sure you have also chosen a tile size to work with. Remember, the standard to follow for isometric tiles is to make sure your tile’s width is twice its height. This means you will usually see tiles that are 256×128, 128×64, 64×32, or 32×16.
Typically, you want to start at the very top of the tile from the center point and work your way down to the left and right edges. For example, if you are making a 128×64 tile, you want to start drawing your top corner at the halfway point (or 64 on the grid)
If you are working with corner Style B, you will actually omit the bottom corner once you reach the very bottom of the tile, as in the example image below:
64×32 Grid Template
Next, you want to duplicate your template and position the copies beside each other to arrange them into a grid. You can then make copies of this result and use it to create an even larger grid.
Isometric Grid using Style B
A quick way to do this, and one that doesn’t require any copy/pasting, is to fire up your trusty copy of GIMP and load up your template image.
128×64 Template
Now we are going to use a built-in feature that will allow us to quickly make grids of any size using nothing but this template tile. Click on Filter -> Map -> Tile to bring up the filter dialog box. This allows you to specify a size and have your original image tiled, or repeated, across the entire surface of a new image.
Tile Filter Dialog Box
You can also choose whether to create a new image or apply the filter to the current one, but for convenience, I’m just going to leave that option selected. Let’s say we want a 512×512 grid (make sure that you use multiples of your original template image), so type 512×512 into the dimensions and press OK.
Completed 512×512 Isometric Grid
The decision to use 2px or 4px for the Top and Bottom corners of the tile may mostly depend on whether you will be working with hand drawn pixel art or modified photographic textures. Below are some examples of a 32x16px grid and a 64x32px grid, as well as some examples of Isometric Walls overlaid on top of them.
Isometric Grid and Tiles with Style A
Isometric Grid and Tiles with Style B
As you can see, there is a slight difference in how the edges of the grid line up with the Wall Tiles. The grid using corner Style A will display the bottom edges of the Floor Tiles behind it, whereas the corner Style B allows the Wall Tile to obscure the edge of the Floor Tiles behind it. A small difference, but one worth pointing out. As always, if you don’t have the tools or the patience to make your own grids, there is a free pack of Isometric Grids available here!