AuthorTopic: Knight sprite + Animation (WIP)  (Read 11944 times)

Offline Indigo

  • Administrator
  • 0011
  • *
  • Posts: 944
  • Karma: +0/-0
  • Artist, Indie Game Dev
    • DanFessler
    • DanFessler
    • http://pixeljoint.com/p/849.htm
    • DanFessler
    • DanFessler
    • View Profile
    • Portfolio

Knight sprite + Animation (WIP)

on: November 05, 2005, 04:25:20 am
the following was all written for a programmer bud I know over at the play basic forum.  This short tutorial can be found in his game development thread for "draco's adventure" here: http://www.underwaredesign.com/forums/index.php?showtopic=785 .  If you want to C+C the art - go for it.... if you want to C+C the tutorial in general, thats A-OK too.  I didn't do the best i could have because this was for the purpose of teaching somebody instead of making a master-piece.

here it is...
Quote
As promised here is some critique for ya...

This will only focus on the main character today - tomorrow (hopefully) i'll get into color theory dealing with your background.

so without further ado....


Well, first things first.  Lets talk anatomy.  Now i know that the style you were going for was cartoony, and thats fine.  But since i dont know how intensionally you did everything, I will show you the hard-core correct way, then you can vary off that path as much as you choose to.  In my version i've fixed the following; the head was too big, legs too stubby, pectorial muscels too saggy, you locked all of your limbs so i gave them a little bend, gave him a prince/knight like posture, and a few other minor things.  I'm sure that you catch on pretty quick, so i'm not going to spend any more time dealing with anatomy.  (PS i was just too lazy to draw that crazy hair due you have on that guy)

Alright - now lets talk artsy.  The first thing i noticed about your sprite is the retona burning amount of saturation...almost %100 saturation i think.  Generally speaking, things aren't ever that high in saturation except for controlled situations.  The basic color theory about game design goes as follows; background = low contrast, low saturation.... sprites = high contrast, high saturation.  I'll talk more about that later, but basically its just to make sure the user can always know the difference between his sprite and everything else cluttered around the screen without losing him constantly.  Now although i say sprites are supposed to have high saturation doesn't mean that it can be retna burning and still be okay.  Just lower the hue to be a bit more grey and you'll be fine.  In my version i raised the contrast, lowered the saturation a tad, and added an outline.

The second thing I noticed was your whomping 42 color count.  Thats just crazy.  I lowered the color count to 12 colors plus transparency.  if you notice, even though i have about a fourth the amount of colors you have- mine looks more detailed and shaded.  If you smart with colors, you can achieve this without too much hassle.  Also it makes replacing colors if you need to not nearly as hard.

the last thing that i did to make your character pop out from the background was add an outline.  if you look closely at the outline, its not a continuous black line.  In some areas where light would be hitting, i used a technique called "selout" or "selective outlining".  Learn about it here and any other pixel term you dont understand: (Selective Outlining)  As you can see - sometimes on different colored backgrounds (like you might find throughout various levels in a game) makes it hard to see the sprite distinctly unless it has an outline.  The outline is optional, and not all games use it, but i think you can benifit from it in your case.

Also notice how before i shaded the sprite, i 'blobbed' things in roughly.  This is how i will be animating the whole sprite.  Its generally not a good idea to animate a fully shaded sprite this complex - so instead, you do all of the frames in a simple manner and then shade each one individually.  this will make your animation look more fluid and non-mechanical.  This leads us to our next section - animation.




here we have alot of useful information.  Basically there are 3 steps in creating animation cycles. in step 1 you create base frames; or in this case - the 4 generic running poses that we all know.  In step 2 you create the 'tween' frames; or all of the ocward stuff the body does while moving from one generic pose to another.  In the last step you shade it.  I didn't complete step 3, but you'll get the idea.

Usually people get overwhelmed on the mechanics of how a run animation works, but in reality you dont need to know much.  Just by laying out the basic building blocks of base frames, all we have to do is look at the base frames before and after a tween in order to create a good seemless motion.  Alot of useful info is typed up in the pic itself, so i'll just let it do the talking.

Here is what my step 1 looked like when i was done with it, along with my step 2. 


Its amazing to note the big difference it makes when you add the tween frames in.  Through the tweens opens the door to adding so much character and even emotion into the animation of your run to help 'define' who the character is.

in closing, here is a final comparison to see how much difference these techniques have made in the overall product.  Might be useful for ya.

One last thing i'd like to say before i go to bed is just a quick thing about what defines a walk vs a run.  In games its much better to have the character always running because it makes the game feel more fast-pased and dramatic.  But what defines a walk vs run.  Certainly a run is NOT a sped up verson of a walk, right?  Heres a quick answer for you; When you walk, there is always at least 1 foot planted on the ground.  When you run, there are moments when both feet aren't even in contact with the ground.  Study the animation i made to see more clearly what i mean.

general info about animating moving things:
the first instinct of an amateur animator is just to copy+paste+move and occationally rotate 90 degrees. And the first instinct of a more advanced amateur is to copy+paste+move and edit a little here and there. This is an alright technique to use, but only under certain conditions. If the part your animating rotates at all (Like the arms do), your better off redrawing it instead of the copy+paste method. But if it moves in a different way, its okay to copy+paste+move+edit+touchup. for example. In the animation i posted above, I completely shaded the torso. I did not redraw the torso for each frame. Instead, i just squished and expanded horrizontally a copy+pasted torso to give the effect that it is twisting on the y axis. Even the base torso to begin with (seen in the first pic i posted) was a copy+pasted verson of the profile view i drew. I just edited it to appear as if it has been seen on the 3/4 view. and the shoulder pad was also just copy+paste+moved (and also flipped horrizontally on the forward stroke of the arm). But as i said - in order to have a flowy animation, all rotating parts should be redrawn each time.

Something that i should have also included in my animation was to have the character leaning into the run a little bit to keep him balanced. Also little things could have been added to even further progress the animation. things such as the shoulder pads could have bobbed up and down in due to his bodies rise and fall.

I have already started on the second half of my little critique session and i hope to have it up by tomorrow.  I hope this was helpful to you in some way shape or form.

Let me know what you think

Offline MadToaster

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

Re: Knight sprite + Animation (WIP)

Reply #1 on: November 05, 2005, 11:34:01 am
You're cool for putting all that good information in one place for your friend.  I think it's important to struggle with art to better appreciate what you've learned but I wish there was more practical documentation back when I started making sprites. Looking forward to part 2.  ;D

Offline Silver

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

Re: Knight sprite + Animation (WIP)

Reply #2 on: November 05, 2005, 01:04:18 pm
awesome Edit Indigo , Im Lovin your art man .
I Learned some thing about selout , thanks to you .
good luck

BTW : I wanna download some of Calypson team old games but there seems No link for that .

Offline Indigo

  • Administrator
  • 0011
  • *
  • Posts: 944
  • Karma: +0/-0
  • Artist, Indie Game Dev
    • DanFessler
    • DanFessler
    • http://pixeljoint.com/p/849.htm
    • DanFessler
    • DanFessler
    • View Profile
    • Portfolio

Re: Knight sprite + Animation (WIP)

Reply #3 on: November 07, 2005, 02:17:15 am
thanks guys, I'm been pretty busy so part 2 may take a while.

"BTW : I wanna download some of Calypson team old games but there seems No link for that ."
hmm.. yeah I dont think the downloads work on my webpage yet, so if you really want em, just feel free to IM or MSN message me

Offline Hase

  • 0001
  • *
  • Posts: 32
  • Karma: +0/-0
  • Zombies. Stuff.
    • View Profile

Re: Knight sprite + Animation (WIP)

Reply #4 on: November 09, 2005, 09:27:47 pm
good tutorial, pretty useful. the only thing that detracts a bit is the rotation of the chest armor - from the side it looks segmented, but in rotation it looks pretty flat. give the guy a heroic chest ;)

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: Knight sprite + Animation (WIP)

Reply #5 on: November 09, 2005, 10:12:02 pm
yep, hase must be seconded. I hate seconding people but he does really have a point.

This is a very good tutorial, you have a very good result, you have actual information in it, and you also made it plain to read, meets all the standards in my book!

Welcoma back Hase! that was completly out of the blue, glad to have you here as always =) there's still like 4 days for the Wayforward animation contest at the contest section, $250 give it a try

Offline Indigo

  • Administrator
  • 0011
  • *
  • Posts: 944
  • Karma: +0/-0
  • Artist, Indie Game Dev
    • DanFessler
    • DanFessler
    • http://pixeljoint.com/p/849.htm
    • DanFessler
    • DanFessler
    • View Profile
    • Portfolio

Re: Knight sprite + Animation (WIP)

Reply #6 on: November 09, 2005, 11:05:07 pm
I definately agree with you two about the chest thing.  lol - the only reason its that way is because I just copy and pasted the side view of his chest to create the 3/4ths view of it. (plus a bit of touch up too).  I'll try to fix it up a bit.  thanks guys

PS - awesome avy Hase.  I dont think i remember you.  were you in the old pixelation?

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: Knight sprite + Animation (WIP)

Reply #7 on: November 09, 2005, 11:54:16 pm
See hase? kids these days dont even remember you, make a topic with your old stuff! let the blood back in this place =D besides, I lost all of it too, I wanna get it back again XD

Indigo...yep, he was...ppl werent to keen on his photoshopy ways, personally I didnt care, but in the end everyone loved his awesome animations, I dont think you were there to see that though.

Offline Helm

  • Moderator
  • 0110
  • *
  • Posts: 5159
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides

Re: Knight sprite + Animation (WIP)

Reply #8 on: November 10, 2005, 11:33:31 am
requesting general hase showcase thread as well.

Offline Derek_R

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

Re: Knight sprite + Animation (WIP)

Reply #9 on: November 10, 2005, 01:38:51 pm
I remember hase. Freakin insane animations XD. I remember some really sick blood animations.

Offline Hase

  • 0001
  • *
  • Posts: 32
  • Karma: +0/-0
  • Zombies. Stuff.
    • View Profile

Re: Knight sprite + Animation (WIP)

Reply #10 on: November 13, 2005, 04:01:41 pm
Thanks for the welcome - and sorry to hijack the thread like that. Guess Im gonna have to post some of the old stuff now.