Contents
Introduction
In this tutorial, we will go over a few different techniques for simulating lighting in 2D Isometric art. While it is possible to just use built in lighting or post processing effects in a game engine, I’m going cover ways to achieve lighting effects completely in 2D using textures, shading, blending and overlays.
Shading
The most basic method, and one used by almost all of the Isometric Graphic Packs from Screaming Brain Studios, is a simple trick of the eye. If you have downloaded any of the Isometric Tile packs, you may have noticed that some of the tiles have been darkened, or shaded, as I’ll be referring to them. This allows them to be placed next to the unshaded tiles to create a feeling of depth, or to help establish the illusion that there is a light source somewhere, despite there not actually being any lights.
Left: Isometric Rooms / Right: Isometric Block
The process is just as simple as it looks! Once I have decided which direction the lighting in my scene will be coming from, I tend to follow a simple set of rules when working with my isometric tiles:
- Main Wall Tile – No Shade (Lit)
- Side Wall Tile – Darken (Unlit)
- Top Wall/Edge or Floor – Lighten (Highlight)*
The Main Wall will be the tile you have chosen to remain the base color, which will be uniformly ‘lit’ by the light source coming into the level, and therefore will not need any shading. The Side Wall is the tile we will be darkening in order to create the impression of depth. The Top Wall/Edge only applies in the case of Thick Walls or Objects, and will be lightened more than the other two sides, in order to create the impression that a light source is shining down on the top of the tile. The Top Wall/Edge is often referred to as the Floor of the tile, regardless of how it is being used.
*I also only tend to increase the brightness of the Floor tile if it uses the same texture as the Main Wall. Another tip for this particular case is to leave the Floor completely untouched, while adding a slightly darker shading to the Main Wall instead, in order to keep it distinguishable from the Floor tile.
Deconstructed Isometric Cube
In the image above, you can see the different levels of shading that have been applied to each of the tiles making up the final Isometric Cube. While leaving the Main Wall untouched, you can adjust the shading and the highlight levels of both the Side Wall and Top Wall ever so slightly, until you find something that you like.
This allows you to create things like rooms or platforms using nothing but these three different shades of the same Tile Texture. (NOTE: The Isometric Wall Pack and Isometric Town Pack come with both shaded and unshaded tiles to save you the time of having to do it yourself.)
Shaded Tile Example (Lit from Southwest)
The process is similar for Thick Walls, only you will be adding a Top Wall/Edge to give the wall some thickness. Following the same simple rules from earlier, the Top Wall/Edge will have to be lighter than the Main Wall in order to distinguish it from the Main Wall and Side Wall textures.
Example Thick Walls
Using the different textures provided in the Isometric Wall or Isometric Floor packs, it is possible to crop or cut pieces into the shapes needed to create different types of Wall Tiles or Objects. I will be covering Isometric Cropping in another tutorial, but for now, take a look at the example below to get some ideas how you could crop textures or existing tiles and arrange them to create some Thick Walls.
Cropping Textures to Make Isometric Walls
Another useful tip is to save your shading values somewhere, allowing you to recall them for use later. You don’t want to apply random shading values to different tiles in your tileset unless you are trying to achieve something specific, or if the textures themselves are too dark to see any changes when altering the brightness. This will help maintain the uniformity of the lighting across your entire scene.
Blending
It is possible to use gradients and grayscale masks to create the illusion of different types of lighting, or even to create new types of textures to use while making tiles. To give you an idea just how flexible this ‘lighting’ technique can be, I’ve put together an example in the form of an animation!
Water Caustics
Using nothing more than a blue sandy texture and some grayscale water caustics, a rather convincing animated water tile can be produced. The lighter areas in the grayscale mask will lighten the texture, the darker areas of the grayscale mask will darken the texture, and any part of the grayscale mask that is light gray leaves the texture unaffected.
Sand Texture (Left), Caustic Mask (Mid.), Final Output (Right)
To reproduce this effect, you will need a copy of GIMP, the free open source image manipulation tool. It is possible to get similar results with Photoshop, however Photoshop does not have the required blending method that I typically use to create this effect. The results in Photoshop will look a little bit different, possibly with unwanted effects, so I recommend you use GIMP instead.
The first thing you want to do is select the texture you wish to use as the base. In the above example, I selected a sandy texture that has been converted to a blue color, but this is only because I wanted my water to be blue. You can use any color texture you wish since the result will be the same.
Import a base texture
You want to leave your base texture on the bottom layer, since we will be applying a grayscale mask as an overlay. Once you have imported your base texture, create a new layer and import your desired grayscale mask on the top layer.
Import a grayscale mask
The last and final step is to change the current Blending Mode of the grayscale mask’s layer. The one I use almost exclusively when working with this type of lighting effect is called Grain Merge. According to the GIMP documentation, Grain Merge “takes one layer and merges it with another, leaving a grainy version of the original layer.” Not particularly detailed, but I have found this method produces the most visually pleasing results with almost no difficulty. The actual blending process involves combining the pixel values of both layers together before subtracting 128 from the final value. This is why using the color Gray (RGB 128, 128, 128) remains unaffected when blending with other layers, and is used to retain the original texture brightness values in certain areas of the image.
Change the layer blending mode to Grain Merge
It is as simple as that! This same technique can be used all kinds of different ways, from water caustics to spotlights, shading the edges of tiles or adding various shadows to your textures. It is also important to note that if you want any areas of your base texture to remain unchanged by the gradient mask, you need to use a specific gray color (RGB 128, 128, 128 with a luminosity of 120) This will prevent the texture from being lightened or darkened wherever this color is used.
The real final step is to convert your square tiles into isometric tiles (Check out how to do that HERE) If you use a seamless texture as well as a seamless grayscale mask, the resulting isometric tile will also remain seamless and can be tiled.
Rotated and Resized Texture
You can even use the same technique to create illuminated walls and floors or apply shading effects by splitting gradients into multiple pieces. Try experimenting with different types of grayscale masks and gradients to see what kinds of results you can come up with on your own!
Faux Lighting on an Isometric Wall
Or you can just grab a whole bunch of free grayscale Noise Textures or grayscale Gradient Textures from Screaming Brain Studios to save yourself some time!
*This article will be expanded over time.