Digital Art Technique: Using normal and depth maps to create lighting effects in 2d art
This is part 1 of the Normal Map articles here. Part 2 is here:
This article follows on from my previous article: Using normal and depth maps to create lighting effects in 2d art.medium.com
Why and how I discovered this technique
One day I was trying out different filter effects in Affinity Photo, when I saw the lighting filter. I saw the option of loading a “bump map” which intrigued me. I have been learning the basics of 3D modelling so I recognized the term. A bump map is a texture usually applied to 3D models to create the illusion of depth. A useful article I’ve found describing bump maps and other texture maps is here:
Have you hit a bump on the road to mastering textures for your 3D assets? Don't feel bad! Many artists who are new to…www.pluralsight.com
I created a very basic bump map for a small image by desaturating it and inverting the colors. I saved the image as a new image and then loaded it as the bump map texture for the lighting filter effect. I found that by increasing the texture setting the light made some areas of the picture look more raised than others.
I thought it was an interesting effect but I wasn’t sure if it was any use.
I wondered if anyone had written or talked about the lighting filter in Affinity Photo, so I went on Google. I found an interesting video on relighting normal passes in Affinity Photo, but there wasn’t much about the lighting filter:
The video on the normal passes got me thinking about normal maps though, so I looked for more information on normal maps and how I could relate them to digital painting. Pretty much everything that came up in Google related to using normal maps for dynamic lighting in 2d game engines. I thought this was intriguing and discovered a few programs for making normal maps to use dynamic lighting in game engines. Some people make manual normal maps as well depending on the result they want. Here are the main ones I found:
Normal Map Online: http://cpetry.github.io/NormalMap-Online/
Sprite DLight: http://www.2deegameart.com/p/sprite-dlight.html
Sprite Bump: https://www.kestrelmoon.com/spritebump/
Sprite Lamp: http://www.snakehillgames.com/spritelamp/
Edit March 2019:
New tool called Laigter is being developed here: https://azagaya.itch.io/laigter. Free version. A version with more features is also being developed. It’s in Beta stage.
Edit April 2019:
Found another interactive 2d normal mapping editor tool called ModLab. Not sure how I missed this one, but here it is anyway for you normal map enthusiasts out there. I think it’s free as well.
I thought Sprite DLight would be the most suitable for me, as it said it created voluminous normal maps from existing 2D art, and it mentioned it worked with digital painting styles as well as pixel art and isometric art in the Kickstarter trailer. It states quite clearly that the main use of it is for 2D game sprites and animation though, so I wasn’t sure whether it would be useful or not.
I contacted the author of Sprite DLight (Dennis) with a few questions. He generously took the time to answer all of them and even tested the results on some of my pictures for me.
He gave me some great tips and caveats about the software. Images have to have a transparent background for the normal map to be properly generated without edge artifacts, and the bigger the image is, the longer it takes to process it. It does work on high resolution images and it generates several map texture types including normal map, depth map, occlusion map and specular map. It even has a live lighting preview, which you can see on the far right of the above picture.
After several emails I decided to buy it. It’s a great little program. Sometimes I just use it to get an idea of lighting something with a small test image, which I could then use as a reference guide for the colour values. It would be great as it’s primary goal suggests, for a game developer who wants a fast solution to light 2d sprites with normal maps. You can export a sequence of lit sprites with it and then make them into cool gifs as well (I use Aseprite to do the animated light gif with the exported sprites).
Screenshots of Sprite DLight
Now I had the ability to generate normal maps and other map types quickly and easily from my existing images. The main map types I needed for the effects I wanted to try out were normal maps and depth maps. Affinity’s lighting filter uses depth maps, and all the other software I tried uses the normal map for the effects discussed below.
The lighting filter in Affinity Photo uses the depth map to create this effect:
Here is a short video of me using the lighting filter:
The live adjustment layer version of this effect is probably better to use as you can keep going back into it and editing it and copy it to other layers.
I thought it was a cool effect although the UI could do with some work, and I would love it if they developed this feature some more.
I also tried using the normal map with adjustment layers in Affinity Photo like in the video I had watched earlier, and managed to create a lighting effect.
I made this video on how to use normal maps with adjustment layers to create lighting effects in Krita 4.
Photoshop is a very powerful tool for creating this effect with the normal map and adjustment layers. I made a video on my test with this:
If you enjoyed this, there is a part 2: Lighting 2D art with normal maps.
No matter the alternative that you will choose in this tutorial, you will need to generate one or several normal maps…www.scirra.com
Pixel art has a certain timeless look, but that doesn't mean the tools and methods for creating it are trapped in 1993…www.gamasutra.com
Blacksea Odyssey is a indie 2D top-down shoot em up with rogue-like elements about hunting giant space creatures. The…blackseaodyssey.com
Thank you for reading this article. I hope it was interesting. If you want to offer your thoughts on this subject I would be grateful, please do so in the comments.