Introduction
This tutorial covers a few small tricks for making shadows for your isometric tiles and objects! While you could certainly draw your shadows by hand, or even use the built-in shadows provided by a game engine, in some cases, this may not always be desirable. At the very least, you can save on memory by using pre-baked shadows and 2D tiles rather than utilizing real-time shadows. Some game engines are not equipped to produce shadows in the first place, so it’s always handy to know a few methods for simulating shadows!
Isometric Shadows
In the image above, you can see an example of the Blend and Transform method we will go over in this tutorial. Depending on your needs, each method provides a slightly different type of shadow using similar steps.
Method 1: Blend and Transform
This particular method utilizes a technique covered in the Isometric Textures tutorial. If you have gone through that tutorial, then some of the steps outlined here will be somewhat familiar already. Let’s begin by selecting a ground tile to work with, as well as an object tile for which we want to create a shadow. This process will be much easier if you are using tiles that are the same dimensions. For the sake of this tutorial, I will be using tiles that are 128×128 to keep things simple. I will also use an object tile with a solid color background so we can cover a few small tricks on how to change or remove that background as well.
Floor Tile / Tree Tile
The main reason to keep consistent sizing between the tiles has to do with the way we are going to superimpose one tile onto the other and using odd sizes might require you to manually reposition things to get them to line up. If both tiles are the same size, it will be much easier to line things up without having to do any guess work.
The very first thing that we need to do is to open our tiles in GIMP. Something to keep in mind is when we convert our tile to grayscale further in the tutorial, if the background is not white, it is possible to run into some selection issues down the road. If the background color of your object tile is anything but the color white, the absolute simplest way to remedy this is to use the Fuzzy Select tool to select the background color of the tile. If you aren’t sure where this is, left click and hold your cursor on the Magic Wand tool to bring up a drop-down menu where you can select the Fuzzy Select tool. Make sure to change the Active Background Color to white, and then with the selection still active, simply press the Delete key to leave a white background behind the object.
Background Replaced with White
Now in order to make sure our shadow is oriented correctly, we need to first flip our object tile (In this case, the Tree) along the vertical axis so it becomes an inverted mirroring of the original tile. In the menu bar, select Image -> Transform -> Flip Vertically to flip the tile.
Inverted Tree Tile
If you were to line this tile up with the bottom of the original tile, you will notice how it sort of resembles a reflection in a mirror or a pond. This is not exactly what we want, since shadows don’t have any color. Our next step is to remove the color entirely by going to Image -> Mode -> Grayscale. The resulting image will now have a white background with a grayscale version of your object tile, composed of varying shades of gray.
Grayscale Tree Tile
The varying amounts of gray in our grayscale tile will let us take advantage of the blend modes in GIMP so we can simulate transparency without having to fiddle with any actual transparency values. If you haven’t done it already, load your chosen floor tile as a new image. Switch back to the grayscale object tile, choose the Selection Tool, and press Ctrl+A to select the entire image. With the entire tile selected, press Ctrl+C to copy it to the clipboard. Switch back to the floor tile and press Ctrl+V to paste the tree into a new layer above the floor tile.
Tree Tile Layer over Floor Tile Layer
With the Tree layer selected, click on the Mode drop down menu and change the layer blending mode to Grain Merge. This is a very specific type of blend that I tend to use a lot for lighting and blending effects. It is very similar to multiply in that it combines the pixel values from the layers being combined, but then it subtracts a value of 128 to give you a more balanced blend between the two layers.
Layers Blended using Grain Merge
At first glance, this doesn’t look exactly like you would expect a shadow to look. First, let’s make the actual shadow a little bit darker by going to the menu bar and choosing Colors -> Brightness-Contrast. Change the Contrast value to something between 30 and 40 to make the shape of the tree stand out just a little bit more.
Contrast Set to 35
With the grayscale object layer active (The tree in this case), choose the Fuzzy Select tool once again and click anywhere in the white background of the tile to select all the white pixels in the layer. You can now press the Delete key to get rid of the background of the Tree layer entirely. You can also do this in the very first step if you like, but you must add an alpha channel to the layer in order to make the background transparent. With the background of the Tree layer now deleted, you can see now how the shadow blends in with the floor tile.
Blended Shadow and Floor Tile
A little tip here, in case you wish to save the shadow separately for layering later, is to leave the selection active after you have deleted the background color from the Tree Layer. Feel free to skip this step if you do not need your shadows to be on their own layer. Right click on the Floor Tile layer and select Add Alpha Channel. This will allow you to have a transparent background. With the selection still active, click on the Floor Tile layer to make it active and press the Delete key to remove every pixel that is not part of the shadow. It should look something like the image below once you are done.
Shadow Cropped from Floor Tile
Now simply flatten or merge the two layers, convert the image to an isometric tile following the steps below, and export your shadow for use later. If you do not need to keep your shadows separate, disregard the previous steps and instead, just merge the Tree layer with the Floor layer by right clicking on either one of the layers and choosing Flatten Image.
To make everything isometric, we are once again going to bust out our favorite filter suite, G’MIC, and use our go-to isometric transformation filter, Cartesian Transform. To do this, go to Filter -> G’MIC Qt to bring up the list of filters. Navigate to, or use the search bar to locate, the Cartesian Transform filter.
Cartesian Transform Filter
I have adjusted my isometric formulae slightly for this tutorial, since I am using a texture with very defined lines. The particulars of this are not very important, but feel free to use this formula or the ones from the Isometric Textures Tutorial for this step.
ISO Rotate Left (2:1)
X-Warping: 0.5+(x-0.5)-(y-0.5)*2
Y-Warping: 0.5+(y-0.5)*2+(x-0.5)
ISO Rotate Right (2:1)
X-Warping: 0.5+(x-0.5)+(y-0.5)*2
Y-Warping: 0.5+(y-0.5)*2-(x-0.5)
Should you require the shadow to face the other direction and rotate your tile to the right instead, use the formulas for ISO Rotate Right. This will give you the proper isometric rotation for your new shadow tile, ready to be cropped. I’m not going to cover cropping in this tutorial, but feel free to jump over to the Isometric Cropping Tutorial to see how this is done.
Final Tile with ‘Baked’ Shadow
That’s all there is to this particular technique, and you can export your completed tile. This method allows you to simulate transparency, so that the floor texture is still visible ‘through’ the shadow. You can control the level of ‘transparency’ or the lightness and darkness of the shadow by fiddling with the contrast values of the Tree layer (or whichever object tile you are using) before flattening the entire image.
Tree Casting a Fake Shadow
Now you can place the original Tree tile over the Floor tile to complete the effect. You can also see where light appears to be shining between the branches on the floor tile. Feel free to experiment with different blend modes for different effects if you prefer, or varying brightness and contrast levels of your shadow layer.
Method 2: Desaturate and Blur
This next technique is similar to the first, in that we will be superimposing one texture onto another before we use a Cartesian Transform operation to convert everything into an isometric projection. However, the approach is just a little bit different and allows you to make softer looking shadows. This may be useful when trying to simulate directional lighting or producing the illusion of shadows being cast from a distance.
Ropes and Softened Shadow
For this section of the tutorial, I will be using some slightly larger tiles to show a little bit more detail, but you can use any size tiles you wish. I’ve selected a pink marble floor tile and a rope net to demonstrate this process. The tiles are both 192×192 for the sake of this tutorial, as it is a little bit simpler to line things up if both tiles are the same size.
Floor Tile / Rope Tile
Just like the Blend and Transform method, we need to convert our image to grayscale and adjust the background color a little bit. The color of the background is a little less important here, but for the sake of this tutorial, I will be working with a colored background so I can show you how to change or remove it. For this method, we will actually begin by converting the background color to a specific shade of gray. Click on the Active Background Color swatch to bring up the Change Background Color window. The first thing we need to do is change the values so they are using 0-255 instead of 0-100 by clicking the small box at the top of the window.
R128, G128, B128
Set each of the R, G, and B slider values to 128 to produce a light gray color. When using this color with the Grain Merge blend mode, the brightness of textures behind this color will remain untouched. Any shades lighter than this color will be brightened, while any shades darker than this color will be darkened. Press OK to confirm your color choice. Once again, we are going to use the Fuzzy Select tool to select the background color of our tile.
Fuzzy Select Active
Now we can press the Delete key to clear the teal pixels, leaving our gray background behind. Now go to the menu bar and select Image -> Mode -> Grayscale to convert the rest of our image to grayscale. For the next step, we only want to desaturate the object (in this case, the ropes), not the entire image. Click on Select -> Invert to invert the current selection so it is now actually selecting just the object and not the empty space in the background.
There are several ways to actually do this next step, so I will show you two of them. Ultimately it is not important which method you actually use, since the end result is exactly the same. We want to completely darken the object, so we have a completely black version of our tile. One way to do this is to click Colors -> Brightness and Contrast to bring up the brightness and contrast menu. Move the brightness value slider all the way to the left, and the contrast value slider all the way to the right.
Brightness: -127 / Contrast: 127
The second way to do this produces the exact same result. You can also click on Colors -> Threshold and use the value sliders here to convert the object to solid black. Select the small black triangle and drag it all the way over to the right until the object has turned completely black.
Black Slider to the Right
Use whichever method you like and press OK to confirm the changes to your object tile. Now we need to deselect everything, so click on Select -> None at the top menu bar. You should now have a nice black version of your original tile with our specific gray background color!
Desaturated and Darkened Object
This forms the base of our shadow, but it is a bit rigid and unrealistic. We are going to apply a simple blur filter to soften the lines of our shadow a bit. Click on Filters -> Blur -> Gaussian Blur to bring up the filter options. The default settings are just about what we are looking for, but feel free to set the Size X and Size Y values between 1.5 and 2.0. Use lower values if you want a darker, more solid shadow.
Gaussian Blur Settings
Press OK to apply the blur filter to soften the object shadow. This softened grayscale tile will be used as a blending mask, in exactly the same way as the Blend and Transform method.
Blurred Object Shadow
As we did at the beginning of the tutorial, open your desired Floor tile as a new image. With the grayscale shadow tile active, choose the Select tool and press Ctrl+A to highlight the entire tile. Press Ctrl+C to copy it to the clipboard and Ctrl+V to paste it as a new layer on top of your floor tile layer.
Pasted Shadow Layer
Just as we did before, change the blend mode of the Shadow layer to Grain Merge to produce the final shadow effect. This method does not require you to delete or remove the background color from the Shadow layer, but rather blends the neutral gray shade with the original texture with a value of 0. This is because of the way the Grain Merge operation subtracts a value of 128 from the result, and our gray value is already set to 128, producing no brightness change in the original floor texture.
Final Softened Shadow Tile
Now you are free to right click on either of the two layers and select Flatten Image to combine them. You can now use the techniques outlined earlier, or here in the Isometric Textures Tutorial to convert and crop your isometric shadow tile. Don’t forget you can also turn your texture into an isometric wall and simulate shadows being cast against walls.
Final Object with Shadows
I’ve gone ahead and added a little bit of depth to my ropes by duplicating the layer, darkening, and shifting it down by a few pixels. This is just to make the ropes stand out a little bit more for the example image. This technique is also great for objects with odd shapes, gratings, or fences, so feel free to experiment!