First Hands-On Preview: SpriteLamp

Hello everyone! Hope you all are preparing for Christmas! I have received an early Christmas treat that I wish to talk about: the 2D Dynamic Lighting Tool, Sprite Lamp!

What is Sprite Lamp?

Sprite Lamp is a Dynamic Lighting Assistance Tool developed by Finn Morgan from Snake Hill Games. Its purpose is to make dynamic lighting in 2D graphics possible with generated normal maps, depth maps, anisotropic maps and other files that shaders can use. It has been gaining a lot of buzz for it’s early capabilities and was recently successful in a Kickstarter campaign and being Greenlit on Steam almost two weeks ago. Since I funded for the Early Bird Pro pledge, I received the early demo version yesterday morning to try out, so now I’ll tell you how I got on.

Let me point out very clearly that the version I received is an alpha release, version 0.3 as of writing. There are still portions which are incomplete or yet to be implemented, such as features, user interface and compatibility for both Linux and Mac, and as such it should not be viewed as the final product. Despite this, the version I have access to runs really well with no performance or aesthetic issues found, and I never had it crash. Not to mention the example images provided (see screenshot below) definitely shows the capabilities of Sprite Lamp’s Mapping Generation.

Example

My First Impression

Now it was time for me to give it a shot, starting with creating the images. Sprite Lamp required a diffuse image, basically an image no shading, to apply the generated normal map on. Then it needs up to five light point images, images which represent the shading depending on the direction of light. The instructions specify having at least two out of the five, and while that is possible, you need to upload a light point image for all five places: top, bottom, left, right and front. I’ve gotten this to work on only two by simply uploading a white base image of the sprite for the other three points, but I figured I’d try and go all out by making all five image points.

Not being the best pixel artist didn’t make this easy, as making the image points is ten times more work than using the Sprite Lamp tool. After experimenting with Photoshop for a bit, I figured out the best way for me to make them is as follows:

  1. Layer the diffuse image as the top, and create the image point images as layers below.
  2. Using the selection tools, create a selection of the entire diffuse image and fill the empty layers with that selection. Creating a set of layers with filled outlines of the sprite you are working on.
  3. Shade each direction you want to use in each layer using black, white and the 50 shades of grey. (While there are actually 253 shades of pure grey, I didn’t want to go into THAT level of detail)
  • Note: Make the diffuse image visible and partially transparent so you have a good idea of where shading needs to be and whatnot.
  1. Save each layer as a separate image.

This was my final result:

Layers

It took a good hour or so for me to be satisfied with the shading but I finally got all five light point images finished. I’m sure someone with better artistic experience would find a more efficient way of shading and how to shade the exact same image multiple times, so if you do please post it on your own blog or page and link me, I’d like to get involved with artwork more as it is a required skill for programmers. 😛

So then it was onto importing, which leads me to my only criticism with the alpha version. As of this current version, Sprite Lamp only accepts files with specific suffixes related to their purpose (i.e. _diffuse.png, _front.png, _right.png ect). If you are missing suffixes on one or all of the image files you are trying to include as an image set, (not individually as far as I’m aware), they won’t be imported and throw an error dialog box. While having the suffixes is good for memory sake, it’s tedious to rename files just to get it to upload. I think it would be better there was a dialog box to set what image should be what image point or type, to save the hassle of renaming, but I guess when you get into the habit of naming files in such a way, it becomes less of an issue. After I imported my image set and clicked the “Generate Normal Maps Button”, I was able to see a shaded version of my player sprite from Secret of Escape!

Sprite Lamp

You can see the final version of the map by checking out the exported Preview GIF:

To show what a generated normal map looks like using only two image points, here’s a preview GIF of a shaded Anarchy Ambulance:

Implementation in Games Development

So the last point on people’s mind is, how will this get implemented into games? Well, even in the Alpha, SpriteLamp allows you to export generated Normal Maps, Depth Maps and other kinds of mapping files which can be inserted and rendered with the use of shaders, which in simple terms are files containing code that makes rendering graphics possible. Most game engines/frameworks which use either OpenGL, WebGL and DirectX uses shaders under their own proprietary shader language (i.e. GLSL and HLSL), which means in order to use these generated mapping files, you need to write a shader to read in the mappings, use their values to calculate the color of each pixel based on the pixel position, a light position, and the color value of the mapping, and have it rendered.

At the moment, both SpriteLamp’s creator and certain members of the game development community have found or created examples of the generated files working in Unity, XNA/Monogame and LibGDX. I was wondering how a WebGL based Game Engine like Construct2 could use the normal maps, then I stumbled upon this effect plugin by Pode (based on work Matt Greer). While it’s not literally applying an effect to a sprite, instead it uses a second sprite to act as the normal map and you overlap it to the main sprite. It also has the limitation that it doesn’t take into account the light’s position, just the light’s angle towards the sprite. But with a slight modification to the normal file, and a few additions to the example file, I can confirm that the plugin works with SpriteLamp!

Normal Mapping Construct2

I have even extended the example provided by Pode to even have a moving sprite (controlled using the directional keys) that changes angle, and the shading changes with it!

Try it out here!Download the Project File here!

Conclusion

So after trying out SpriteLamp for the first time, I am both impressed and satisfied with the alpha. For being incomplete, it is very functional and does its job well. I look forward to seeing what the beta and hopefully the full version in the future. I also suggest any game artist or games developer with a keen interest in detailed graphics to look into this. I may try implementing this into Secret of Escape, you may never know! 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s