AuthorTopic: GR#199 - Character - Animation  (Read 7430 times)

Offline RedSuinit

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

GR#199 - Character - Animation

on: July 13, 2014, 01:07:59 am


http://imgur.com/f3nujO1

Added the link because imgur is blowing it up for some reason, making it look all blurry.

Inspiration is from Paul Robertsons work, nothing was ripped, but his art-style is along the lines I was shooting for.

I'm BRAND NEW to pixel art, this is my first work. Please let me know what you guys think. I believe that it is good, but I watch it and can't help but feel like SOMETHING is missing.
Thanks in advance for any advice, tips, or other forms of help!

Offline LarkoftheRiver

  • 0001
  • *
  • Posts: 99
  • Karma: +0/-0
  • Hobbist Animator + Apprentice Falconer
    • LarkoftheRiver
    • kestrelart
    • View Profile
I'm pretty new to pixels as well, welcome!

I think the sprite base looks pretty good, but the animation seems a bit rushed and jerky for just a shanding pose, unless he's about to throw a punch at someone. The main thing I would change is the way the shirt "pops" a bit at the bottom. I'd make that less dramatic; my eyes go to it first rather than the face of the sprite.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
It is fast and bouncy, but the framerate on the GIF is little faster than the actual animation in-game, but just by a bit. I actually want it that way. I want it to look bouncy and alive. I'll look into the shirt, see what it looks like toned down a bit.

Thanks!

Offline Yukie Anima

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
I'm actually pretty new to pixel art, too, but I had some experiences and... here is my attempt to help you.

If I say anything wrong, please correct me someone. It's my first attempt on helping someone on this forum.

The Face is a little strange. He doesn't have a pupil on the eye for a three-pixel eye (it's a rule I've made: if he has a three-pixel eye, use a pupil, but I think that's just me being weird), and it doesn't seem to match his body at all (through I think this is just my opinion).

His arms are too big, I think. If you 'open' them straight, they would get near his feet, and that shouldn't happen. Maybe making the arm a little shorter would fix that?

And I think the pose is a little strange. It looks like he is just putting his hands on his waist, but then you realise that you can see his hand, and it is closed. If it's supposed to be a fighting stance, I think putting his hand more near his face and showing his arm a little would make the animation better.

But... it's actually a good animation for first time :p. I didn't know how to shade very well, so I never shaded at all in the beggining, but I see you are practicing it!
I'm actually a little scared of forums... but I always liked them, so I'm joining this one now! I hope we can all get along.

Offline RedSuinit

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


Slowed the animation down, tried to downplay the shirtflapping, decreased the width of the torso, changed the eyes to look more like pupils, and changed the hands a bit. I think it looks much better now, thank you for the thoughts!

Anyone else? I appreciate the helpful comments so far.
« Last Edit: July 13, 2014, 03:21:16 am by RedSuinit »

Offline Yukie Anima

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
That's a great improvement!

All I can think of now is that the eye pupils looks a little strange. Like if he was looking up. Try changing their position.

And the hair bouncing seems a little strange, maybe making it less frames where the hair bounces? Like, if it uses 4 frames for the hair bounce, try making it bounce on 3 or 2, and making it less aparental. I think it's taking too much atention.

Good work so far! Keep up at it!
« Last Edit: July 13, 2014, 05:06:33 am by Yukie Anima »
I'm actually a little scared of forums... but I always liked them, so I'm joining this one now! I hope we can all get along.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
Yeah, you're right about the hair. I think I might try sunglasses on him, aviators maybe, and see what that would look like if I can do it right. He seems kind of plain, I wanna give him a bit more flair.

Thanks again for the input!

Offline Alexanator28

  • 0001
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
I am kinda a noobie to pixel art too, but I noticed you have some serious banding going on in the arms, so try to fix that.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
I see it now. Never really noticed it before, but its so blatantly obvious now, haha. I need to adjust the elbow. Thanks!

Offline LarkoftheRiver

  • 0001
  • *
  • Posts: 99
  • Karma: +0/-0
  • Hobbist Animator + Apprentice Falconer
    • LarkoftheRiver
    • kestrelart
    • View Profile
I think it looks much better, and still has that lively flare it did at the beginning. I'm good with human anatomy, so I can't help anymore really, but I look forward to checking in on the final piece!

Offline RedSuinit

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


Reworked the stomach area, brought the edge of the shirt in my one pixel, then let it expand to add to the popping effect by making the shirt look like it is filling with air. Added sunglasses and lightened the highlight color on the legs. Also improved arm pixels to try and reduce the banding.

Thanks everyone for your thoughts! I can't decide if I like the glasses though.

I still don't feel like I have enough though, the character seems SO PLAIN. I think I may try to add a jacket or something like that.
« Last Edit: July 13, 2014, 05:45:39 pm by RedSuinit »

Offline Alexanator28

  • 0001
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
I did an edit to the arms of your animation. I tried to get the shading slightly changed, so you didn't get the banding effect.

Edit: My program made it slightly faster than what it was before for some reason, and I don't know how to fix it :/
« Last Edit: July 13, 2014, 06:21:09 pm by Alexanator28 »

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
I did an edit to the arms of your animation. I tried to get the shading slightly changed, so you didn't get the banding effect.

Edit: My program made it slightly faster than what it was before for some reason, and I don't know how to fix it :/

I like the shading for the wrist! Thank you for the edit!

I think I am just going to leave him fingerless though.



My latest edit. I reduced the saturation in the shirt to get a more realistic look, reworked the back of the arms to get rid of the banding there as well, shortened the arms, added a little bit of pop to the pant legs, and added 1 pixel to the feet with some re-shading.

Thoughts?? I feel like he is getting so close! What accessory can I add to get that little touch of flair,  but won't be over the top.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
Another edit, fixed the banding in the legs, and the two frames where the arm wasn't the same length as the rest of the animation.



Thoughts??
« Last Edit: July 13, 2014, 08:05:07 pm by RedSuinit »

Offline Yukie Anima

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
Another great improvement!

I was just about to tell you about the contrast of the shirt. Darker contrasts makes it more realistic.

You could try adding some emotion to him now. Something like, a angry look in his face with only 4 pixels above his sunglasses, and that would be the eyebrows. Or, maybe a sarcastic smile. Maybe a jacket, a cap, things that would add emotion to the character. What I told you were only examples, but if you like one of them, you can use it!

That way the shirt goes up, too, I think it shouldn't happen. It's a little unnecessary and it takes some attention. I think you should either remove it, or make that part of the animation less... 'strong'.

And I think you could rework the pallete of the hair. Maybe making it a little darker. I think he shading makes it look like it is glowing.

And there's one little pixel on the arm that is really unconfortable at least for me. The shirt isn't moving, but the shading is. That shouldn't happen. Try removing it.

Good job so far!
I'm actually a little scared of forums... but I always liked them, so I'm joining this one now! I hope we can all get along.

Offline RedSuinit

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


How about that? I want the arm to move, I dunno why. I just like it! XD You were right about the shirt though, this looks much more natural.
« Last Edit: July 13, 2014, 08:21:51 pm by RedSuinit »

Offline Yukie Anima

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
No, that's not what I mean at all. The arm should move! But there's one pixel on it that's a shading that shouldn't be there. On the left arm, right before the shirt.

Also, the shading on the lag is getting a little strange. And the shirt moving. I think that's unnecessary. But that's up to you.

I learned pixel art needs to be kept simple. Unnecessary details just shouldn't be there.

Also, try adding some kind of emotion to him with something. Maybe you don't need to, if your character is serious. But that's up to you too.
I'm actually a little scared of forums... but I always liked them, so I'm joining this one now! I hope we can all get along.

Offline RedSuinit

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

Another edit. Messing with the colors again. Put a lot of work into the legs to fix the funky shading. But the shirt just looks too static to me without the pop....

EDIT: A comparison of no pop, and with pop. I like the pop much better.
« Last Edit: July 13, 2014, 10:08:38 pm by RedSuinit »

Offline Yukie Anima

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
You could use shading to remove the static of the shirt, or stay with the new pop animation you made. Not showing his skin when it 'pops' doesn't draw much attention, and it can be a option.
I'm actually a little scared of forums... but I always liked them, so I'm joining this one now! I hope we can all get along.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
I think this will be my final edit, unless someone has more feedback. I increased the size of the facial features, and now feel like the character is complete.



Thoughts?

Offline LarkoftheRiver

  • 0001
  • *
  • Posts: 99
  • Karma: +0/-0
  • Hobbist Animator + Apprentice Falconer
    • LarkoftheRiver
    • kestrelart
    • View Profile
He looks really cool and tough so far. Maybe more highlights in the shirt? I love the glasses.

Offline Boxcar

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
To me, the stance seems a bit off balance. The legs also seem to be a bit too short, even with this stubby character style you seem to be going for.


I also think the character lacks depth, I would mess with the shading of the limbs a bit more. Here's a quick example of what I mean.


Offline miro42

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile
    • Floydian Theory
Hey RedSuinit.  Here is my edit and advice on how you should proceed.



As Yukie mentioned earlier your dude has gorilla-arms-disease (which seems to be a common problem).  I've drastically raised his elbows.  Anatomically, they usually fall right above the love handles or higher.  I also gave him longer shins, because they were so incredibly short. 

As far as posing, I raised his left arm, because with both hands down by his waist it seems more like he's doing a naughty dance, or getting read to roll some dice, neither of which makes me think he's ready for a fight.

As far as blandness, I gave him to stripes on his shoulder just to add something, a belt and buckle, because bad dudes wear belts and it helps break up the torso from the pelvis.  As well I slightly hinted at pockets on the jeans.  You'll notice also that I gave a ring for his neck.  Before it seemed king of  like he wore his shirt on backward so it was riding up his neck.  I also varied his jaw a bit so it's more manly and tough guy like.  Before it was too soft and pudgy. 

Last piece of advice, especially since you're new to pixel art (not sure if you're new to art in general):  on complicated pieces like this, you should really fine tune the anatomy of your character, style and costume, and especially the pose, before starting to animate.  It will cut down on development time when you have to make a correction and then go through every frame and correct it (this is only 5 frames so it's not as big a deal as it could be).  So in short, put up a still picture of your character, get critiqued on that, then once you're satisfied, move on to animating.

Okay, one last piece of advice:  if you think something looks wrong with your picture, flip it horizontally (meaning if he's looking to his left, flip it so he's look to his right).  Almost immediately, you'll notice what's wrong.  If you don't, then flip it vertically so he's standing on his head.  If you still don't notice what's wrong then post so you can get some C + C. :D

This time I mean it, last thing:  honestly, my edit can be pushed much, much further.  He still kind of looks like he's just standing there, maybe looking at his invisible phone.  Bring up both of the arms even further, so they're actually almost chin height and he'll look ready to punch someone's face off.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
Thanks guys!

@miro

Thanks! There's a lot of good stuff there. I actually did another edit last night where I cut 2 pixel layers out of the arms above the elbows. The legs are exactly how I want them and give the feeling I want, but I definitely understand your point, thank you! Also, he IS supposed to just be standing there, looking tough, but not like he is about to punch someone's face off! XD

Thank you everyone for your advice! At work right now, but will probably post another edit tonight.

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 451
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art
I think that you need to better define your forms. Boxcar was going in the right direction. Also you should avoid banding and using similar tones of same color for shading cause low contrast between them cause blur effect.

Here you can find some of the pixel art terms and tips explained. http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299

Here is quick edit, also I didn't have the time to create animation, but you can easily find some reference animation and learn form them. You can open gif files in PS, Gimp, Graphicgale, (even some websites) etc. and study every frame.  :)

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
I think that you need to better define your forms. Boxcar was going in the right direction. Also you should avoid banding and using similar tones of same color for shading cause low contrast between them cause blur effect.

Here you can find some of the pixel art terms and tips explained. http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299

Here is quick edit, also I didn't have the time to create animation, but you can easily find some reference animation and learn form them. You can open gif files in PS, Gimp, Graphicgale, (even some websites) etc. and study every frame.  :)



Thanks!

That's a great edit, but the art style of the game matches the way I had the character drawn. The proportions and body style are what I want him to look like. It's a creativity choice more than anything.

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 451
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art
This was just my idea. :) Style is your choice, but you should definitely learn about banding and pillow shading and try to avoid it.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile
This was just my idea. :) Style is your choice, but you should definitely learn about banding and pillow shading and try to avoid it.

Your link definitely educated me on banding and color, but is there pillow shading on my character anywhere? I though I had do e a good job avoiding pillow shading.

Offline astraldata

  • 0010
  • *
  • Posts: 328
  • Karma: +0/-0
    • View Profile
    • MUGEN ZERO
Your link definitely educated me on banding and color, but is there pillow shading on my character anywhere? I though I had do e a good job avoiding pillow shading.

Shading against the lines anywhere generally creates banding and pillow-shading -- your biggest offenders are the bicept/tricept areas and under the bottom of the arm all the way to the tip of the visible arm's hand and also the crease in the bend of that arm. You could use a single dark color in those areas and avoid the feel of pillow-shading/banding altogether. If you seriously need that extra color, turn it into some slight AA, closer to the highlight color instead of the shadow color. Shadows should be done more like you did the front-most knee/leg area. Notice how HarveyDentMustDie did his shadows in single-blocks of shades. Lack of outlines aside, this is how sprite shading should be done -- that is, in clusters of a single color over a large enough area to represent the 3d planes/forms as best as possible.

Hopefully you can eliminate this look of pillow-shading by using HDMD's shading as an example of what I mean by 3d planes. You can easily add outlines to this when you're done defining the 3d forms.

Also, just a side note -- even though it's "just cartoony" in terms of style -- that doesn't let you get away without having to treat the cartoon as a 3d form, even if you're going for barely a hint of a lighted form -- so keep that in mind because you'll have to deal with this fact no matter what style of art you do.
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 451
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art
I agree with everything astraldata said. If you want to shade this you have to do it properly to make it look properly. If you want full cartoon feel, you can just use two color tones (main and shadow, or main and highlight). A lot of cartoons use this style:

Example:
« Last Edit: July 15, 2014, 10:05:06 am by HarveyDentMustDie »

Offline RedSuinit

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


Another edit. I'm still finalizing my color palette, so I didn't change any of the colors yet, but I did try to remove all of my banding, and added a belt! Also re-sized my gorilla arms.

Thoughts??

Offline astraldata

  • 0010
  • *
  • Posts: 328
  • Karma: +0/-0
    • View Profile
    • MUGEN ZERO
Much improved pillow-shading elimination. Nice touch with the shine there too.

The crease in the forearm/bicep area seems to not know where it's going anatomy-wise. Are you emphasizing the roundness of the bicep or the upward curve of the forearm muscle down toward the elbow with that extra pixel?

I mention that because single isolated pixels like that are not good to have unless they clearly express some important feature. You have another on the wrist and you should either get rid of both or double them up into a 2px wide cluster. Either would be workable, but neither place on the nearest visible arm is clear enough as-is with that single-pixel floating without a clear purpose.

The one other thing that bothers me is the lack of a clearly discernible ear (could be, in part, due to the distance the chin line goes back past where the ear should be and outlines the head like it's a separate piece barely attached to the body. ;P)

And while we're talking about the head -- the hair swoop above his forehead just seems to move around without any influence from the physics of his body and the movement of his head. It gives the appearance of sorta 'combing itself' forward during each loop of the animation. I know the dude is stylish, but unless there's a disembodied comb up there automatically combing his hair as he moves it out of place (which I admit would be fracking hilarious), it really does look off.

Finally, the medium and darkest hair and medium skin tones really do need to be lightened up -- otherwise this sprite looks, at first glance, like it has only 2 colors per part (not including the black outline and transparency).
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Parkerbaby

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


A problem I have with the shading is how all the shades are hugging the outlines. That doesn't help to denote forms. In my edit I just tried to push them past the outlines.

Offline RedSuinit

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


Another rework. Changed the color palette, tried to tone down saturation on the clothing, create more distinction between the mid and low shadows on the skin, and more shading improvements.

Thoughts? I am so new to this, and to color theory especially. This is a lot to learn! Thanks so much to all of you that have contributed to this piece and to helping me learn!

Offline astraldata

  • 0010
  • *
  • Posts: 328
  • Karma: +0/-0
    • View Profile
    • MUGEN ZERO


That should give you a bit of an idea of what to do about the hands and the values you should select for colors. The main difference is not that I simply lightened the colors, but I made the contrast between each value graduation on the ramp more stark, essentially making them more stark in their brightness difference.

I also showed you what I meant about leaving that lone pixel on the wrist and removed the brightest color on his shirt -- you didn't need that light because there wasn't a lot you could light on a dull green seemingly cotton shirt.

Finally, I played with his hair animation on a few frames, but one in particular where it almost flattens out to give it more of that 'bounce' you seemed to be going for.
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline RedSuinit

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


That should give you a bit of an idea of what to do about the hands and the values you should select for colors. The main difference is not that I simply lightened the colors, but I made the contrast between each value graduation on the ramp more stark, essentially making them more stark in their brightness difference.

I also showed you what I meant about leaving that lone pixel on the wrist and removed the brightest color on his shirt -- you didn't need that light because there wasn't a lot you could light on a dull green seemingly cotton shirt.

Finally, I played with his hair animation on a few frames, but one in particular where it almost flattens out to give it more of that 'bounce' you seemed to be going for.

Wow! That really shows a lot! Thanks!

Though, I am a little confused about the pattern on the shirt.

Offline astraldata

  • 0010
  • *
  • Posts: 328
  • Karma: +0/-0
    • View Profile
    • MUGEN ZERO
Though, I am a little confused about the pattern on the shirt.

Just doing something with that extra color that lines the bottom of the shirt near his pants. Just felt like balancing it. Was thinking of the legend of zelda bird logo at the time. Feel free to ignore it. xP
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/