Lesson 05
Animation Part I
by CMR

Note: This lesson is a bit different than the rest. It is more interactive.

Definition
What is animation? Animation is the process of bringing a still image to life.
Animation can be accomplished simply by flashing different images in a sequence
super fast to create the illusion that the image is moving. It is an eye trick.
Your eyes dont catch the inbetween images well so it all looks smooth...(depends on
how fast you're moving the pics)

Programs for Creating an Animation
I use game makers built in animator to string the images together, but i use
Microsoft Gif Editor to make the image loop. I would reccommend using Microsoft
Gif editor if you want your images to loop, so go ahead and download that now.
You don't need Game Maker though...even if you have it. I like it however because
it is good for using and creating sprite sheets.

Starting Out
Okay...First of all, we are going to be animating a stickman fighter ready stance.
Yes it sounds easy, but it can be a bit challenging. First task is to create
your own stick fighter. Create it in a street fighter view (platform). Here is
mine:

The next step is to think about what your stickguy could do for his ready stance.
BTW a ready stance is him just standing there...like breathing. A common one is
to simply move slowly up and down breathing and moving his arms a bit. There are
some pretty wacky animations that have been done with ready stances, but we will
stick to the simple up and down breathing.

Creating the Base Animation
Okay, now that you have your character, it is time to start the animation! For
this particular animation, i am going to create the animation one small step at a
time. There are other methods, but i dont think it works as well with this type
of animation. Don't worry, you will see the other way of animating eventually.
Okay. So what im going to do is to make our character bend slowly at the knees.
Every other frame in this animation i am going to make move up or down by 1 pixel.

This is my first and second frame:

I keep doing this until i feel that my stickman has reached a good level:

You need to do this as well with your character. Maybe your character has
something special like maybe he twitches or if he's a robot, he moves like a
robot. Try something out.
Animated it looks like so:

Not bad! But, we want the character to look more lively...

Making the Animation More Lively
The character looks pretty static at the moment. Lets add some arm movements...Im going to do a simple 'breathing' arm motion. Look at what i did:

Do the same to your character. Once again, make it original.
Here it is animated:

Much better!

Assignment
The assignment is to go through that entire tutorial and do all of the steps. I
expect to see a nice ready stance for a stick figure. If you are feeling
exceptionally good, go for a full fleshed out character.

Part I: The Ready Stance
Part II: The Walk Cycle
Part III: The Attack Animation

argh i cant get it right... freaking hard
edit: its easier with a mushroom lol

I've made a sword dude.
Standing:


My attempt on a walk animation:

Here is my attempt... I don't think I did it right though...

I think I exagerrated it too much.

Yay! I got it to loop! Lol

haha 9_6 that looks pretty cool but the steps look really exagerated

wait, does beneton movie gif make gifs loop?

i dunno, but get UnFREEze

http://www.jhepple.com/gif_animator.htm

That is the Microsoft Gif Animator. It works perfectly.

Thanks! Now it works, look at my first post in this topic for the animation.

here is mine (pirate)
dunno but it looks kind of fkcd up,
ill make the animations later

hmm.. well here's mine. It's an alien. He's a little glitchy, but eh it's an alien, it could be glitchy hehe.



Gaming4JC

hehe nice ones so far guys. I love the stand animation done by 9_6, I also like the eradicness of the walk, though it doesnt convey the leg switch as well as it should IMHO so maybe need to revise that. When it comes to animations its good to note making a template to work from makes a much smoother animation later, if you were to for example start of making one similar to 9_6's or CMR's then add details to it, 9_6's would add highlights only minor lineart changes to attend for colour issues and palette change of course while CMR's would be more extensive.
I will show an example shortly and edit.

**EDIT**
couldnt be bothered making a new animation so i edited back one of my old ones to how it was at one stage. The good thing about this is if you want you can use the base to make new sprites performing the same actions. Great for pixeling for games (by using this method the hard part is getting highlights to look right, as oppose to getting highlights and the motion to look right).
-->

Well, I'd already made an animation today, and although it's not really finished, wth:

Sk8m8trix I did an edit of yours to show a animation technique used on ball like objects called stretch and squash:

Moses you might want to study this for your's also.

I wont be able to participate in this one.. ;-; i dont have a GIF editor... ;-; and i cant find one.
EDIT: Nevermind, ill work on it now.DOUBLEEDIT: Nevermind again, the program doesnt work

Use graphicsgale.

And Ian, thanks, it still isn't really finished :P I'll fix it up tomorrow. I think Sk8m8trix's one was of it standing not jumping? not sure.

reminds me of an animation Camus made a while back at the Pixelation forums

Searched for hir but that member doesn't seem to exist in the pixelation forum.

I don't think the free version of graphicsgale allows you to save animated gifs... if there is a way with the free version do tell. About my sk8 animation edit I can see how it isn't what sk8 was going for, however, it could still work for a "standing" animation- although it does work better for walking/hopping.

yeah, i was going for a strech effect, but ians edit is correct, i just have to keep him on teh ground

download PIXELSTUDIO supports animations layers loops and transparencies! very good program btw

check it out now!

Neato jkilla! I'll have to check it out, I've been using UnFREEz sofar.
BTW what do you think of my weird alien? :(

Gaming4JC

That one?

It could use a bit more movement.
You know, move a little bit up and down like Chessmasterriley suggested in the tutorial.
Right now the only things that are moving are the arms and the eyes.
You could also add more frames to the animation.
2 frame animations don't look too sexy imho. They're just too simple.
Try to have at least 3 frames.

Here's my stance


-Update-

Here's my walk & attack animations :D

........

yea. its really simple. i know. im not that good with sprite animation.

Nah, I forgot about that :x

would a stick person be acceptable for this lesson, cause this is an animation lesson, so would you be marking us on the animation instead of the sprite itself?

Read the whole assignment.

-DM

ohh, oops, sry, ill get to work

aight im working on my stick guy, should hav it done either today or tomorrow

Well the new lesson comes tomorrow...

DUH-N!

I have done the ready position now, but it doesn't look to good tought :(

Walking:

Punching:

I tried making an animation but it said drawing failed.