Gimp Height Map Tutorial
Tutorial Sponsors!
Huge thanks to RandomMomentania’s 1 tutorial sponsor for sponsoring this tutorial!
Want to see tutorials before anyone else? Become a tutorial sponsor on Patreon to see tutorials while they are in WIP form!
If you are a tutorial sponsor and you do not see your name listed here, please check the welcome email that was sent when you pledged. (please check the spam folder, as it may have been mistaken for spam)
Email me at TwistedTwigleg@RandomMomentania.com if you have any problems finding the email, or have any questions, concerns, or feedback. Thanks!
EDIT: RandomMomentania is no longer using Patreon.
If you like this tutorial, please consider buying one of our games to support our efforts!
Tutorial Overview
In this tutorial, I’ll show you how to make a bump map using Gimp, and then how to convert the bump map into a normal map you can use in your games.
Tip
While this tutorial is focused around using Gimp, you can create bump maps with any paint program!
Warning
For some reason this tutorial page seems to be having trouble loading all of the images.
If you see an random white space, it may be that a image is loading. Please just give it a second, and the image should load.
Let’s jump right in!
What And Why
If you were like me, you may have heard the term bump map before but had not really known what it means.
While I am still no expert on the matter, I have learned a bit about bump maps and what they do.
I will do my best to try and explain what a bump map is and what it does.
A bump map is a monochrome texture that defines how much a texture should be extruded straight out.
Most bump maps are straight black and white, where one color (generally black) represents the lowest possible value for the extrusion and the other color (generally white) represents the highest possible value for the extrusion.
Using the colors in between (generally shades of grey) you can transition from highest point to lowest point.
To make a bump map for a texture, you make all of the parts of the texture you want to have extrude out brighter, while you make all of the parts you want to extrude in darker.
By doing this, you can easily add details to your textures and meshes. For example, by using the following texture:
We can instantly add detail to what was otherwise a flat plane:
Why do you want to use a bump map though? Why add another time consuming texture to your workflow?
The reason is because bump maps make it much easier to add details that would otherwise take a long time to add, or would be impossible.
Most of the time we do not actually use the bump map directly in games, but instead we bake/convert it into a normal map and use that instead.
Now you may be wondering, what is the difference between a normal map, and a bump map, and if we are converting a bump map to a normal map, why not just make a normal map to begin with?
To answer this, let’s compare bump maps to normal maps.
A bump map (sometimes know as a height map) and a normal map are different things. Technically speaking, a normal map is a sub category of a bump map.
A bump map simple stores whether a pixel is displaced/extruded up or down. This makes it where when a light ray hits the surface of a bump map, it bounces as if the surface is deeper/higher than the actually geometry in the surface is.
For example, in the image below a ray of light are hitting the completely flat plane with no bump map or normal map. When the ray hits the white plane, it bounces off as you would expect.
but the bump map is making the light bounce as if the surface the plane is lower or higher than it really is.
In the image below, a ray of light is hitting a completely flat plane, but instead of using the plane’s geometry (the white line), it is instead using the bump map. This results in it bouncing off as if there are details that do actually exist on the plane’s geometry, which gives the illusion of detail.
Unfortunately because bump maps only define whether a surface goes up or down, we cannot define things spheres with engravings easily in bump maps. This is because we can only define whether a surface goes up and down, which means adding angled details to a bump map, like engravings on a sphere, are almost impossible.
However, because bump maps only define whether a surface goes up or down, it is much, much easier to create bump maps by hand since we just draw a monochrome image where light colors means surfaces are higher, and dark colors mean surfaces are lower.
Normal maps on the other hand, instead stores what angles the light bounces off the surface at. It stores this data in the red, green, and blue values where each color represents a different angle on the X, Y, and Z axes respectively.
This allows for small details and because it is storing the angles and not just the height, this allows for greater control over how the light bounces.
For example, take a look at the image below. The green lines are the pre-computed normals (technically the pre-computed normals would exist for every pixel on the white line, but, that would be almost impossible to show in a picture)
If you look at the picture above, you can see on the right side that the pre-computed normals can reflect the light in different angles, they are not only constrained to bouncing the light off the surface at a right angle.
The reason normal maps are used more often than bump maps is because we can store a lot more data in them. Unlike bump maps where we can only store whether a surface goes up or down, with normal maps we can also define whether it goes left/right and forward/back (to a limited extent).
This added data has a huge cost though, and that is that it’s really, really hard to make normal maps by hand. Because normal maps contain so much data per pixel, it is almost impossible to manually create make your own normal maps.
Note
There are probably much better explanations on the differences between bump maps and normal maps, that are more detailed and explain the topic better than I do.
I would link to one, but I actually couldn’t find any articles, discussions, or posts explaining what bump maps are and how they are different from normal maps aimed at those who may not know what either are.
If you find any interesting/cool/better explanations on bump maps, please share them in the comments below!
Also, if you have any feedback/suggestions on how to explain this better, let me know that in the comments below too!
But if we are can already bake and create normal maps using software like Blender and ArmoryPaint, then why bother with bump maps?
The reason we make bump maps is because sometimes it is way easier to make a monochrome texture, add the details you want, and then convert the bump map into a normal map, than it is to add those same details in something like Blender or ArmoryPaint.
Let’s look at an example on why we would want to make a bump map rather than a normal map in something like Blender or ArmoryPaint.
For example, here is a picture of a scene from the tower defense tutorial. Notice how the picture is using low resolution, pixel art textures:
How would you go about making a normal map for textures like this in something like Blender?
The most common method of making normal maps is to bake a high resolution sculpt that has all of the details you want onto a finished model. The problem with using that method here is it would be incredibly time consuming to sculpt each of those pixels.
But by using a bump map, we can paint directly over the low resolution texture, and then convert it into a normal map:
This makes it where we can easily create bump maps for pixel art games and low resolution textures easily.
With game engines like Godot and Unity now supporting bump maps with sprites, being able to export normal maps is even more useful than before for pixel art.
Making A Bump Map In Gimp
For this tutorial, we will be making a bump map for the player in Kenney’s Simplified Platformer Pack.
Go ahead and download the zip file and extract it somewhere on your computer.
Once you have the zip file extracted, navigate to the platformerPack_character.png (kenney_simplifiedplatformer -> Tilesheet -> platformerPack_character.png) and open it up in Gimp.
Tip
This tutorial assumes you have some basic knowledge on how to use Gimp and how to change tools. Also, this tutorial is using Gimp 2.10.6.
If you do not know how to use Gimp, do not worry! Go check out some beginner guilds on how to use Gimp and then come back.
You should not need much technical knowledge on how to use Gimp for this tutorial. This tutorial should be beginner friendly and should not require a lot of experience in using Gimp. If you have any questions, let me know in the comments below!
Once you have platformerPack_character.png open in Gimp, we need to make a new layer so we can draw freely without having to worry about altering the original image.
To add a new layer, click the little button that looks like a page with a plus symbol on it.
This will bring up the new layer window. Most of the options here we can leave at their default values, but we need to make sure that the Fill with dropdown is set to transparent.
Now you will have to layers on the layers window. The final thing we need to do is select the newly created window so that when we draw, it adds pixels to the new layer and not the old one.
With all of that done, we can move on and start making the bump map!
Painting The Bump Map
Let’s start with the first frame in the sprite sheet.
With your mouse over the window, hold down the middle mouse button and move the mouse to pan so the little robot guy in the top left corner is centered on your screen.
Then, hold control and scroll with the mouse wheel to zoom in and out.
We want to be fairly zoomed in so we can see each of the pixels. My window now looks like this:
Cool, now we can start adding pixels. Select the color box and make the color completely white.
You can tell if you have a completely white color selected by if the R, G, B, and L properties are all 100.
Alright, once you have a completely white color selected, then hit OK.
Next select the pencil tool and set the brush size down to 1 pixel. This will make it where we will paint one pixel at a time.
Alright! We are finally ready to start painting the bump map!
On the sprite, draw over the grey of the D-Pad, and the grey around the buttons. Once you are finished, it should look something like this:
Tip
Don’t worry if your painted in version does not look exactly the same.
You may need to pan, zoom in, and zoom out to more easily work on the image. I zoom a fair amount when I am working on individual pixels.
Cool. These white pixels will represent the highest point in our bump map. This means when we convert this to a normal map, the D-pad and the grey around the buttons will seem to stick out the most.
Next we need to change the color. Select the color box, and change the L property to 90.
Now you should have a slightly less bright white. Using the new color, fill in the front of the player (leave the hands, feet, screen, and shaded part of the player for now)
The player should now look something like this:
Tip
If you made a mistake, or need to erase a section, you can use the erase tool!
Just make sure to have the Hard Edge checkbox checked for easy removal of pixels.
What Hard Edge does is it constrains the erase to snap from pixel to pixel, so the eraser cannot be in between pixels.
Great! Now with the same color still selected, color in the top of the feet, the hands, and the red part of the buttons.
Not the arms or legs though! Those will need a different shade.
Once you have that done, it should look like this:
Great! Now this slightly darker white will not be quite as high as the white in the bump map. This means that lights will treat these areas as if they are slightly lower than the white areas we did before.
Next we need to change the color again. Select the color box and change the L property to 80
Once you have the new color selected, color in the green screen (including the face) and the arms and legs.
Leave the side of the body, as that will need another shade.
Once you have that done, it should look like this:
Alright! Now all that is left is coloring in the last part.
Select the color box and change the L property to 70.
Now with the new color selected, color in the last bit of the player, the dark orange part of the body.
Once that is done, it should look something like this:
Cool! With that done, our bump map is complete. As you can see, the bump map looks similar to the player sprite we started with, but now in a single monochrome shade, with no details beyond simple shading.
This is exactly what we want, as then we can feed this image into a tool to get a normal map we can use for our games.
Tip
Go ahead and do the rest of the sprites in the sprite sheet if you want, or just crop the single frame of animation out using the crop tool. The crop tool looks like a square composed of two overlapping triangles, with nothing in the middle.
Or, if you want, download the completed project and look at the provided platformerPack_character_WithBumpMap.xcf file.
Converting The Bump Map Into Something Usable
Now that we have a black and white image we can use as a bump map, we will need to convert it into a normal map before we can use it in a game engine.
This is because game engines generally only support normal maps and not bump maps. The reason behind this is simple: 90% (or more) of the time users using a game engine will be using normal maps generated from a high poly sculpt, or baked normal maps from textures.
So, how do we go about converting this black and white image into something we can use in our games?
here are three ways I have found:
Saving The Effects Directly To The Texture
The first method is to just apply the bump map and the effect it will have with light directly to the texture.
One of the best parts of this method is it’s simple, it works on every game engine that supports sprites, and it does not require any additional files in the game project.
One major downside with this method though, is it does not respond to dynamic lighting. This is because we are just applying the lighting effect directly to the texture.
So, how do we apply the lighting effect directly to the texture? First we need to make only the colored sprite visible, so we need to hide all of the other layers.
Once only the colored part of the texture is visible, then we need to select the Bump Map filter.
Then from there you want to input the BumpMap layer as the Aux input map.
Then I highly suggest playing around with the values until you get something you like. Personally I find the following looks pretty good for this sprite:
To change the angle of the light applied in this effect, you need to change the Azimuth value.
Then when you are happy with the results, just hit the OK button and that will apply the effect to the sprite.
From there, all you have to do is save the file, and then export a PNG file to use in the game engine of your choice!
Note
I find this effect is nice for previewing how the bump map will look. I generally do not hit OK and save the lighting effect straight onto the texture, as I generally want to use dynamic lighting.
Convert To A Normal Map Using A Gimp Plugin
Using the Gimp Normal Map plugin, you can convert the bump map to a normal map directly in Gimp.
I do not remember which version I have installed, but it still works great with Gimp 2.10.6. However, one major downside with this plugin is it only works for Windows, at least as far as I can tell.
That said, this plugin makes making normal maps directly in Gimp a breeze. First we need to have only the bump map layer visible.
Then we need to launch the NormalMap plugin, which you can find in in the same area as the Bump Map filter.
This will then open up a window with a bunch of different settings you can change.
I would highly suggest playing around and seeing the different results. If you want to see what it might look like in a game, you can hit the 3D Preview button to get a 3D preview.
Personally, I like the following settings for this sprite:
Once you hit the OK button, it will replace the bump map with a normal map that you can then export to a PNG file and use in your games.
Note
You may want to make a copy of the bump map layer before hitting OK, since the plugin overrides whatever is on the currently selected/visible layer.
I have used this method a few times and it works really well!
However, a while back I moved to Linux. Now I’m back on Windows, but while I was using Linux I found another way to convert the bump map into a normal map.
Convert To A Normal Map Using A Online Tool
While I was on Linux I stumbled upon this tool called NormalMap-Online, which is an awesome way to convert your bump maps into normal maps you can use in your games!
Because it is a website, you can use it on Windows, Linux, MacOS, or really any browser.
Tip
In case you are wondering, the tool does not save your textures on a server or anything. The entire conversion process is done through javascript and happens locally on your computer!
To use it, all you have to do is export the bump map to a PNG file in Gimp, which you can do from the file drop down. Just make sure only the bump map layer is visible!
Once you have exported the bump map, just drag and drop the file into the window on the far left, and then a normal map will be generated.
As with the other two solutions, I highly suggest playing around to get a result you like.
I think the following looks pretty good for this sprite:
Then when you have the settings the way you like, just hit the download button to download whatever texture map is visible in the middle window (in the picture above it’s the normal map).
If you want to download all of the maps NormalMap-Online can generate for you, then instead of hitting the download button, hit the all button. This will download a Normal, Displacement, AmbientOcclusion, and Specular map all based on the height map you drop in.
Then you can place the downloaded PNG files in your game’s project folder and use them like normal textures!
Personally, this is my favorite way to make normal maps from a bump map.
The reason I like NormalMap-Online the are for the following:
- Flexibility in how your normal map is generated without there being too many options which can be overwhelming. Personally I think the options provided give a nice level of control and the results look great.
- Works on all major operating systems. This is a huge plus if you are working in a team where not everyone may have a Windows computer.
- Generates extra maps from your height/bump map. While most of the time I only use the normal map, it’s nice to have extra texture maps if/when I need them.
Tip
If you are using the normal map in the Godot game engine, you will need to have both the R and G invert checkboxes checked for the normal map to render correctly in Godot!
Regardless of which method you use, all three methods produce excellent results that are perfectly usable for your games and projects!
Edit: Additional Method – Laigter
Since the writing of this tutorial, the creator of the tool Laigter asked me to check out their program.
I was really impressed with it and it allows for easy normal map generation based on the colors of the sprite inputted.
For some sprites, the automatic process works great and nothing else is needed. However, Laigter also allows for importing a heightmap, allowing you to generate a normal map just like the tools above. Just like NormalMap-Online, there are several options for customizing the generation process without being overwhelming and it even has a nice preview window for checking what the results will look like.
Laigter also allows for generating normal maps for tiled/repeating sprites, which I haven’t found in very many other programs. This is very handy because normal maps generated for tiled/repeating textures generally have ugly seams when the repeated nature of the sprite is not accounted for in the generation process.
Laigter works on both Windows and Linux. I was very impressed with it and would defiantly recommend giving it a look!
NOTE: I was by no means sponsored or forced to mention Laigter in any way. The creator contacted me to see what I thought of the program, nothing more. I added this bit here because I truly believe it would be helpful for making normal maps using a height map, like described in this tutorial.
Final Notes
Hopefully now you know what a bump map is, what it does, how to make one, and then how to make it usable!
As you can see in the image above, adding normal maps to sprites can really help add style to your game.
And it looks even better when the light source is moving:
Warning
If you ever get lost, be sure to read over the tutorial again. If you still need help, let us know your problem in the comments below!
You can download the finished project here.
Please read LICENSE.html or LICENSE.pdf for details on attribution. You must include attributions to use some/all of the assets provided. See the LICENSE files for details.
Tip
Like the tutorial? Please consider supporting RandomMomentania by buying one of our paid games!
By supporting RandomMomentania you allow us to continue to make great games and tutorials that we can share with the world!
Note
Huge thanks to the following:
- Kenney for making the free game assets we used in this tutorial!
- The person (people?) who made the Gimp bump map plugin!
- The person (people?) who made the Gimp Normal map plugin!
- The people who have contributed to Gimp!
- The person (people?) who made NormalMap-Online!
- The person (people?) who made Laigter.
- My (former) patrons on Patreon for making this tutorial possible!
None of the sites or resources used in this tutorial are in anyway involved in this tutorial!
Huge thanks to everyone listed for making such great stuff available to everyone!