AuthorTopic: Practicing Animation  (Read 17044 times)

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Practicing Animation

on: February 09, 2013, 09:50:53 pm
I've been practicing some old school animation techniques for smoke clouds. Hoping I'd eventually move on to explosions.



Gonna clean them up and make them in vector.
But I still have the shading to do, which might be tricky, since I'm having problems shading volume properly.

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #1 on: March 03, 2013, 07:22:33 pm
Since it's been rolled back, I'll post the updates here:










Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Practicing Animation

Reply #2 on: March 13, 2013, 06:06:23 am
Nice stuff so far.

Most seem too slow, though. Take the smoke large cloud - I think it would feel better if it appeared more suddenly then slowed down as it dissipated.

And similarly for the Mega Man-like warping dude - the blue orby thing should travel to the platform much faster then the guy pop up like a spring (why not make the platform light up blue-ish upon impact?). It's just too monotonous; no pacing. It's all just one consistent speed. You're doing cartoon cell-shaded looking stuff. Try exaggerated animation movement.

I like the dissolving ship. Too bad it's not finished. Reminds me of when Daffy Duck or someone would get zapped by a laser and turn all black, then you see his large white eye blink twice, then he dissolved into ashes, just like your ship. Comedic and stuff!

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #3 on: March 21, 2013, 07:37:14 pm
Yeah, I've notice that I don't exaggerate as much as I think I do..
It's like "oh I have this 20 frames animation, then I'll have one less frame at the end to make it really pop!"
But I have also noticed that everything looks more dramatic when zoomed in :D

We've recently decided to do a singleplayer game mode for the game and I've been going crazy with ideas for updating the art style and really bring some robotic flavor to the game.
I love doing this stuff and I've taken lots of inspiration from both Sonic and Megaman.

The driller was just static at first, then I played around a bit and now I can't believe how boring it looked when it was completely still..
Although, now when I look at it I realize I gotta exaggerate even more..





edit: Tried to exaggerate the shaking of the driller



edit: and just for fun..
« Last Edit: March 21, 2013, 09:48:39 pm by Seiseki »

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #4 on: March 21, 2013, 10:03:53 pm
Aww that tiny drill is really adorable!

I tried playing around with the bomb(?)'s animation, but really I couldn't think of much to push it around either... Maybe have some of the spikes get punched outward when it explodes?
Also my art tumblr: ymedronart.tumblr.com

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #5 on: March 22, 2013, 01:04:06 am
Which bomb? :D
I'm not sure I've posted it here before.

You mean this?

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #6 on: March 22, 2013, 12:41:06 pm
Hm, must have been something else then! I meant the one with three buttons on it! Not sure what it is, now.

(on the bomb you now posted, the mouth is a bit off center and it bothers me an unreasonable amount!)
Also my art tumblr: ymedronart.tumblr.com

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #7 on: March 22, 2013, 08:00:50 pm
Ah, it's supposed to be cannons, not buttons. xD
 It will hopefully be easier to tell with sound and fire effect animations :D

I don't think it's just the mouth, the line that goes across the eye on the right seem to be off-center too.
Oh well, I'm redoing that animation anyways.

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #8 on: March 22, 2013, 08:17:38 pm
On a cannon you'll probably want to reverse the anticipation, as a cannon normally kicks back from the force of releasing the missile.
I thought it was a bomb or a timer because the top cannon looked like a button getting pressed. <:U
Also my art tumblr: ymedronart.tumblr.com

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #9 on: March 22, 2013, 09:31:13 pm
Ah, yeah, there's no recoil like that because I tried to make it look like he's squeezing out the bullets :D

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #10 on: March 26, 2013, 12:20:57 am
After watching some stuff about animation and how our eyes perceive it, I heard a statement that animation needs to be over 15 frames per second to be fluid.
I animate everything in 10 fps with a 0,1 delay between each frame. I'm starting to wonder if I should increase that amount..
Or maybe the statement doesn't apply if the frame rate of the game still runs at higher than 15 fps?

Do these animations seem to lack in smoothness?
Would be nice to hear some input from anyone experience with 2d animation in games.

I'm thinking that size also matters quite a bit.

Also I'd hate to reply without any new stuff, so here's something:

A quick test animation of a character.
I just messed around, moving the nose does look like he's sniffing rather than inhaling, which is kinda hilarious.


(something smells bad *nod* hm.. yes, yes)
« Last Edit: March 26, 2013, 01:07:50 am by Seiseki »

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Practicing Animation

Reply #11 on: March 26, 2013, 01:31:03 am
I really like this stuff.
:lol:

I wrote some crap about FPS a while back that might give you some thoughts.
http://ppdaniatlas.blogspot.com/p/ani-basics.html

Films = 24 fps
Cartoons = 30 fps
Games = 60+ fps

But these are also just the core speeds.
Your game may run at 200 fps, but be locked to 60 fps, your animations may run at 30 fps or lower, and that speed might be different per object/animation/action.

There's nothing really wrong with building an animation for 10 fps.
But yes it will reduce your visual flow and limit what you can stuff into it.
If you want more flow you can increase the fps and add more unique frames and still fit the exact amount of total time.
It just depends.
Even just 2 frames with a low fps can sometimes be very effective.

Definitely give faster fps a try.
60 fps can support a lot of crazy drawings but is a bunch of work.
30 fps is a good balance between fun and work.
10-24 fps is a little bit visualy chunky but there's a lot less to do.
less than 10 fps is approaching more of a slide show speed but it can be useful and you'll be done in no time.

Also consider using variable speeds.
An example would be:
Player Walk Animation speed  = Max(0.3f, Player move speed * 0.5f)
« Last Edit: March 26, 2013, 01:33:57 am by PixelPiledriver »
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #12 on: March 26, 2013, 02:26:09 am
Thanks! I actually read your blog a week ago or so.

I had a moment of panic there when I thought the animations were too choppy because of the statement about everything below 15 fps being unsmooth.
But I think I managed to convince myself that everything is still fine. :)

I know from old games that even something like 2 frame animations at a low frame rate can be effectful.
And I know the eye is better at recognizing things that change quickly rather than subtly, giving the animations more effect?

Also, I assume the more space the animation has the higher fps is required to make it smooth?
Since these are static in place they might look ok, but if I would move them in the animation really fast at 10 fps it would start looking odd.

The doctor for example has a certain retro feel with only a few frames  5 fps.
(I'm definitely going for at least 10 fps for the characters though)

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #13 on: March 26, 2013, 02:22:00 pm
Ahem, having relatively recently had some training in animation, here's some blithering about traditional animation.

8 fps = choppy animation but still reads as movement. Old eastern europe/USSR style animation was done with this amount since it's cheaper.
12 fps = Default disney style animation, kinda the workhorse of animated films. (as in, most stuff is done with 12 fps)
24 fps = For extra fast and smooth movement, you have to try around with this. Don't do an entire thing with 24fps if you want to complete it in a timely fashion.

Traditional animation runs at 24 images per second, so the different framerates here are more about how many -different- images are shown. So with 8 fps each frame is shown 3 times, with 12 it's two times (hence the term "shot on twos") and with 24 every frame is shown only once.


Not sure how useful this is for you, thinking back, but it might help with experimenting. :U!
Also my art tumblr: ymedronart.tumblr.com

Offline tim

  • 0010
  • *
  • Posts: 240
  • Karma: +2/-0
  • Founder of Odd Tales - Art Director
    • View Profile
    • Tim Soret - Showreel

Re: Practicing Animation

Reply #14 on: March 26, 2013, 03:11:06 pm
Sorry, but Disney has always drawn 24 frames per seconds.
12 fps however is typical of japanese animation.
Founder of Odd Tales
Art Director - Game Director - Game designer - Motion designer

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #15 on: March 26, 2013, 03:20:04 pm
Really? I read the animator's survival kit and that said that most disney-style animation is done on twos, aka two exposures. :U!
Sure, they show 24 images per second but that doesn't mean they draw 24 different images for it.
Also my art tumblr: ymedronart.tumblr.com

Offline tim

  • 0010
  • *
  • Posts: 240
  • Karma: +2/-0
  • Founder of Odd Tales - Art Director
    • View Profile
    • Tim Soret - Showreel

Re: Practicing Animation

Reply #16 on: March 26, 2013, 04:25:53 pm
Maybe you're talking about keyframes, but the best animation studios always had people called intervalists to draw the missing frames between the keyframes in order to smooth the motion and enhance the animation to real 24 frames per second. I'm sure about it. Just take a look at Snow White and you'll see instantly how smooth it is and how detailed the animation is.
Founder of Odd Tales
Art Director - Game Director - Game designer - Motion designer

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Practicing Animation

Reply #17 on: March 26, 2013, 06:08:12 pm
If you have the book on hand re-read pages 75- 79.
And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline ziggyrocknroll

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

Re: Practicing Animation

Reply #18 on: March 26, 2013, 09:59:22 pm
Ahem, having relatively recently had some training in animation, here's some blithering about traditional animation.

8 fps = choppy animation but still reads as movement. Old eastern europe/USSR style animation was done with this amount since it's cheaper.
12 fps = Default disney style animation, kinda the workhorse of animated films. (as in, most stuff is done with 12 fps)
24 fps = For extra fast and smooth movement, you have to try around with this. Don't do an entire thing with 24fps if you want to complete it in a timely fashion.

Traditional animation runs at 24 images per second, so the different framerates here are more about how many -different- images are shown. So with 8 fps each frame is shown 3 times, with 12 it's two times (hence the term "shot on twos") and with 24 every frame is shown only once.


Not sure how useful this is for you, thinking back, but it might help with experimenting. :U!

  It seems you guys are confusing fps (frames per seconds) with keyframing.   Frame per seconds means exactly that, you have certain amount of frames per 1 second of film/animation.  You can have 24 frames in a second in 1's which means there is 1 drawing per frame, in 2's which means you have 1 drawing every 2 frames, 3's which means 1 drawing every 3 frames, etc.  There is no rule defined on what is considered right, there are standards which makes things easier for all of us but doing an animation in 6's is not a bad thing, it is just unusual and rarely applied by most animators.  Do not limit yourself with what Disney and other studios have done, they follow guidelines to reach their goals and they look good, sure, but that doesn't mean any other method should be blacklisted.   There are tons of animators out there who mix and match their actions with 1's and 2's even 3's and 6's to make their animations have more impact.  The only way for you to see this is to study the animations you like and figure out how exactly they did it.  That's like the best thing about animating..  Don't know how animator X did that awesome super kick look so awesome?  Stop the animation and study it frame by frame, it's right there, there is no secret juice or formula, there is just things that work on certain actions and things that don't.  Experiment and figure out how to mix and match, but whatever you do, don't limit yourself to what is printed in paper.

Now, when we talk about keyframing we are really talking about using a system. In order to lay down your action clearly it is easier to simply "break down" the movement into steps.  You start with the first most important movements, the ones that either lead the action or define a motion (such as an anticipation, a squash or a stretch, etc).  So for example, in a walk, you would key frame the drawings that define the walk itself such as taking the first step (when the character stretches the left leg to move, then the passing position (when the body is switching sides moving the right leg to the front and letting the left leg stay behind), then the landing position when the right leg hits the floor and the left leg is the one stretching to catch up with the body). I just did a 3 keyframe walk, you can chose to play this 3 keyframe walk in 24fps, 12fps or 4fps.  Most of the time if you play this animation at any fps you are going to have a crazy woobly loop of nonesense because you only have 3 drawings defining an action.   This is why for a normal walk at 24 fps least 9 keyframes per leg are recommended or "required".  If you draw all the 9 keyframes and then play it, your animation is not going to be woobly anymore, it will make sense.  Sure it won't be a perfect walk (because it is missing frames) but it will look like a walk.

 Since all you have right now for that walk are 9 keyframes you still need more information for the eye to read a smooth action.  This is when you start to lay down inbetweens,  which are the drawings between the keyframes that help the eye fill the blank spaces and complete the action.  You can even subdivide those inbetween into "major and minor breakdowns" which are sort like keyframes between keyframes.  So you have a Key frame in frame 1 and another Keyframe in frame 8.  This means that between your drawings there are 7 blank frames, so in order to continue filling out the animation you would then draw the Major breakdown, which would be the frame between KF 1 and KF8, in this example that frame will be the dead middle frame 4, but it can really be any frame depending on your timing.  Now you have 2 KF and 1 Major breakdown, so now you need to draw something between your KF's and your Major breakdown, this are called minor breakdowns.  So your drawing between KF 1 and MB 4 would be Minor breakdown at frame 2, or at frame 3 which ever works best for you.  You can follow this process with the rest of the animation allowing you to organize your planning in a more efficient way.  So now when you are planning your animation all you have to do is think in steps.  Start with the Keyframes, then move into Major Breakdowns and finally do the minor breakdowns, all the while checking your animation that it read wells and all.  This will help you keep track of your action, your spacing, your timing and your posing without wasting time going back and forth fixing single frames once you are done.  Key framing is a method of organizing your work and is there to help you create a clear and smooth animation it is by no means a law and in fact in 3d, all that is used is keyframes and inbetweens, there is no major and minor breakdowns, unless you assign them so.

  That's another wonderful thing about animation, that even inbetweens can affect the overall impact of the action.  Richard Williams explains this very well by telling you that when you create an action never inbetween in the perfect middle of two drawings, always try to aim for a side to lean on.  Meaning, if you have a key frame on frame 1 and another on frame 4 and your animation is on 2's then your inbetween drawing should be on frame 3.  This drawing can either favor more keyframe 1, or be close to the action in keyframe 4.  Depending on your choice, your final animation can have a completely different impact and this is can either make or break your work.  It is early in this stage of planning your animation that you start to use spacing to smooth out your actions.  In animation there is a rule of thumb I follow, the less space between drawings the slower the action, the more space between drawings the faster the action (slow in/slow out's).  Same thing can be said of frames, the more frames you have, the smoother (which usually translates to slow) action, the less frames the less smooth (faster) action.  I might be misusing the word smooth here a bit, but I am referring more to the timing of the action more than the readability.  How an action reads has more to do with posing and spacing than with the amount of frames it takes to deliver it.

  Disney animation is good but is not the only good type out there.  Don't dish anime just because it is not Disney quality, anime does an incredible job with vfx and fast actions, they are very good at delivering action with a limited amount of frames which can be useful to learn for future projects.  Sticking to one style or dismissing another just because it is not "appealing" to you is limiting yourself as an artist and as an animator for no reason.  You can have an opinion on what is best, but that does not mean you are right.  Study everything and anything that moves and you'll soon learn that the only truth is that your eye is seeing things moving, how fast or how slow is just an illusion.  Hell the whole point of animation is to create an illusion so go ahead and just play around.  Give it a go!  Sorry if I confused anyone, I just didn't have time to do nice little drawings as examples, maybe this weekend?  Maybe not?  I am terrible at posting things on forums.
« Last Edit: March 26, 2013, 10:19:05 pm by ziggyrocknroll »

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #19 on: March 26, 2013, 10:15:41 pm
To be frank I'm not even sure anymore... (I don't have the book at hand as it's the school's book, and it's only occasionally on a table or something.)
But Ziggy wrote a good post on this, I approve wholeheartedly.

Sorry for derailing the topic.
Also my art tumblr: ymedronart.tumblr.com

Offline Ymedron

  • 0010
  • *
  • Posts: 306
  • Karma: +0/-0
  • All draw and no paint!
    • View Profile
    • My Deviantart account

Re: Practicing Animation

Reply #20 on: April 08, 2013, 08:46:18 am
Okay, re-bumping it up!
I just now remembered to investigate the book again, and on page 75 it says that the first time the author saw anyone go down the page on twos (two exposures per image) was when a warner bros animator came in for their production. He used twos for most stuff because he was used to the tighter budgets. (I also remember, but didn't read very recently that part, that twos are the "workhorse" while "ones make it fly".)
I'd still dare saying that twos are more likely the better solution when you don't have the money to do everything on ones. (I kinda feel like shooting on ones might have the effect of over-defining some actions, too. Especially with 3d animation the problem often is the lack of snappiness in the movements, which results from the computer drawing in every in-between + doing a fairly mechanical job about it.)
Also my art tumblr: ymedronart.tumblr.com

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation [Updated Progress]

Reply #21 on: June 09, 2013, 04:25:31 pm
This one is very WIP.
Makes me feel like the other animations are pretty tame though..

Gonna have to figure out some kind of crab walk for this guy..
The reason he's only bipedal is because he's supposed to explode when the player hits him from below, so the button needs to be visible..

He also does way more things than other enemies, hides, walks, activates his lamp thingy, explodes, shakes when you bounce into him..
So there's a lot of stuff I have to get in there, including idle animations :D



Also there's this one, which is also wip.



revised version of the lightbulb robot:



Had to make it more compact and more plain to keep it more inline with previous enemy designs.

edit:

Finally finished up this guy too!

« Last Edit: June 10, 2013, 07:50:46 pm by Seiseki »

Offline big brother

  • 0010
  • *
  • Posts: 341
  • Karma: +0/-0
  • herculeanpixel.com
    • View Profile
    • Portfolio Site

Re: Practicing Animation

Reply #22 on: June 19, 2013, 04:25:24 am
Very charming! You manage to squeeze a lot of personality into very simple designs.

Nitpick: when the circle guy does his "cough" it would help if his eyes followed the shaped of the gray area and bulged accordingly. The timing is good, it just reads a little flat otherwise.

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Practicing Animation

Reply #23 on: June 20, 2013, 02:57:08 am
Yeah, I was a bit lazy with that..
I also noticed there seems to be a frame where the eyes seemed off-center..
Gonna have to look this over again.

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: Practicing Animation

Reply #24 on: June 22, 2013, 05:28:58 am
Have you thought about making this one so the water falls into a small pool at the bottom of the helmet?


I think it would look funny especially if it was kinda swirling around in there a bit.