AuthorTopic: GR#222 - Beatemup Sprites - Anatomy, Animation  (Read 9286 times)

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

GR#222 - Beatemup Sprites - Anatomy, Animation

on: May 25, 2014, 10:35:35 pm
Hello, I'm new here and to spriting in general, so I'm looking for advice.

This is the main character, with the finished colouring



I'm not good at all at antialiasing, and the folds are pretty simple, so any advice in those areas is especially welcome.

These sprites have unfinished colouring, so I post them mostly to show the animation.







I'll post some enemy sprites later.

Offline mrpixel

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #1 on: May 26, 2014, 02:36:04 am
This is very nice work. The character has great resolution and personally I like it without serious antialiasing. The scale is excellent also.

I'm not an expert, so I also have some beginner questions for you about the animation. Looking at your lineart, it's very clean and also proportionally correct. Do you pencil sketch, scan, and trace? Do you work entirely in digital? For the experts here, it's probably very obvious, but could you please mention your workflow and software you use? For example to animate, does your software support onion skin and etc.

I myself have access to pro motion, graphics gale, aseprite and grafx2. I also tried pixeling with gimp and photoshop, but I have not been able to successfully find a good way to animate most of my thumbnail sketches or characters. No real workflow, so I'm always looking to find a good example to animate character sprites.

Offline Neophos

  • 0001
  • *
  • Posts: 24
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #2 on: May 26, 2014, 10:00:54 am
Is the lineart cleaned? There are still some oddities left. In the fourth one, the double punch, her right foot is making some really weird movements. I guess that all of them look fine alone, but in motion her foot boils, and doesn't really follow the ground. The same goes for the lines for her knees, which goes in and out of existence. I believe that adding or removing the lines, even if it makes every standalone frame a bit less proper, makes for a less janky animation.

The second one, the crouching punch, she throws her punch from her chest. That makes it kind of a slap instead of a straight punch. The knife also moves a lot. It would probably look better if it was held a bit more still.

I really like the speed on the low swing with the knife, with a large swing being done in one frame. The other attacks look a lot weaker because they have more inbetweens. They would probably look snappier and more powerful with less frames between start of punch or stab and the full extension of the arm.

Offline rikfuzz

  • 0010
  • *
  • Posts: 427
  • Karma: +1/-0
    • View Profile
    • twitter @hot_pengu

Re: [C+C][WIP] Sprites for a beat'em up

Reply #3 on: May 26, 2014, 12:15:00 pm
Character and animation looks pretty great, an incredible amount of work at this size.  Are you rotoscoping from something?  What's your process? Run pops a bit, you have a couple of close poses on the front leg (I think?) that need distributing better, so it doesn't slow down on the high pose. 

I'd maybe look at your palette, not much contrast in it:

Offline shark jacobs

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #4 on: May 26, 2014, 08:35:46 pm
pulling that punch in second to last gif

that's a "hey buddy" punch, not a take-someone-out punch

if you change the timing, ie take out the frame with the arm behind her neck, maybe replace it with a frame at the end of the punch to wait a beat before she starts to pull back.

its just to circularly fluid, doesn't have much weight to it

looks really good though, i like it without anti-aliasing

Offline wolfenoctis

  • 0011
  • **
  • Posts: 787
  • Karma: +2/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #5 on: May 27, 2014, 07:29:38 am
This is a good start, however the pose seems a bit stiff and static, also some proportions are off. I made a rough edit to illustrate:


Good luck, cant wait to see the other sprites  :y:

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #6 on: June 05, 2014, 10:08:16 pm
Hi, thanks for the replies.

mrpixel: Yes, I draw on paper with pencil (I have a grid drawn on tiny 10cm x 10cm sheets for reference), then scan and trace. It's probably not the most effective way of doing things, but I don't have a tablet and I'm too accustomed to pencil and paper.

Neophos: The animations are still a bit rough as I tend to correct stuff when I color, but I hadn't noticed the problem in the feet, thanks.

As for the punch, the game will have 3 attack buttons, punch, kick and slash, with punches being light attacks, kicks mids, and slashes hards, so it's supposed to be a quick light attack. You are right about the knife, I'll try to keep it more static.

I'll see if I cn change the timing of the other moves a bit. I put more frames on them since they are special moves and need to be slower, but probably the timing is off.

rikfuzz: No rotoscoping, but I referenced the run from Eadweard Muybridge's "The Human Figure in Motion". The attacks I pre-plan very roughly on paper and then draw them when I have them mostly defined. I referenced timings from SNK and Capcom fighting games. I'm not ultra methodic like real animators, which in the end probably makes me waste too much time. I'll check that run, thanks. You are right on the contrast bit, I'll try to make highlights stand out more. 

shark jacobs: I took out a frame on the startup and I think you are right, it has a bit more impact. I think I put too many frames on the startup of some attacks, with bad timings. The woes of being a noob at this haha.



wolfenoctis: Which particular proportions would you say are off? I tried to make legs as high as the upper body, the whole body roughly eight heads high, the waist a bit less than one head, etc. I remember my very first sprites being REALLY off proportion-wise (like the waist being like 35 pixels wide haha) and not being able to tell by myself until a lot later.

Some other animations, with unfinished colouring.








A regular enemy with unfinished colouring. Suggestions for the shield colours? Not sure how to do the mail either. Some colour theft herer, heh, the skull I got from Bornnam's portrait in Shippu Mahou Daisakusen, and the metal colours from Cyangmou's zombie knight pic. I'm terrible at palettes, sorry.

Offline cels

  • 0010
  • *
  • Posts: 259
  • Karma: +1/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #7 on: June 05, 2014, 10:35:32 pm
Can't believe I didn't see this before now. If there's one thing I want to see more of in video games, it's HD pixel art games. Same technique as was used on 320x240 pixel monitors, but adapted for 1920 x 1080 pixel monitors. I hope this stuff is used for a game.

The knife attacks look really good. But the punches look wrong to me, particularly the one where she's standing and hopping forward with a jab. Now, I'm a bit of a purist when it comes to close combat in computer games, because I always want as much realism as possible (unless someone's shooting a hadoken fireball). Good, realistic techniques are just more beautiful than sloppy techniques. I don't know why, but I think the eye picks up on awkward movements, like when you see someone who doesn't know how to run or dance.

Here are my thoughts in regard to this hopping jab.
- If she's going to step into her punch, it would be better if the punch landed the second her foot hits the ground. That gives her momentum as she's pushing off her rear leg, so the power moves from her feet to her hips and all the way to the punch.
- It's better if she has a good base when she lands the punch. Right now her hips tilt forward when she lands the punch, bringing up her rear leg from the ground as if she's tipping forward, off-balance. Instead, her hips should be level and her rear leg should be pointing in the direction she's punching, so she's using her foot to push herself forward, like she's running.
- Lifting the elbow is a common mistake when punching with the rear hand (a cross), but it's actually kind of awkward and difficult to lift the elbow like that when jabbing with your lead hand - especially because she's stood sideways, instead of angling her shoulders towards her enemy. And it doesn't look very pretty either, it just looks like an untrained girl punching. Which is fine, if she's supposed to look untrained. But I think it would look more natural and prettier if she didn't lift her elbow like that. I'm biased though. I'd like to see her hand extend the same way she pulls it back.
- She's either punching a midget or hitting a normal person in the chest. Why not aim for the head, or the stomach?

Some people here will definitely disagree with me, arguing that it's better to exaggerate movements rather than worry about realism, for the sake of dynamic animations.

In regards to the nazi skeleton enemy, I would have to say:
- Way too skinny. I know it's a skeleton, but it just looks comical to see a skeleton with normal proportions wearing clothes. Tiny waist, narrow shoulders, narrow hips, etc. I would exaggerate the dimensions, especially of the shoulders and ribcage, if it's intended to look at all intimidating.
- Helmet looks like it doesn't fit. It looks like a small boy wearing a fireman's helmet, which almost gets in the way of his eyes. I would raise it a little bit or change the design.
- The stance is very awkward indeed, like it's about to fall backwards. This makes the skeleton look even less intimidating. I would either make it look stout and powerful, like a golem, or hunching forward and dragging its feet, like a zombie. Probably the former, since it's supposed to be a soldier.

I don't mean to sound too critical, this is way better than what I could have done. Just the thoughts that popped into my head, with no filtering :)

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #8 on: June 05, 2014, 10:53:46 pm
I'm not going for realism, my influences come mostly from Capcom / SNK fighting games rather than real martial arts, of which I don't really know much about, so I can see the attacks looking awkward to a martial arts fan. As for the punch height, I don't want it to miss crouching enemies. It's based on Fei Long's Rekka Ken, and it's a multi-part attack too.

I'll see what I can do about the skeleton. I don't want to make it too exaggerated, but I'll see if I can buff him up a bit. I won't make him zombie-ish, but I have other enemies that will behave zombie-like, so I'm sort of going to use that idea after all, hah.

Don't worry about being too critical, that's the sort of criticism I'm looking for.

Offline wolfenoctis

  • 0011
  • **
  • Posts: 787
  • Karma: +2/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #9 on: June 08, 2014, 07:56:18 pm
Mainly the upper legs in relation to the lower legs and torso, also the head is too short for a person of that height. If you want to improve your proportions it's best to study real people, even if you're going for a more stylized character. I had some time to do a proper edit and came up with another fighting stance:

I noticed that knife fighters usually have the knife closest to the opponent, that way it acts as both a weapon and deterrent  ;D

Edit: Great spot Harvey, guess I was too focussed on the legs think I messed up somewhere when I added the clothing, fixed version:
« Last Edit: June 09, 2014, 12:18:29 pm by wolfenoctis »

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 451
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: [C+C][WIP] Sprites for a beat'em up

Reply #10 on: June 08, 2014, 08:35:42 pm
@wolfenoctis You killed it man. Great edit. :) One thing is catching my eye, her boobs are too soggy (like grandma's  :crazy:), probably because they are to low or the belt is too high and distorts perception.
« Last Edit: June 08, 2014, 08:37:48 pm by HarveyDentMustDie »

Offline Phlakes

  • 0010
  • *
  • Posts: 236
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #11 on: June 11, 2014, 05:08:04 am
For the animations, one thing you should really focus on is punchiness. You're almost there with the speed of the actual attacks (i.e. the gap between the windup and strike), but they still feel kind of slow and muddy.

As a general principle, the animations should have a smooth gradient from anticipation -> attack -> follow through.

Come to think of it, all of them but the knife attack are missing the follow through entirely. It makes a huge difference in showing momentum, a punch that take a couple frames to come to a stop feels way more powerful than one that stops immediately on impact.

Something as simple as deleting a couple frames to speed them up and adding some follow through would probably really improve them.

Also, when you're animating things like these, most of time less is more. Look at this for example-



The slashes are just one frame each, so the sword jumps from being all the way back to all the way out, but the arc implies that it moved super quickly that entire way, and the combination of the arc fading and the arm slowing down gives that movement a little accent that makes it more fluid and believable.

Think about pixel art in general- you use a small amount of resources to give the impression of something greater than you're actually making. So instead of padding the animations to make them smoother, try making it feel as good as possible with as few frames as possible before you worry about how it looks. In fact it would probably be better to just sketch it out with a stick figure until the movement is right. Like wolf brought up consider dramatic poses.

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #12 on: July 03, 2014, 08:56:40 pm
Wolfenoctis: The body is eight heads tall, a basic unit of proportion from traditional art. Making the head bigger would either make her childish or stocky, so I went with eight heads.

I like some of your edits, but I can't use most of them. The pants look nice, but I want to go for something tighter so I won't put that many folds, and the style is too realistic and I'm going for something a bit more anime-ish. I really like the knife, but it has to be a double edged dagger (because some of the slashing attacks I made would look strange otherwise as she would be trying to cut with the back of the knife) and having the knife on the other hand would force me to redraw a lot of stuff.

I took the colours you used for it and tried to make a dagger with them. Also changed the pose a palette a bit.



Couldn't do much more on the pixel front since my monitor broke so I'm stuck with the pencil and paper side of things for a while.

Offline Mr. Fahrenheit

  • 0010
  • *
  • Posts: 327
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #13 on: July 03, 2014, 09:36:23 pm
I just checked in gg and your character is 8 heads tall when crouched. If you corrected it for when she is standing up straight and tall then it would probably be more like 10 heads tall. So her head is really a little small.

Offline FrostPumpkin

  • 0001
  • *
  • Posts: 95
  • Karma: +0/-1
    • View Profile
    • Tumblr

Re: [C+C][WIP] Sprites for a beat'em up

Reply #14 on: July 03, 2014, 11:04:52 pm
My main concern here is the tights being way too long. I think that's what makes proportions weird and the impression that the head is too small (it might be tho)

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #15 on: July 17, 2014, 09:27:47 pm
Yeah the problem is the thighs not the heads. The torso is 4 heads tall as it should be, but the legs look longer than they should be. Is this better?

Offline Gil

  • 0100
  • ***
  • Posts: 1540
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: [C+C][WIP] Sprites for a beat'em up

Reply #16 on: July 17, 2014, 09:57:11 pm
Yeah the problem is the thighs not the heads. The torso is 4 heads tall as it should be, but the legs look longer than they should be. Is this better?


Just a reminder that there's King of Fighter sprites that have the same measurements as yours. If it looks right, it's a valid stylistic choice I feel. If people genuinely feel like it feels off, you'll need to fix it though. I personally don't though.

Offline rikfuzz

  • 0010
  • *
  • Posts: 427
  • Karma: +1/-0
    • View Profile
    • twitter @hot_pengu

Re: [C+C][WIP] Sprites for a beat'em up

Reply #17 on: July 18, 2014, 09:12:39 am
Yeah..  9 heads tall, totally fine.  This is what all fashion illustrations are drawn like, idealised maybe but certainly not absurd. 

Offline Gil

  • 0100
  • ***
  • Posts: 1540
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: [C+C][WIP] Sprites for a beat'em up

Reply #18 on: July 18, 2014, 11:38:15 am
The new one IS better though, the thigh to lower leg ratio was off. I really like the new version in terms of proportions. One problem I see right now is her hair, it has no volume. It seems like brown paper glued to her skull. The haircut seems fine, so it's just a question of puffing it a little, so it doesn't stick so closely to the skull.

Offline PypeBros

  • 0100
  • ***
  • Posts: 1209
  • Karma: +2/-0
  • Pixel Padawan
    • View Profile
    • Bilou Homebrew's Blog.

Re: [C+C][WIP] Sprites for a beat'em up

Reply #19 on: July 23, 2014, 08:12:27 pm
confirming the knee-position issue: lower legs are too short compared to tights. You have impressive technique and ambitious animations, btw.

One thing bother me with the run animation. speed should be maximum when the elbows cross the spine, and slow down/be ammortized at the extreme of the pendulum.

Offline Gil

  • 0100
  • ***
  • Posts: 1540
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: [C+C][WIP] Sprites for a beat'em up

Reply #20 on: July 27, 2014, 10:23:57 pm


Here's a KoF style reference. Might be handy to look at the proportions of something like this, rather than real proportions, since this seems to be the style you're going for.

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #21 on: August 14, 2014, 09:36:07 pm
Thanks for the input. Now I'm doing a portrait, and I'd like some advice on the hair and foldings if possible (ignore the unfinished buttons):



Some progress on the older sprites


« Last Edit: August 14, 2014, 09:52:22 pm by Hagane »

Offline Zia

  • 0001
  • *
  • Posts: 69
  • Karma: +0/-0
  • Pixel herding is hard work.
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #22 on: August 15, 2014, 01:08:59 am
Are her breasts supposed to be bound, in lieu of her wearing a sports bra? If so, they're really, really round for that; compression-style jiggle controlling bras/bindings flatten the breasts and spread them out quite a bit more than that. Usually the cleavage won't be of the straight-line, sort - more of a soft hills kind of cleavage if anything. Very few well-fitting bras will give the sort of cleavage you've got going on here. They should feel more uplifted and supported, as well - right now, it looks like her binding is *really, really loose* because of how low the breasts are sitting. Those things will flop all over and *hurt* when you're trying to be athletic. A compression-based sports bra/binding will push a lot of the breast tissue up and nearer the body, giving it way less projection.

See this lady in a shock absorber sports bra (one of the better quality compression-based sports bras available):



Only an encapsulation-based sports bra would retain a round or pointy shape, like this one from Freya:



And in an encapsulation-based bra, the breasts are separated and lifted, not pushed together to create line cleavage.

Admittedly, you may choose to go for a less realistic breast shape and design as an aesthetic choice, but I'm a big proponent of realistic and well-fitting boob-clothing in media :)
Eriophora Zia

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #23 on: August 15, 2014, 02:17:21 am
It's supposed to be a bandage, not a bra, if that helps.

Offline Zia

  • 0001
  • *
  • Posts: 69
  • Karma: +0/-0
  • Pixel herding is hard work.
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #24 on: August 15, 2014, 02:49:02 am
I assume it's meant to bind her breasts as a bra might, however? Unless she's going without any support at all?
Eriophora Zia

Offline EvilEye

  • 0010
  • *
  • Posts: 492
  • Karma: +1/-0
  • In need of practice
    • View Profile
    • COIllustration

Re: [C+C][WIP] Sprites for a beat'em up

Reply #25 on: August 15, 2014, 04:48:16 am
I was starting to go somewhere with this but I ran out of time unfortunately.



Oh yeah I forgot the eye bandage :P Anyway, your portrait has a few proportion issues. Chest too far down. Neck too long. Upper arm too long. Why'd you try to draw the individual nostrils at that resolution? The colors are really plain too. I didn't change them much in my edit but someone else might have the time.

I'm really impressed with your animating ability BTW. Especially for such a large sprite. What tools do you use for animation if you don't mind my asking?
« Last Edit: August 15, 2014, 04:50:15 am by EvilEye »

Offline Hagane

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
    • View Profile

Re: [C+C][WIP] Sprites for a beat'em up

Reply #26 on: October 26, 2014, 11:24:22 pm
Quite a late reply, but I've ben busy lately.

I retouched the hair a bit. Here's how it looks on the portrait and the idle sprite.




Does it look any good? I didn't attempt to resolve the bra issue, ha, I don't think I quite get how to solve it.

As for the animation process, now I draw keyframes, then rotate inbetweens with rotsprite and then edit them to clean them up. I only rotate when I've finished the keyframes (color, lines, etc), before I stupidly rotated unfinished frames and had to do a lot more work.

Right now I'm doing the lines for the last two enemies I want to have for testing and demoing. After that I'll have to do at least a part of a stage, which will be a new thing for me since I've never drawn stages. I'll probably end up having to hire help for that eventually with some crowdfunding campaign, as it will be a lot of work for a single man.