Using Normal and Height Maps to Light 2D art

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.

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
SpriteIlluminator: https://www.codeandweb.com/spriteilluminator
Sprite Bump: https://www.kestrelmoon.com/spritebump/

Sprite Lamp: http://www.snakehillgames.com/spritelamp/

Edit October 2019:

New tool called Laigter is being developed here: https://azagaya.itch.io/laigter. It is now Open Source and free / pay what you want. Looks very good and is in active development with lots of users.

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.

Edit 20th November 2019: Modlab now supports voluminous normal maps and it still free to use.

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.

spritedlightchickentest — Dennis’s tests on my chicken illustrations

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.

rabbitnormalmaptest — Map Types created with Sprite DLight

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

rabbitnormalmaptest2 — Light Renders in Sprite DLight

janeelflightingtest — Light renders in Sprite DLight of my character for my personal project

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.

Affinity Photo

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:

https://www.youtube.com/watch?v=iGbwwMaaW6U

janeelflighttest3 — The lighting filter in Affinity Photo with depth maps

janeelflighttest2 — The lighting filter in Affinity Photo with depth maps

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.

janeelflighttest4 — The live lighting layer filter effect in Affinity Photo

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.