Art Style #4: Dynamic light test on a 2D character

The environments in Infamis, like the arenas, are planned to be made in 3D and so, they would have 3D lights. However, the characters and most likely a lot of the items and obstacles might be 2D. So how will the lights work? Let’s test the idea with an animation from the last post “Art Style #3: First animation tests”.

That’s when we started to think about normal maps. What if we could get the light to affect the 2D art, without taking the cartoon feel away? It would be cool to have a 3D light source on magic effects and see them affect the whole arena and the 2D art while they pass them by.

Sprite Lamp

Sprite Lamp is a tool which helps you to make normal maps for 2D art, so it’s the perfect tool to test our idea. The software supports Spine animations, so you can see your animations with the lighting straight away in the program.


This is great since we can see the light effects on the animations themselves and not just on still images. There are some options where you can affect the light and its color, there is also some options for the shaders.

What you need/maps

Grayscale height maps

We used Spine for the animations, so we had to apply the shading to the animation's atlas file. Sprite Lamp requires pictures of the right, left, down and up maps (you can also give it a front map, but it isn’t mandatory). We did a few tries and the ones I have included here worked the best.


We didn’t use too much time with these, since this was only to validate our idea. Still, we made three iterations on the maps to get a better idea how they should be done.

The result

Normal map

The Sprite Lamp generates the normal map for the lights on the left, right, down and up maps. You can also save the normal map from the map generation window to use it in-game.


Spine's texture packer packs the atlas automatically, so when the amount of parts changes the atlas changes. This would mean that if we had all of the parts in the same atlas, we would have to do the normal map again every time we add new parts to the atlas. So, it is likely that we will apply the shading for each part individually, and use Spine to generate an atlas for Sprite Lamp's input maps as well as the normal texture atlas.

The final effect

After creating the maps and generating the normal map, you can preview the light effect in Sprite Lamp. You can also switch between all the animations you have in the loaded animation file. Let's see how our fellow looks like:


The end result might look somewhat different for you, I made some changes with the light options to change the colours a bit. I selected yellow and purple shades for the directional and ambient lights to get a warmer light and colder shadows.

You can play around with the light colors in the preview window's light settings to achieve different look. Under the shader settings, you can switch between the default shader or the cell shading shader which we used here. Cell shading gives the lighting those clear colour lines, and from the settings you can change the amount of shades shown. This type of lighting suits better for the cartoon look we are going for.

Side note: We might use similar shaders for the 3D objects as well, since the idea is to keep the cartoon look, but also utilize the benefits of 3D environments. We got a lot of ideas from this test, let's see what kinds of solutions we come up in the future.


I think we might be on to something. Dynamic 3D lighting opens up many possibilities. It also makes shading of the characters easier since it’s automatically done by the dynamic 3D lighting in combination with the normal maps. Sprite Lamp is a great tool and really helped us to see that there might be a point to using normal maps with 2D art. The fact that it works so well with Spine is also a big plus, since we will be using it for the animations. The game will be done with our own HactEngine, so we will have big control over how the lights and shaders work, which means we can modify them to achieve the look we are going for.

In the next post "Art Style #5: Let's sketch more characters" we will go back a bit and show off more of the characters sketches!



Share this:
Category: Graphics   

comments powered by Disqus