next »

[BlackseaOdyssey]

Ahoy, space-huntsman! So in the past I was having trouble trying to create lighting for my sprites in my game. I was trying to find a way to pull this off that didn't require a massive amount of work and looked a good quality.I actually tried to use a few unity made plugins as well as sprite lamp but nothing was coming out the way I wanted it too. This is when I accidentally ran across something really powerful that does more then just add lighting to your sprites, it makes your sprites look nearly three-dimensional.First off, here is what the finished product actually looks like.



Long story short you can create normal maps from sprites using Illustrator or Photoshop pretty easily by layering your sprites as you develop them.  You then apply those normal maps onto your sprites normal map layer. In order to do this you'll need to make sure you have a custom sprite shader that takes in both a sprite and a normal map.Here is a link for a sprite shader with a normal in case you need one.

Here is the normal map.



Here is the sprite without a normal map attached. (see how flat it looks in comparison)



Here is a screenshot of it in game.



Not only do your sprites receive lighting but they also appear to have 3d geometry as a consequence. I've actually been told several times now during play-testing that the structures in our game we're 3d models. Little do they know :PAnyways I hope this may be as helpful for you as it was for me!Be sure to subscribe on our website for news, updates and free demos.

Check out the Official Website, Facebook, and Twitter.

[pottering]

Quite ingenious!
Had seen it before (edit: well duh, you mention sprite lamp yourself), but not with faux-lowpoly, nice "leap of logic".

[BlackseaOdyssey]

Quite ingenious!
Had seen it before (edit: well duh, you mention sprite lamp yourself), but not with faux-lowpoly, nice "leap of logic".

Thanks! The geometric style does makes it much easier to do also since there's no need for a third party software. We do it right in Flash on separate layers.

[oahda]

I was going to do exactly this for my game. Nice to see others use it too. c:

And nice to see it in action/practice before I try implementing it myself to know that it really does work well.

[Zorg]

Very nice result, but how do you create a normal map in Photoshop? Do you use a normal map filter on a grayscale image? Which filter exactly?

[BlackseaOdyssey]

Very nice result, but how do you create a normal map in Photoshop? Do you use a normal map filter on a grayscale image? Which filter exactly?

Assuming you're not using vector-based art, check out Sprite Lamp and Sprite Dlight. We use vector-based art and Flash Pro, so we make it manually. Check out the Normal mapping: How it works article section on Wikipedia to learn more about the normal map colors and how they work. We basically just recolor the main sprite based on the normal map color pallette. Each normal map color is associated with an angles pretty much.

[Sik]

For an example of an actual game that implements this:




It literally looks 3D, but nope it's all 2D. Note that in addition of the normal maps it also uses depth maps which is how the fading out effect works and how it determines what goes on top and what goes under (it isn't used to determine the direction of lighting, that's what the normal map is for). In practice most games won't need this, though.