[C&C] Sidescroller Animations & Pixel Art

[Yukie Anima]

Hello everyone!

I am new to this forum, but I heard that here I can make my Pixel Art better!

Umm... well, I'm not really too good at Pixel Art. I started drawing in the beginning of this year, because I wanted to make a game. And now I actually started making the game.
It is a Sidescroller Metroidvania RPG. But my animations and my sprites needs to get a lot better... they aren't very good.

Well... the main character is called Fear. She's a 15-year-old girl. And here are her sprites:

This is her Idle Sprite!


And this is the Jumping Sprite.


This is her Walking Animation. I... don't feel good about it, actually. It seems that something is missing, but I really can't see what. And in-game it seems natural to me...


And this is a Falling Animation! When the player is falling, this plays!


So... what can I do to make them better?
And soon I'll make a attacking animation for her too, and I'll post it here!

Oh, and... since it's my first time here, I hope we all can get along!

[miro42]

Hi Yukie and welcome!

First off I want to say that this sprite is very cute.

Here's my edit:



Now some explaintions.

Your walk cycle has a good start, but I feel that while you were animating you kept forgetting which arm/leg was swinging which way (I do it all the time ), so I made sure the darker leg was always in the back.  This seems like a small thing but it can really mess everything up.

Second, its good to see you swinging the head from side to side, but at it's current speed it is far to jittery.  I slowed the whole animation down and kept the head looking in one position, which is not really necessary, but it will help you slow down and animate a little easier, should you choose to rotate the head.

I also gave the head just three positions so it doesn't jitter as much.

You can keep the animation as fast as you have it because it gives character to her, but the faster the animation the less movement you should be doing.  I realize that the way I animated her it looks more like she's strutting around, but it should give you an idea of the movements.

I also highly, highly, highly suggest getting this book if you don't have it alreay:  Richard Williams Animator's Survival Kit.

I hope that this helps and can't wait to see more of your stuff.

[Rosier]

I feel like this animation is missing some happy go lucky background music...


And my recommendation before anything is to decrease the palette.  Such a simple style doesn't need so many colors and shades.  It'll make things a lot easier animation wise, and the colors really just don't need to be there.

[Yukie Anima]

Hi Yukie and welcome!

First off I want to say that this sprite is very cute.

Here's my edit:



Now some explaintions.

Your walk cycle has a good start, but I feel that while you were animating you kept forgetting which arm/leg was swinging which way (I do it all the time ), so I made sure the darker leg was always in the back.  This seems like a small thing but it can really mess everything up.

Second, its good to see you swinging the head from side to side, but at it's current speed it is far to jittery.  I slowed the whole animation down and kept the head looking in one position, which is not really necessary, but it will help you slow down and animate a little easier, should you choose to rotate the head.

I also gave the head just three positions so it doesn't jitter as much.

You can keep the animation as fast as you have it because it gives character to her, but the faster the animation the less movement you should be doing.  I realize that the way I animated her it looks more like she's strutting around, but it should give you an idea of the movements.

I also highly, highly, highly suggest getting this book if you don't have it alreay:  Richard Williams Animator's Survival Kit.

I hope that this helps and can't wait to see more of your stuff.

Thank you! I wanted to make her cute so... I guess this time it's a win for that? :p

Your edit makes the walking seem a lot more natural, but she needs to have a... 'cutier' walking animation. And I actually tried making the body move like you did on your edit before! It's actually pretty similiar, but I used it only on 4 frames, so it didn't work very well.

Yes... I forget things a lot. That's a problem for me. I was also thinking if I should move the head, but I think I won't, or else, it's too much for me. I'll try on simple animations to one day get to the detailed and hard ones.

I'm gonna remake my walk animation based on your explanations now! I wanna see if I can do it. But I'll post tomorrow. I'm sleepy, and it's late here.

I'll see if I can buy that book! I don't have much money now, so...

---

I feel like this animation is missing some happy go lucky background music...


And my recommendation before anything is to decrease the palette.  Such a simple style doesn't need so many colors and shades.  It'll make things a lot easier animation wise, and the colors really just don't need to be there.

Pallete? You mean... the amount of shades?

---

Oh, and I tried making a sword swing animation separated from the character. I think it didn't go so well... but here it is:

[miro42]

Pallete? You mean... the amount of shades?

Yeah, that's what he means.  When you use less colors it makes it much easier to animate, especially when you have to make corrections.  Once you actually get the animation flowing smoothly, then you can start adding details, but the animation is the most important, so always remember K-I-S-S (keep it simple stupid (a great thing you'll learn from that book I linked to earlier)).  So for Fear, just one color for the hair, one for her suit, one for the front leg and front arm, and then another for the back leg and back arm.  Honestly, for the face if you can just cut and paste since it's already done, but in the future just keep the face a plain fleshy ball until your animation is sound.

Also, something I didn't notice before, try and get a greater contrast between the front limbs and back limbs.  Especially when it's at 100% they both look very similar in color and it can be confusing.

Oh, and I tried making a sword swing animation separated from the character. I think it didn't go so well... but here it is:

My first thought is that its entirely to fast, but I think that might be because you don't have a pause before it loops again.  Sword swings are very fast so it might be right on.  Having no other visual reference around it however might also lead me to think it's too fast.  I always assume everything is too fast.  When I started animation school, every single person in the class was told to slow down, so if you're just starting off, that's my advice, even if it's perfect the way it is.

[Yukie Anima]

I remade the Walking Animation. The legs seem better, but the arms... I don't think the arms are right..
Here it is:

Pallete? You mean... the amount of shades?

Yeah, that's what he means.  When you use less colors it makes it much easier to animate, especially when you have to make corrections.  Once you actually get the animation flowing smoothly, then you can start adding details, but the animation is the most important, so always remember K-I-S-S (keep it simple stupid (a great thing you'll learn from that book I linked to earlier)).  So for Fear, just one color for the hair, one for her suit, one for the front leg and front arm, and then another for the back leg and back arm.  Honestly, for the face if you can just cut and paste since it's already done, but in the future just keep the face a plain fleshy ball until your animation is sound.

Also, something I didn't notice before, try and get a greater contrast between the front limbs and back limbs.  Especially when it's at 100% they both look very similar in color and it can be confusing.

Oh, and I tried making a sword swing animation separated from the character. I think it didn't go so well... but here it is:

My first thought is that its entirely to fast, but I think that might be because you don't have a pause before it loops again.  Sword swings are very fast so it might be right on.  Having no other visual reference around it however might also lead me to think it's too fast.  I always assume everything is too fast.  When I started animation school, every single person in the class was told to slow down, so if you're just starting off, that's my advice, even if it's perfect the way it is.

So... should I remove all shades from the sprite, animate, then when I finish animating, put it all back?
And I think the hair needed shading. It is behind her, and not to her side.
"Keep it simple"... I heard that before. I'll remember that!

Oh, and I made an attempt on making a "Grassy Rock" ground for the player to step. It didn't go so well... I'm not good at making tiles/terrain. I don't know how to shade properly, too.
Here it is:

I know... it's really bad. But I thought that I could get better at this if I showed it here.

And about the sword, yes, it was fast. But I figured that if I slowed it down a little it would work. I still don't know if I'm gonna use that system of sword swing, through...

Thanks!

[Rosier]

Don't put the shading back on after you're done animating.  Leave it with only the most necessary colors.  Too many shades makes it cluttered.

[Yukie Anima]

Don't put the shading back on after you're done animating.  Leave it with only the most necessary colors.  Too many shades makes it cluttered.

Like this, you mean?


I removed all unecessary shading. But I had to keep the shading from the hair, because else it would ruin the perspective.

Edit: I actually made another character for another game I'm making. I decided I'll make a small game first to get better at pixel art and coding before making the big project.
He's called Ryan, and he's looking for a star.

Here is his Walking Animation:


Thanks!

[miro42]

Here's a quick lesson on arcs in animation.  Everything moves in an arc.  If it doesn't move in an arc it's wrong (again, unless you know what you're doing).  The human body moves very much in arcs, and it's probably not more prevalent than in the arms.  This is a very, very, very crude representation of something in that book I told you about:



On the top-left is a pendulum (think grandfather clock swinging thingy).  When it moves the weight (circle part) moves at an arc, because where it pivots is stuck in one spot.  Right now your arm movements are doing what the bottom left drawing is which is the wrong thing to do.  When the weight moves it just goes straight across.  If you think about it for a minute you'll understand why this is wrong.



...Pencils down.  Let's see your answer!

If you said that it's because when the center pendulum is in the center position, the suspension (the long stick holding the weight) changes size, then you are correct!  Obviously, a static solid object cannot change it's size, thus the pendulum has to move in an arc.

The super excellent right hand drawing is supposed to be an arm (if you squint hard enough ), which oddly enough looks like a pendulum!  The top circle is the shoulder, or the pivot.  The second circle down is the elbow, or the weight of the pendulum.  Now look at your arm.  Go ahead, don't be shy!  Now move it every which way you can think of.  Does it ever, even once, change it's length from shoulder to elbow?  I will just assume you are a normal person and that your answer is no, it in fact does not change in size.  So from this little experiment, which of the two left hand drawings will more closely imitate the actual swinging of your arm?  Yes, you are correct.

To further illustrate the point, I've taken the liberty of drawing the forearm down to the hand in the pendulum/arm exercise.  You'll notice that the wrist is also moving in an arc, and the hands move in an arc.  Now think about why this is.  If you need a hint just read the above paragraph.

So, in answer to why your characters' arms look funny, it's because they are sliding along the same plane, rather than swinging from a pivot.  Does this help?

If you're wondering why I didn't address this in my own edit of your animation its because I forgot about it. 

[Yukie Anima]

Wow. Amazing!
I love reading your posts. They are really helpful!

I understand why it wasn't working now. With that, I edited the animation. Is it right now?