[WIP] Sprites in a tough context

[saimo]

Hi all,

I'm totally stuck. There is a sprite I cannot just figure out how to shade. Not that the other ones are particularly brilliant, but this one is really bothering me. The sprite I'm talking about is the red head in this image (third row from the bottom):

.

The problem is that it is just a head, whereas I would like it to be a proper walking being, because that looks a lot better in the context of my game.
What is giving me headaches is - besides my limited skills - the fact that the game is entirely 2D, but lighting is calculated in real-time (24-bit tile-based raytracing - have a look at this screenshot for a visual example): because of that, the shading of sprites (and tiles as well) should be as "neutral" as possible to avoid major inconsistencies (of course pre-rendered graphics will never match real-time lighting perfectly). Since the view is overhead, the most neutral shading I can think of is going from light to dark, just to give a sense of depth. Unfortunately, that easily translates to... pillow-shading F.ex., have a look at the rat or the bug (which, however, do not look too bad in the game); the blob, instead, does have a directional shading, because otherwise it have looked very poor and flat.
Matters are made worse by the small size of the sprite and the dominating background color, which is the dark blue in here:



This image is the 16-color source of the first one, which has also an 8-bit alphachannel (because the game works in 32-bit).
Speaking of colors, I have used only 14 colors (background color aside, which *can* also be used inside the sprites) and I would like to use at most 16. The palette is so saturated to provide effective contrast against the non-sprite elements (which use another 16-color palette).
The sprites at the bottom-right of the second image show the direction I would like to take: I would like the sprite to represent an orc/dragon/lizard or something like that. Despite the free color(s), I just cannot find the right ramp(s) to convey the sense of depth, create sufficient contrast and get the sprite to be readable.
Final notes:
 * the sprite should roughly cover the area indicated by the filled circle below the experimental sprites (a pixel off here and there is OK);
 * of course edits are welcome, but please do not make them too nice/complete, otherwise I would be left with too little room for "personalization".

Thanks in advance.

saimo

[Arne]

I'd skip most of the gradients, as they only make things seem blurry. The sprite should read graphically first and foremost. You need to create areas of contrast if you want things to 'pop'. Gradients creates blur and often makes things less graphical. Never do a gradients because you happen to have colors in the palette for it (Like: "oh, I have an even brighter yellow, now I just have to use that... heeey, I can go all the way to white now!").

If you do use gradients, try a hue shift for the shadow (by using a hue shift in your ramps perhaps). Perhaps all shadows should have something in common, like relative temperature, or saturation. It will unify things. I also wouldn't recommend gradients (or just light/shadow contrast) with very little change in brightness. They're lost at this scale.

Still, it's hard to tell how these sprites will work without seeing them in their natural environment. I take it they'll be rotated too, at pixel fractions?

Top-down views of humans are really difficult to do well. In fact, I don't recall ever seeing it done well, and a lot of games have tried. Z looked great, and it used a slight angle. Of course, that means you have to paint all the angles * all animations...
http://www.bitmap-brothers.co.uk/downloads/images/z/index.htm
Hmm, looking at the game now, I see that they did use a lot of monotone gradients on those troopers.

Paradroid 90 tried top-down with lots of gradients. The animations of the arms and legs moving is what made the humanoids look as such. We never see humans from straight above, so that's probably why we have problems recognizing them.
http://ourworld.compuserve.com/homepages/paradroid90/paradroid90/frames.html (goto Droids section for a sprite sheet)

[saimo]

I'd skip most of the gradients, as they only make things seem blurry. The sprite should read graphically first and foremost. You need to create areas of contrast if you want things to 'pop'. Gradients creates blur and often makes things less graphical. Never do a gradients because you happen to have colors in the palette for it (Like: "oh, I have an even brighter yellow, now I just have to use that... heeey, I can go all the way to white now!").

Fully agreed.
I want(ed) that sprite to be strongly characterized by a specific hue, but that was not getting me anywhere...

If you do use gradients, try a hue shift for the shadow (by using a hue shift in your ramps perhaps).

Right, this looks like the way to go.
Admittedly, I had already tried a bit, but the problem was making the head distinguishable from the body and, at the same time, making the whole stand out from the background. I guess I did not try hard enough.
Monday is a festive day here, so I will not be at home most of the day. But I hope to be able to work on it on the following days.

Perhaps all shadows should have something in common, like relative temperature, or saturation.

I have not drawn all the sprites with this (maybe nice) idea in mind, so probably it would require a major rework that I can't afford right now (I'm too busy with other aspects of the game). Besides, although I am sure that you guys here would be able to do draw infinitely better-looking sprites, the current ones look acceptable during the actual game action. Finally, considering that this is for an additional theme I am going to distribute for free, I am afraid I cannot invest time for testing this suggestion (which is much appreciated anyway). I just would like to improve that sprite that really bothers me, so that I can pass to making the audio part of the theme (unfortunately, at some point one has to draw the line).

Still, it's hard to tell how these sprites will work without seeing them in their natural environment. I take it they'll be rotated too, at pixel fractions?

Rotated, yes; pixel fractions (if you mean interpolated rotations), no - for performance reasons, sprites use nearest-neighbour rotation, whereas the whole playfield uses interpolated rotation, which is used also to soften the jaggies of the sprites (the final result does not look too bad at all).
Here are a couple of screenshots showing the current sprites in action (and in movement they look better):
.

Top-down views of humans are really difficult to do well. In fact, I don't recall ever seeing it done well, and a lot of games have tried. Z looked great, and it used a slight angle. Of course, that means you have to paint all the angles * all animations...
http://www.bitmap-brothers.co.uk/downloads/images/z/index.htm
Hmm, looking at the game now, I see that they did use a lot of monotone gradients on those troopers.

Paradroid 90 tried top-down with lots of gradients. The animations of the arms and legs moving is what made the humanoids look as such. We never see humans from straight above, so that's probably why we have problems recognizing them.
http://ourworld.compuserve.com/homepages/paradroid90/paradroid90/frames.html (goto Droids section for a sprite sheet)

I do not absolutely think I will finally give you such a treat, but I must say I am quite happy with what I have (again, I am sure it could be done better) - if you are curious, you could have a look at this video.

Thanks a lot for the suggestions, I will see what I can do and keep you posted here

saimo

[saimo]

Played a little with the palette and tried hue-shifting (again): although things did improve, I am not able to get effective contrast between head, body and background in such little space. So I gave up on hue-shifting, redid the shading (using the darkest shade of red more for AA than shading), went for black for the body (because it is what contrasts better with the head and, at the same time, with the background) and defined the dorsal crest:



In action it looks sufficiently readable and I am sure that, when animated, it will look even better.

More thoughts are of course still welcome

saimo