Dynamic Lighting with normal maps of Sprite DLight

[Dee]

Hi there,

 

I am currently developing Sprite DLight - a tool that generates normal maps for 2D sprites, only by processing existing sprites.

This way, you could create a game featuring dynamic lighting on pixel art characters and objects or other 2D art, simply by processing the existing game art and using the normal maps in combination with a shader.

A lot of people seem to be interested in that technique and I would like to establish some kind of knowledge base, containing links and information on how dynamic lighting with normal maps can be integrated with various game engines.

I have been asked by a backer about how things would work for HTML5 game development, and as I have no experience in that field, I would like to ask you guys for some advice.

 

A quick overview of what Sprite DLight does:

 

 

An example of an animated sprite sheet with dynamic lighting applied, directly recorded from the tool:

 

"Selen Run Animation", ©2014 Lunar Ray Games, animated dynamic lighting preview of the sprite sheet in Sprite DLight

 

Multiple sprites, consistently re-rendered for different environments, based on the normal map (targeted to engines that do not support shaders):

 

"Super Aged Warriors Alpha 2 HD Turbo Special", ©2014 AlbertoV (DYA Games), re-rendered for different environments with the normal map and lighting of Sprite DLight

 

 

I have already used the forum search and found some interesting threads like this one: http://www.html5gamedevs.com/topic/4449-normal-mapped-sprites-in-webgl/, but it would be nice to have some basic information or tutorials.

 

Sprite DLight is currently on Kickstarter, the campaign will end in 24 hours, so those interested in pre-ordering the tool at the Kickstarter backer price have one day to jump in and to participate in the beta.

 

All stretch goals are reached, the project is more than 650% funded.

Sprite DLight is also on Steam Greenlight, every Yes vote is highly appreciated.

 

 

I would love to get in touch with experienced developers of this forum to see if / how a quick and easy integration is possible for HTML5 game developers.

[Dee]

The clock is ticking: 24 hours left to grab the tool at the Kickstarter backer price and to jump in for the beta.

 

"Skull Plant", ©2013 Kevin Chaloux, normal map and dynamic lighting preview of Sprite DLight

[Gio]

It looks very interesting, but I have a question:

 

For this to work and be useful, you are going to need a normal map AND a diffuse map. Your source sprite has some baked-in lighting already (and presumably you must be using this to compute the normals). So how do you extract a diffuse map with no lighting from the source image? The baked-in lighting would need to be undone somehow. Does your magic software do that?

[Dee]

For the diffuse map, you would just use the original sprite in most cases.

Removing the shading of the sprite (by using a neutral brightness and/or saturation) is something I experimented with, but this leads to poor results, as there is no way to guess the pure color.

I have used the original sprite as the diffuse map for all the examples I have shown, and it usually turns out well enough.

Still, if your art has a heavy one-directional shading to it, the results won't be as good as they are with evenly shaded sprites.

[Gio]

But don't you need the source to have one-directional shading to accurately extract the normals? Would it work if the source sprite was completely flat with no lighting and just filled with solid colors?

 

I don't want to sound negative, I do like your idea - I'm just curious.

[Dee]

It is absolutely okay to ask these questions, Gio.

A perfect normal map based only on a sprite is not really possible.
With the one-directional shading, I was referring to sprites that have a great contrast, like a very dark shading on the left and a lot brighter on the right. Sprites like that won't look as good as evenly shaded sprites in a shader.
When looking at the Sprite DLight title art, you can see that the pumpkin head is a lot brighter on the left than on the right. This didn't harm the normal map too much, but when using both together in a shader, the light on the left side still turns out brighter, as you pointed out.

Using completely flat sprites, filled with solid colors, is possible. Dark areas sometimes turn out a bit odd in the normal map, but this can easily be fixed by using a modified version of the sprite (just fill the flat areas with a different color), like I did for the skeletal animation example in the video:



For this example, I simply made a grayscale image with the eyes, hair and eyebrows slightly brighter than the skin, and the belt and the shoulder pad a bit brighter than the suit, which I used as the input image to generate the normal map.

Using this technique requires you to play a little with the settings (particularly the volume boost helps a lot here) to make it look the way you want it to, but it is no big deal.