My Platformer Sprites / UI

[Petas]

21/3/09 Update:
Newest:--->
See the bottom post for more on this sprite.



New sprite history:
--->--->--->



***********************Old post below***********************:


Hello.. I'm kinda new here (first post, as you can see). I've been lurking and reading posts for a bit and this seems like an awesome place to get critique and opportunities for self-improvement. I'll admit, at first I was a little intimidated, probably because most people here are extremely talented, and I'm more used to drawing on paper than with pixels, but I figured I might as well post this.

These are a few sprites that I've done for a large game that I've been working on for a few months. It's a platformer in the same style as the majority of the Megaman series (mostly drawing inspiration from Megaman Zero). The UI is the most recent piece, I'm fairly happy with it but I wonder if it can be made any better. The only problem I have with it is that it might be slightly too tall and occupies too much of the screen, but that's relatively minor in my opinion.

EDIT: Please note I didn't draw the portrait myself, it's a placeholder at the moment.

UI By itself (these are meant to be viewed 2x btw):

Each character has a different background for textboxes and similar screens:


In-game with same-style textbox:




Aside from the UI, there are mostly only placeholder sprites since there's going to be a massive amount of spriting to be done (10 characters, 20+ attack animations each plus more..) so I wanted to hammer out the basic style first before I start on them.

Starting with the oldest sprites, where I didn't give a care about specific colour selection for the palette:

A simple fairy maid enemy - This one was just done in a hurry in order to have a placeholder graphic for an enemy, which is why the pose is so odd. It's supposed to be a flying enemy that kinda hovers around slowly. As for the techniques, it was done pretty badly; I did an outline of solid black with varying transparency and then made the entire outline slightly transparent.


First player sprite - I took the Zero sprites from Megaman Zero and drew alongside it a blank outline for all the frames, which I had then planned to use as a template for all my character animations by drawing and colouring in the skin, clothing, hair, etc. over the template.

Also I am aware that the walk cycle is a bit off, the main error being that when the close arm stretches forwards it remains there for 3 frames, yet when the other arm comes forwards it's there for 1. The ponytail also used to flap around as she walked; that's just a temporary copy/paste head since I wasn't sure if I should keep the sprite or not.

 I was happy with this for a while, but later on I decided to stop drawing the outlines first and start filling in solid colours for the body parts and shade afterwards, basically ditching the outlines altogether.

However, this was not until after the next sprite:
Improved enemy sprite - This one is a bit better and actually one that I'd probably keep in-game, maybe with only slight modifications. I actually paid more attention to the palette when drawing, and the outline is far less apparent (or should be). The only problem I have with the sprite is the hair, since it looks too "solid" like a helmet and not really hair-like. For the record, it's a fairy so its body proportions are supposed to be a little off, but we're dealing with cartoony sprites anyway so it probably doesn't matter much.


After this came a sprite that I'm fairly proud of. It's a different player character. I drew it without any outlines at all, by drawing in solid colours first then shading/highlighting to make the shapes more apparent. I like everything about this sprite except the cloak/cape, and perhaps the eyes. I'm having problems with the eyes on all my sprites, especially the character ones; those vertical lines might look cute or whatever but I'm worried it might be hard to display emotions and characterization.
So I tried making newer eyes, not sure if it worked that well.


After seeing the results of the last sprite, I tried redoing the first character sprite in the same style. Too bad I didn't plan out a proper pose or anything. The character looks a bit weird.


All of the "new" sprites that show the palette should have 18 colours each. I tried to limit myself to a small palette mainly to be more consistent with shading and style across the entire game, but I am not limiting my game to a single palette restriction. That's also why the textbox background has that smoothly shaded yin-yang orb.



So... any feedback would be appreciated, especially on the character sprites since I'd like to settle on a basic style for character art so I can start making the rest of the sprites consistently.

(By the way, the characters are not mine, they're from the Touhou series of games, but the red/blue white-haired character's appearance is a redesign that I thought of myself after watching Gurren Lagann  I can post the reference sketch later if anyone cares. I'm also planning to redesign as many of the player characters' designs as possible, including the other character in this post.)

[EvilEye]

This may surprise you, but I think the fairy maid is the best out of all the sprites. I think you should go with that look for the rest of the sprites ( could use some more shading / detail, but not too much, keep it light, like the portrait ).

I think the other sprites are too stretched out and detailed for this type of game.

Take a look at some other anime platformers. They all have simple characters with short limbs and usually very short legs. Its easier to draw and it looks nice, if done right.

Now, on the subject of animation. I think you need to start with a wireframe animation. Then once you have the animation exactly right and the proportions look right, build the sprite around it. But I am not the most experienced here when it comes to platformers or animation in general, especially not in the anime style. There are some people who frequent this site that are pro's at that stuff. Hopefully they will post here and give you some pointers. Also I think there are some tutorials in the links section.

[Petas]

If you mean that first fairy sprite with the blond hair (the black-clad one is supposed to be a fairy maid as well, although I didn't say in the post--my bad), it is a little surprising since that was in my opinion the shabbiest one, but I think I see your points about the other sprites being too detailed. Aside from that first enemy and player sprite, I was trying to imitate the style of the sprites from a fighting game, however those sprites were much larger and could fit in those details more easily. One thing though: when you chose that fairy maid sprite, was it the proportions that stood out, or the art style (seems to focus more on bolder outlines) ?

Also, when you say the other sprites are too stretched out, do you mean the sprites look too skinny, instead of having that sort of 'chubby' anime style? I noticed that my most recent player sprite at the bottom of the post looks a little lanky, along with the white-haired one on a closer look, but I also intended for the players to be larger than the fairies (they probably should be around the same height/build as the black-clothed maid).

I forgot to mention that I did not draw the portrait, it's a placeholder cropped from a pic I found on my hard drive which I probably should not have included...

Thanks for your response and criticisms !

[EvilEye]

If you mean that first fairy sprite with the blond hair

The blond-haired one.

One thing though: when you chose that fairy maid sprite, was it the proportions that stood out, or the art style (seems to focus more on bolder outlines) ?

I'd say it was the cleaner look. The others are too contrasted, which I think makes them harder to see, and kind of kills the anime look.

Also, when you say the other sprites are too stretched out, do you mean the sprites look too skinny, instead of having that sort of 'chubby' anime style? I noticed that my most recent player sprite at the bottom of the post looks a little lanky, along with the white-haired one on a closer look, but I also intended for the players to be larger than the fairies (they probably should be around the same height/build as the black-clothed maid).

I mean the sprites should be more compact. I searched VGmuseum looking for a good example, but this was all I could find. Platformers just aren't my forte.



Actually, that is probably still too large ( proportional to your screensize I mean ). It's not that you can't do it that large as a rule, but you have to realize the larger the sprites the longer its going to take you to finish. If you are just starting out you will overload yourself so much you will quit.

I would say 2/3 height of your animated sprite would be a good size. The important part is to keep it simple. Simpler sprites are easier to animate.

I forgot to mention that I did not draw the portrait, it's a placeholder cropped from a pic I found on my hard drive which I probably should not have included...

You need to mention if you use something that is not yours otherwise we assume you made it.

[Petas]

Thanks for trying to find an example sprite for me to see, I appreciate it. It shows for me "hotlinking isn't allowed" but I was able to find the game from the site index. The problem with my sprite scaling is probably due to me using a Megaman Zero sprite as a baseline without taking into account the screen dimensions, especially with that huge lifebar display at the top shortening the playable area.

I'll have to think about what you said and consider redoing the sprites on a different scale, but any re-spriting will probably have to wait til the weekend. One of the reasons I made the topic was to try to get my mind off the pile of schoolwork waiting for me on my desk, but I have to get to it sooner or later so I'm going to focus on it first.

Thanks again for the quick response.

You need to mention if you use something that is not yours otherwise we assume you made it.

Noted, and edited the main post; sorry any misunderstandings.

[Accident]

Critique will come soon~ -4:50 AM- But for now, sleep be me. 

Edit: Aa. -refreshed-

Now that I've slept some good eight hours (and missed my school bus by, erm, four hours), I can critique.

I also believe that the blonde fae had the best style to translate anime from-- nice, simple shading, definite outlines, and overall the one that had the most potential of all.
Let's first start with what I thought was the biggest problem. I dunno about you, but I tend to think sel-out is rather unflattering on a sprite, especially when black: I feel this way because a game has changing backgrounds-- eventually, a sel-outlined sprite will look unflattering, whether it be on a light, or dark background.

So, off came the sel-out. :'D

Personally, I thought the colours were quite washed out. I'm not sure what program you use, but if you use Paint, you might want to opt for another program for colour-choice. I use Artweaver, more specifically the 'Curves' tool and the 'Hue/Saturation' adjustment, in order to apply more contrast to my pallette and to experiment with other variations of it. Once I'm happy with this, I hand-pick the colours I feel still need a bit of work. I find this to be a good way to work-- I'm not sure about you. And voila! Vibrant colours ahoy. :'D

Then there came the change of form and shading~ limbs, even if cartoony, aren't clean cylinders-- they have a certain shape to them. As you can see, the style I was going for opted for more... oval-like limbs and poofy hair/clothing. 's much alike to that chubby anime style everyone loves. I still attempted to keep the style, as in the definite outlines, and the simplistic shading-- but I lessened the use of black. Black is a very harsh colour, especially on a cutesy style. Thus, I used it sparingly-- only on the outline of the entire sprite. This way, the inner (coloured) outlines wouldn't be so harsh, and the sprite itself would easily separate itself from the background.

Then expression! She's an enemy, yes? Thus, give her an angry face or something! Even the average-Joe enemy needs to have some sort of character.

Finally, I unified the pallette slightly. Some colours used on the hair was used on the skin and such. I can't explain this-- it's all based on experimentation.

Now, here comes the actual critique:

I believe you've a good grasp of pixel-art, but I also believe you need to refine it. I say study some great artists' styles, and see which one works with you the best. Also, many of your sprites retain different styles~ it would be good to pick one you stick with.

Too many colours, btw. I still think I had too many colours for the sprite I edited, but still. Pixel art is different than colouring or penciling; a million shades may look great on a coloured picture, but it doesn't portray smoothness on pixel-art-- instead, it portrays something busy. The very beauty of pixel art is the amount of smoothness one can portray with such a small amount of colours-- think of it as... gesture drawing. It's about illusion~ make the person believe there are many colours and shades, when there aren't.

Even look at the edit below, such as the shininess of the hair and shoes.

Also practice on colour-choice-- your colour ramps are relatively-safe and desaturated. Think more of hue-shifting, especially when it comes to shadow. See here:



Naturally, I think of this mentally, but a visual guide helps--

When it comes to hue-shifting, I think of a line coming diagonally through the wheel. See here, it comes from purple, to pink, to red, and finally orange. I consider this the highest form of hue-shifting for red... for the most part. Of course, a diagonal line isn't perfect-- I labeled the best colours with yellow squares. Thus, the shifting looks like this:



And after using Artweaver and finally editing the colours myself, I get this:



And with this, the darker colours become purple, and the lightest can become yellow. There's more I'd like to say, but I'll leave it like this for now. c;

8D Please tell me here, or PM me if you have any questions.

[Kindred]

If you're going for a simple anime look, some of my comments may not apply as I tend to clutter my pixels intentionally.

The first thing I notice when I see your newer Reimu sprite is that her stance seems unstable. Try to straightening out her legs and repositioning her head. Also at a glance, she looks very washed out. Try to bring attention to little details that make the character more identifiable. For example, highlighting the red strings in her detached sleeves or the frills of her skirt. I noticed you have a lot of colours that could be merged with other ones or removed too. What I like to do is look at my sprites at 1:1 and ask myself: can I see the difference the colour I'm adding is making?

I don't like words so I made an edit to further show what I mean:

I organized my pallet in a tree-like structure so you can see how I unified similar colours too.

I don't post too often here either, but I felt inclined to post since it's Touhou.

[Noveroth]

I'm not Seeing Reimu in that, like... I can see where you're going with it, but.

Also Alice's doll looks a little odd.


Sorry if i'm vague, but I dont know what i'd do to it, I just notice something off from the character.

[Petas]

Also Alice's doll looks a little odd.

I don't think that was supposed to be Shanghai when I drew it but I now realize the design is pretty much the same (honestly, at the time I was just drawing whatever came to mind)...And I think simply pointing out that something is wrong is still better than letting me go on believing I'm making awesome sprites when I'm actually not.

Cool edit Kindred, you were able to chop the colour count down by 7. I know what you mean about the colours having an unnoticeable effect -- even while I was drawing the Eirin sprite I was considering merging the dark brown and dark red, but I'm probably not used to meshing colour ramps together so it felt weird to merge the two.
I also noticed you made the head smaller, then I tried to figure out why exactly you did it, now it kinda looks like my Reimu's head is about to explode. Funny how it looks good to me while I'm drawing it.

I don't post too often here either, but I felt inclined to post since it's Touhou.

Hooray!

Thanks for that edit, Accident, I like how you took the sprite and went in a different style with it. It probably coincides with what EvilEye was saying about style. Looking forward to more critique (even though I'm still not quite used to it.. all those years in school where the kids would gather around my desk because I was doodling made for a squishy ego, apparently -_-)
EDIT:
Yowza, that is a lot of information. Thank you for going through the trouble of sharing all of that.

On the topic of sel-out, I'm no expert but from what I've seen it seems almost equally liked and disliked and some would say that the style you used in your edit leans toward a more cartoony style, where my original intention with the game was to try slightly more realistic looking art (since many Touhou games are lighthearted in nature I thought I'd try to make a  more intense/serious atmosphere, as something new). However, the more I think about shifting gears and going with a different style, the more I think about the possibilities of a brighter, more cartoony style -- for example, the juxtaposition between cuteness and the seriousness of the later parts of Cave Story really grabbed my attention when I played it.

For that particular sprite I used Photoshop, drawing solid colours under a pure black outline which had varying transparency (I drew the outline on an alpha channel then filled it with solid black).
I dulled the colours on purpose because I thought that having over-saturated sprites would be hurtful on the eyes, but now I'm recalling certain posts on this very board suggesting that players and enemies -should- be highly saturated if there is no other visual mechanism separating them from the background. I guess I never really noticed how washed out the sprites actually were (I suppose this is where the importance of mock-ups comes into play?). However, for the rest of the sprites I hand-picked every colour in the palette and used GraphicsGale to draw (I had heard that it is more convenient for spriters, and having used it, I won't disagree).

The colour wheel diagram is interesting, since I had never thought of using one as a tool to determine colour ramps (to be honest I haven't been much of one to study art theory or anything.. I guess I had a natural talent for art as a kid, took a few art classes in middle school and that was it; other than that it's just a hobby). Hue shifting is definitely one thing I am -not- used to at all, along with merging or unifying the palette like Kindred and yourself have pointed out (even using that light brown as a highlight on the white-haired girl's boots felt incredibly weird to me, since it was supposed to be a skin colour!)
However, I did use a very minor amount of hue shifting when I chose my palette (not that it actually helps mesh the colours together in a useful way), but instead of a colour wheel I just thought "shadows more blue/purple, highlights more red/yellow".

I know I didn't touch on everything you said but rest assured I've taken it all into consideration.

Thank you all so far for the feedback -- I'll be trying my best to learn from it. Expect another attempt from me within the next few days (hopefully).

[Petas]

Tried to do something similar to Accident's edit. Forgive me if I totally butchered the style. I've also just finished the sprites at 4:30 AM so fatigue may or may not be hindering my efforts...

The following are WIP:

New sprite
---->
Colour ramps I used are on the side. The colour marked with black lines is one I am considering removing to make the palette more efficient. Thoughts?
(Also I missed a stupid white pixel on her right shoulder. Grr.)


Quick-shrinked sprites

When I made the sprite I intended it to be smaller than my earlier ones, but it ended up being exactly the same height somehow (just with different proportions). So I used square marquee selection in Photoshop and tried to shrink the sprite a little, just to see if it would look any better. I know some parts look a little off with the downscaling (the smallest ones look a bit stout), might fix them later.
Also I experimented with the eyes a bit. I like the first set better but the lack of an eye outline seems to leave little room for expressions and such (unless I go with the exaggerated anime style and replace the eyes with ">_<"'s, etc.)


I still seem to be having problems merging colour ramps, especially even between the red and skin colours. In particular I had problems with the shade marked in the colour ramp -- no matter what I did my eyes didn't like it, it was either too vividly red or not red enough. The colour I settled on looks out of place even still. Removing it from the palette makes the red ramp look a bit better but then the skin tone ramp might be too contrasted. I'll give it a try as soon as I wake up tomorrow.
EDIT: The darkest purply red also seems a bit too dark to me on a second look; can't nearly tell enough of a difference between it and the black. I wonder if I should lighten it and the other dark shades when I remove that troublesome one.

I'm also not sure what other colour ramps I should be aiming to create. I know from reading palette challenge threads and such that pure greys can be used universally to create nice looking gradients in some situations, but I'm hesitant to try.

Also, when I tried adding her shoes it didn't look quite right so I left them for now. Going to add them tomorrow.

UPDATE:
Removed the colour from the palette and made minor adjustments to the remaining colours; fixed skirt shading, tried outline on stick thing, made sprite smaller like in the above sprites.