Outlines and Backgrounds

[NaCl]

I'm having trouble with the main character in my game, being placed against different backgrounds. Here is an image to illustrate:



The first three are against a low sat background, with decreasing brightness. The last three are against a high sat background, with decreasing brightness. As you can see, against dark backgrounds, especially saturated ones, then the border looks very weird, especially around the legs. Against the lighter background it looks alright.

I'm mainly looking for ways to fix this, but crits on the character are welcomed too. Thanks!

[ragtime]

Is the sprite finished? The outline problem would be solved if you are planning on using AA or something to smooth out the jagged lines.

[CrazyMLC]

I like it; just remove the banding on that arm and it'll be great!

If you don't mind me asking, what are you going to be using this in exactly?

[NaCl]

Thanks for the tip ragtime, I added in some internal AA and I think it helped quite a bit. Still not perfect but significantly better then before!



Thanks MLC! I quickly tried to deband her arm but accidentally gave her a case of the old noodle arm. I'll work more with it. You did mean the frontmost arm, right? This is the idle frame for the main character in my game (Frauki's Adventure). Here is the google code page:

http://code.google.com/p/trygongame/

[Tourist]

Re: the outline question in the original post.  

The skin tones have a high lightness and a low chroma (saturation).  The skin outline has a med-low lightness and a med-high chroma.  If the background also has a med-low lightness and a med-high chroma then the outline will disappear (or seem very weak).  If the background has a low lightness and a high chroma then it creates a ramp from background to outline to skin in both the lightness and chroma components.  The character becomes connected to the background rather than separate.

Possible solutions:
Keep the character on a background with low saturation and medium or higher lightness.  This preserves the contrast with the outline.

Switch to a black outline around the figure (but not internal to the figure).

Change the outline based on the background colors.  This can probably be done on a level by level basis, depending on how the game is set up.


On the figure:
The hair is cute.  It reminds me of the style of Ben Caldwell (a cartoonist / comic artist).

The figure has a square face and broad shoulders making the character seem androgynous.  The position of the green stripes, both shifting the left, makes it look like the character is hunching over.

A sequence of edits:



1) Original
2) Moved the chest over to straighten the hunch
3) Tweaked the hair, and face.  Crushed the shoulders and now the mass is carried around the hips.  I didn't know at the time what sort of game this was for, I think this would match the jump and run style on the web page you linked.  The edits after this would be tough to animate.
Changed the outline to a dark blue, to make sure it contrasted with the background.
4) Added mass to the legs to pull the center of gravity down more
5) Finished the legs (chicken legs!).  The shorts are angled to match the legs, but need to be a pixel or two longer down the thighs.
6) Converted to skirt/dress.  Needs some color.

Thanks for posting, this was fun to edit.  Good luck with the game!

Edit: I decided I didn't like the chicken legs and the skirt was too short, so one more:

Which is probably useless for a run and jump game, but I could not let it go. 

Tourist

[NaCl]

Wow, thank you so much Tourist! Using your edits I improved greatly a number of issues that have been bothering me for a long while, but couldn't figure out what the source was. The main one was the arms, they never seemed to hang naturally. Feels much better with narrower shoulders, and makes her more feminine too. The second was her face, something wasnt quite right, but I think now that the problem was the shape of the hair around her face. On the original problem, I darkened the outline, and desaturated it a bit. That plus the internal AA really helps! Here is what I've come up with:



I really like what you've done with some of the later versions, but #3 I think is where I am going to aim. Thanks again!

[Jad]

You need to work flatter, I think, with which I mean, neverminding the outlines sometimes and instead trying to create bigger more readable blotches of light and shadow.

Work more with shadow. Try to find parts of her that you can just color darker to make her form stand out. I like putting a block of shadow under the bangs, for example, it contrasts nicely with the whites of the eye, too. Maybe split the hair up into two areas of light and shadow? Or just make it darker (and maybe add color tint?) for contrast and readability?

The individual bright pixels of her farther arm is distracting, might as well just fill them in with outline color. Etc.

This is really cute. There is something very mundane about this girl that I like. You've also created a very pretty face with few pixels and some subtle play with light and shadow. Good mastery of the little squares there!