I've been working on a sprite generator and I'm having a hard time figuring out how to add shading automatically.

Here are some examples of the generated sprites

A sample bunch of randomly generated sprites

Currently what I'm doing is checking where a flat color meets a dark boundary, and then applying either a highlight or a shadow depending on the direction.

shading process

This is of course really boring. I've tried searching for other methods, but all I could find were AI examples. Does anyone know of any particularity simple yet clever ways of adding shading automatically?

I've thought of expanding the check up to 5 cells, and using a set of pre-determined patterns to generate the shading, but I'm just not too sure


2 Answers 2


Shading is about indicating the 3D shape of the object, so to shade an object well you have to generate its 3D shape. On your first pass, instead of making a flat colored shape, you could make a heightmap, then in your shading pass you can color and shade the heightmap based on adjacent pixels.

Something like this

  • \$\begingroup\$ Huh, I didn't quite think of that. I'll give that a shot and see how it goes. Edit: looking into it more I found this resource, which will undoubtedly lead to a solid solution discuss.pixls.us/t/auto-illumination-of-2d-shapes/7733 \$\endgroup\$ Commented Apr 17, 2020 at 21:43
  • \$\begingroup\$ I'm pretty sure that with your simpler 3-color shading, your "expanding the check up to [more] cells" technique idea will result in shapes with similar blobbiness to the auto-illumination link. If that's what you want, you sound like you already know how to do it. \$\endgroup\$
    – Foxwarrior
    Commented Apr 17, 2020 at 22:03
  • \$\begingroup\$ This is correct. I have experimented with multiple passes and it does work to a certain degree, but the lighting isn't quite as 'dynamic' as I'd like it to be, if that makes any sense. I appreciate your support of my original technique though :^) \$\endgroup\$ Commented Apr 17, 2020 at 23:02

For those of you following or facing a similar problem, I believe I found a relatively easy solution. Considering that I'm travelling around 360 degrees to make a shape, I can use the angle to calculate the particular shading at that point (based on the direction). The same logic is commonly used to apply normal maps

While they don't look perfect, the code can probably be tweaked to produce better results.

Here is an example of the shaded sprites:

sprites shaded using per vertex calculations

for (every vertex){

    var angle = angle(current, previous);

    var scalar = angle/TWO_PI

    fill(0, 0, scalar*100); //HSB



You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .