Floor Textures

This particular tutorial has been in the making for quite a while, as a lot of my time has been spent scouring the internet for information, software, resources, or practicing and experimenting with techniques using different software to achieve this particular trick.

While the most popular, and often the preferred method of creating isometric graphics is to use a 3D rendering program (Like Blender), the focus of Screaming Brain Studios is typically on the 2D realm. Using a tool like Blender requires very precise camera angles, lighting, and render settings in order to get a pixel perfect render. Rather than covering the complexities of 3D software, I am instead going to cover how to create isometric textures and tiles using 2D methods. Let’s begin by selecting a texture. Make sure your texture is a square, decide whether you want to use a seamless texture, and choose a size that is the same width as the final tile you would like. For example, for a 128×64 tile, you should use a 128×128 texture; for a 256×128 tile, you should use a 256×256 texture. For the sake of this tutorial and to show more detail, I’ll be using a 512×512 texture.

512×512 Brick Texture

There are two main tools used for this particular tutorial, and both of them are completely FREE! First you need a copy of GIMP, our favorite free image editing software. If you don’t already have it, I highly recommend you download and install it if you don’t have a copy of Photoshop. However, the next tool actually requires GIMP to work. The second tool we are going to use is a free plugin suite called G’MIC. This is an important part of the puzzle, as it is one of the few tools I was able to find that can properly rotate textures the way we need. Once you have installed G’MIC, you should be able to access it in GIMP by going to Filters -> G’Mic QT

This will bring up a browser window full of hundreds of different image effects. Some of these are going to be useful for us in later tutorials, but for now the filter you want to look for is called Cartesian Transform. When you first click on the Cartesian Transform filter, you will see that you can enter mathematical expressions in two entry boxes. By default, the filter is set to produce a wavy distortion effect on your image. We are going to replace the default input with a little bit of our own math here in order to skew the texture to a proper 2:1 isometric angle instead of warp it.

G’Mic Cartesian Transform (Default Warp)

This filter allows you to enter various math expressions in order to apply deformations or distortions to an image. The way it works is it applies the formula to each pixel in the image over and over before outputting a new pixel value, which will redraw the image in various ways. This is slightly different to your traditional Transform or Skew operations, where instead of adjusting the entire image within the canvas, the cartesian transformation is applied to each individual pixel, so the result is both tiled across the entire canvas and mathematically precise.

Make sure that Relative Warping is turned off and the Boundary is set to Periodic, or we will not see the desired effect. First, let’s start with a simple formula for rotating a texture 45 degrees. This is incredibly useful for rotating textures ‘internally,’ as I will refer to them from now on. In the example below, you can see the difference between a texture that has been rotated traditionally to 45 degrees and a texture that has been rotated internally by 45 degrees.

Regular Rotation (Left) / Internal Rotation (Right)

The formula we will be using here is rather simple, and I just so happened to track it down through sheer luck. Thankfully, it also forms the basis for the rest of the expressions used in this tutorial.

First, change the expression in the X-Warping input field to 1+(x-1)+(y-1) and y into the Y-Warping expression box. You should see the texture shear to the right like below.

X-Warping: 1+(x-1)+(y-1) / Y-Warping: y

Now if we take that same expression and copy it to the Y-Warping expression box, it should get super streaky and ugly. However, we need this expression to be reversed, so change the x to a y and the y to an x, and finish it off by changing the (–) to a (+) to finish the expression. Your expression should now read 1+(y-1)+(x-1) and as you can see, the texture has now completely rotated 45 degrees to the right.

Internally Rotated to the Right

But what if we wanted to rotate to the left? Easy! All we have to do is swap the (+) and the (–) at the center of each equation and the texture will rotate in the other direction. Change 1+(x-1)-(y-1) to 1+(x-1)+(y-1), and change 1+(y-1)+(x-1)  to 1+(y-1)-(x-1) to internally rotate the image in the other direction.

Internally Rotated Left / Internally Rotated Right

For quick reference, here are the complete expressions for both internal left and internal right rotations, in case any of the information above was confusing.

45-Degree Rotate Left
X-Warping: 1+(x-1)-(y-1)
Y-Warping: 1+(y-1)+(x-1)

45-Degree Rotate Right
X-Warping: 1+(x-1)+(y-1)
Y-Warping: 1+(y-1)-(x-1)

Now that the basics are out of the way, we can get to the part where we make everything isometric! We will essentially be using the exact same expressions from above, with a few small changes. The rotation we were doing above was a 1:1 rotation, where the perspective does not get distorted or changed at all. Instead of doing a 1:1 rotation, we need to do a 2:1 rotation. In order to do this, we simply need to multiply the Y values in each expression by 2. The expression above redraws the image by shifting each pixel up and over by 1, whereas our new expression will shift each pixel up by 1 and over by 2. Change your expressions so they match the ones from below, depending on which direction you would like your texture to rotate: 

ISO Rotate Left (2:1)
X-Warping: 1+(x-1)-(y-1)*2
Y-Warping: 1+(y-1)*2+(x-1)

ISO Rotate Right (2:1)
X-Warping: 1+(x-1)+(y-1)*2
Y-Warping: 1+(y-1)*2-(x-1)

As you can see in the example image below, the resulting internal rotation provides a texture that still covers the entire canvas in all directions, as opposed to having empty canvas space around the edges of a diamond when using a traditional rotate or skew operation.

Internally Rotated Left

It is also entirely possible to use higher numbers than 2, should you wish to increase the ratio of internal rotation. For example, using the number 3 will produce a 3:1 internal rotation instead of a 2:1. Increase this value by too much and the texture will begin to distort, but feel free to experiment! The final step is to crop your isometric tile from the resulting internally rotated texture using a cropping mask or selection tools.

There is an additional trick for floor tiles, if you happen to be using a texture that has a pattern or image you would prefer to retain its orientation after it has been converted into an isometric tile. For example, let’s say you are trying to convert a texture containing some vertical trees into an isometric tile. If you were to simply use the ISO Rotate Left formula from above, the trees would actually appear to be lying flat.

Incorrect Isometric Rotation

Instead, we want the trees to remain vertical once the texture has been converted to isometric. The trick is to use the formula from above to apply a 45-Degree Rotate Right operation on the texture first, before you apply the ISO Rotate Left formula.

The rule to follow here is depending on which 45-Degree rotate you use, you will then apply the opposite ISO Rotate formula. For example, if you use 45-Degree Rotate Right, you will then use the formula for ISO Rotate Left to rotate the texture back to the left. If you use 45-Degree Rotate Left, you will then follow up by using the formula to apply the ISO-Rotate Right transform to rotate back to the right.

45-Degree Rotate Right, then converted to Isometric with ISO Rotate Left

This particular trick does distort the original texture, since the conversion to the 2:1 pixel ratio squishes it along the y-axis slightly. Unfortunately, this is the only method I have managed to figure out so far for maintaining the texture’s orientation, and thankfully it doesn’t look too horrible. The edges even remain seamless as long as the original texture was seamless to begin with.

Tiled Texture Remains Seamless

Despite the slight distortion, this is still preferable to having the trees lying flat on the ground. This trick also works well with textures that have patterns, like bricks or windows, though you might only use this technique in very particular cases.