Little Fighter Empire - Forums

Full Version: [tutorial]3D-Looking Sprites with Normal Maps
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
First of all, I'm not claiming I'm any good at this (to say that the viceversa applies would be more appropriate), but I still thought some of you might have not heard of it, or perhaps did but for another application that doesn't include sprites.

Before I start, let me introduce you to someone some of you may find familiar:
[Image: z8wkBY4.png]
It's none other than my snowman monster sprite for LFE's latest spriting contest. That received only a couple of votes. The shading is bad, and the sprite is generally bad, I get it. But the shading is bad. Shading requires practice to develop that sense of intuition to get it right, and I still haven't done enough to be able to do that. A couple of days ago though, I was working on some other project that has to do with something called Normal Mapping. The idea of normal mapping is to give detail to low-polygon 3D models by providing the computer with fake information of bumps on a surface of a model which don't really exist. By doing this, we fool the computer and alter lighting calculation to actually make it seem like there are extra details. That surface then gets lit as if there really are more bumps on it:
[Image: normalmapper.jpg]

So it occurred to me that maybe this can be done for sprites. I googled "sprite normal maps", and it turned out that I'm not the first to come up with the idea (and it was really foolish of me to think I was the first). But anyway, I went on and tried making a normal map for the snowman monster (on the left), and an unshaded version of the snowman (called the "diffuse texture", on the right).
[Image: snowman_normal.png][Image: snowman.png]

And here is the sprite-normalmap mix working under different lighting conditions:
[Image: 2CGRkbC.png][Image: aqv3mId.png][Image: Ie4AMo2.png][Image: i4B0466.png]

Click here to try it out interactively

So yes. I'm going to skip the "how it works" (to give an idea, every pixel's RGB correspond to an XYZ vector describing the direction of the normal of the surface at that spot) and jump straight to explain how you make a normal map for a sprite. I don't think there's one particular way of making those, but I'm going to explain the method I used to made the snowman's. So for those who don't know what normals are, you hopefully know what tangents are; lines which lie flat on a surface:
[Image: Xj7TN9p.png]
There are other imaginary lines which stand straight (perpendicular) on them, those are the normals we're talking about (the blue lines):
[Image: O2NaLUU.png]

As you can see, normals are a good way to describe surfaces. Take for example this set of normals:
[Image: sFhvXEK.png]
One can immediately tell that it's describing a bump on a flat surface:
[Image: 62wXdIs.png]

That's exactly what normal maps are, except, instead of an array and a direction, we have a color which corresponds to a direction. Calculating the color for every pixel on a sprite would be tedious, so what I did was get a reference; a normal map of a sphere:
[Image: 6487-normal.jpg]
Now the advantage of using a sphere over any other shape is that the surface of a sphere has normals going in every direction and distributed in a familiar way (in a sinusoidal way, for the pedantic).

What you do then is do your best to visualise the ups and downs of the sprites in your head, and think of what region on the sphere have a normal that's identical to the region you're working on. Then you get your color picker or stamp copying tool or whatever and get to coloring!
[Image: dRmjHcA.png]
One thing you can do to make things a bit easier is to resize the sphere (for when you're working on a spherical-like/curved part, and want to use the copying tool). But DON"T scale it out of ratio, or the values become wrong.

It took me around 1.5x the time I used for shading the sprite last time, and I'm liking it. Of course, this isn't the only way to do it. I heard there are ways using a tool called "z-brush" available on Photoshop, which supposedly makes things easier. Some even use 3D modeling software which allow one to make them in a very friendly way.

I forgot to mention that this might not be useful for use with LF2, as the game can't do any lighting or anything to sprites. However, one can take snapshots of the sprites like I did above and use them directly. Also, in case you're working on some other project, almost every popular game engine out there support normal maps (A-Engine does too, btw :P). So it might come handy sometime in the future.

If you have any questions, comments, tips or corrections, please don't hesitate to post. I'd also love to see any attempts you guys make!
Combine it with
One step forward
I've seen that the other day, but 4 shaded sprites might still take me more time (and skill) than a normal map would (although I think shading from extreme edges might be easier for me). Also, if you're interested in buying that one, there's an open source (free) program that does what Sprite Lamp would.

But yes, I've been exploring the possibilities, and I think it'd be possible to generate normal maps out of depth maps (used for shadowing the sprite). They seem a bit more easy to make, and that way, one can hit 2 birds with one stone :P.

Glad this piqued your interest though.
:D nice