December 03, 2023, 10:27:10 am

The Gang Garrison 2 Forum

Please login or register.

Login with username, password and session length
Advanced search  

News:

NOTICE: Due to a rise in bot activity, new posters need to be approved before posting.

Join the community Discord server!

Pages: [1]

Author Topic: Rather quick tutorial on animating sprites ("How to get started + few tips")  (Read 26511 times)

Haxton Sale

  • The only true
  • Haxxy Organizer
  • *
  • Karma: 18
  • Offline Offline
  • Posts: 3541
  • HAXTON SAAAAAAAAAAALE!

Now I can't be the only better-than-average animator here, right? (Ok, Rebel is. And that guy who did pony animations. And few other people. Well, anyway...)
So, here's a simple tutorial on how to get started and some tips'n'tricks I can give you that should make your animations look better.
Note that not all of them have to apply to every animation.

1. Rotoscoping
I don't really like it and I never use it.
The main reason is my lack of more-professional-than-paint.net software. The second is that GG2 characters don't have human nor similar to their TF2 counterparts' proportions.
And it's just seems lazy to me.

2. Software
You can use anything you want, but here's what I recommend:
Paint.net - for spriting frames
Beneton Movie GIF - for combining frames into gif

3. GG2 characters
Grab the zip from here
The first thing you want to do after opening any of the spritesheets in your drawing software is resizing it to 50% to avoid bitmixing.
Now, as I said before, none of them have human proportions, nor are they drawn properly (just look at legs, you'll know what I mean).
But if you know what to do, it's not that big problem. Let's look at the medic, as he's my favourite class to animate. The easiest thing you can do is
removing his "toes" pixel from the rear leg. It already makes him look better. This is, actually, the only thing you can do. Unless you make longer animation,
completely change perspective etc.

4. Animating
Well, there we go, the part you've been waiting for. Or skipped to. I won't teach you how to make animation, as it's pretty much impossible. I'll just give you some
tips that should make it look better.
First of all, make sure to have at least 2 hours to waste. My dancing medic animation took me 4 hours, as I had to fix lots of things after seeing
full animation for the first time. And it has around 95 frames.
Now, let's get started. For some animations you might want to work on few layers. I rarely do it, but on the other hand, I often have to check previous frames to
recall the position of that button that I just covered with his hand. Though I did work on few layers when making animated class portraits, since it was obviously
easier to eg. move the gun itself on the foreground in Overweight's animation than move gun and fix everything that was behind it.
First of all, remember that your character most probably has bones. On the other hand, he might also have some clothes on. What does that mean?
Well, most importantly, his limbs can't be just curves. Except when they're nearly stretched. His clothing lets us slightly change position of his joints.
Look again on my medic animation. Notice, how after landing his knees are just above the boots, and as the animation progresses, knees move higher and higher (look at
the part where he walks back). This wasn't exactly intended, but the fact that he has clothes on (and that it's small, pixelated etc.) made you not notice that.
Dancing Medic:


Another important thing is gravitation. Notice how in pretty much all of my medic animations I made his coat fall down, while in-game it's just floating. You can
leave it floating, if you want to match the in-game style, but that makes your animation look more stupid (at least in my opinion). But, if you decided to obey the
rules of physics, you really have to remember about them, at least when there's nothing more interesting happening at that moment. I often had this problem, when,
after watching final animation, his coat froze in mid-air while falling down. But that doesn't only apply here. Look at the class portraits. Most notable is scout.
When his spinning his gun, it's momentum pulls him into the air (the hells, and whole body move 1 pixel up), and when it falls on his shoulder, his knees bend.
Or on Medic's animation, look at his medigun, or Heavy's minigun, when it's falling. Those little things may not seem noticeable at first, but if they weren't there,
the animation would really feel stiff. Overusing rules of physics will never hurt, as seen on the poor, red scout, eaten by Heavy.
Good example of falling coat: "Red scout eaten by Heavy":
Scout: (wait, I think I said something wrong about momentum here, but it still works)
Heavy (also look at his ammo belt):

Special effects. Those little things aren't as important as gravitation, but also make animation look slightly more interesting. But on the other hand, it looks
really bad if you overuse them. What I'm talking about here, are mostly trails (or whatever they're called). Again, let's look at medic's dance. When he's moving his
hands up and down, you can see those trails left by the gloves. Not every sudden move requires those, so as I said, don't overuse them. If you have time, try to
experiment and see for yourself, if the trail is really needed where you want to put it. If you do, just remember that it's colour has to be a little lighter than the
thing's that caused it, and it should fade to while to the side opposite to the direction it moves (I have no idea how to say it properly, just if something moves to
the left, the trail should be lighter on the right).
Scroll up for dancing medic. And check out Rebel's Dante in video below, especially his melee attack.

One little thing, remember that when someone moves his leg, he first pulls up his heel, and then the rest. And while walking, whole body moves up and down too.
I hope you found this tutorial at least a little helpful, so good luck and happy animating.

If you have any question about animations or want some feedback, post here or pm me.
Oh, and "Sorry for my bad english".

From RebelINS:

Another important point that should be emphasized is exaggeration. Low resolution sprites don't have much leeway for small pixel changes, because they won't be very noticeable at all, and it is difficult to convey what is supposed to be happening. Therefore, it's best to exaggerate certain poses or angles so that the overall image is more clear.

I didn't really use rotoscoping for my Dante animations (for the same reasons that Elk pointed out about proportions), but I did use reference frames from MvC3.

One of the main techniques I used in making these sprites was keyframing (I don't do that, but it can be useful - Elkondo). Keyframing is basically drawing out the most important parts of the animation first, before filling in the rest. Keyframes are usually points where an action is at its climax (ie. the initial launch explosion of Dante's Inferno launcher), or when something is at a straight angle (ie. some of the sword swinging frames). Basically, this allows you to control how smooth you want the transition from keyframe to keyframe to be, based on the separation. It gives you a better idea of where you're coming from (earlier keyframe), and where you're headed (later keyframe), instead of just going frame by frame without a clear path. This reduces the amount of planning you're doing while spriting, which is similar to planning/designing a game before coding it.

Dithering patterns could be used to simulate transparency

example:



source: google image search
« Last Edit: December 31, 2013, 01:10:54 pm by SkeleDude »
Logged
THIS POST GOT SIGNED BY

Haxton Sale

  • The only true
  • Haxxy Organizer
  • *
  • Karma: 18
  • Offline Offline
  • Posts: 3541
  • HAXTON SAAAAAAAAAAALE!

You can download most of my previous animations (if you need reference or something) from my art thread or (different ones) from HERE
« Last Edit: June 27, 2011, 09:54:52 am by Elkondo »
Logged
THIS POST GOT SIGNED BY

RebelINS

  • Martial Expert
  • *
  • Karma: 400
  • Offline Offline
  • Posts: 6841
  • I am a rising contender, confident to win.

Excellent tutorial Elkondo.

Another important point that should be emphasized is exaggeration. Low resolution sprites don't have much leeway for small pixel changes, because they won't be very noticeable at all, and it is difficult to convey what is supposed to be happening. Therefore, it's best to exaggerate certain poses or angles so that the overall image is more clear.

I didn't really use rotoscoping for my Dante animations (for the same reasons that Elk pointed out about proportions), but I did use reference frames from MvC3.

One of the main techniques I used in making these sprites was keyframing. Keyframing is basically drawing out the most important parts of the animation first, before filling in the rest. Keyframes are usually points where an action is at its climax (ie. the initial launch explosion of Dante's Inferno launcher), or when something is at a straight angle (ie. some of the sword swinging frames). Basically, this allows you to control how smooth you want the transition from keyframe to keyframe to be, based on the separation. It gives you a better idea of where you're coming from (earlier keyframe), and where you're headed (later keyframe), instead of just going frame by frame without a clear path. This reduces the amount of planning you're doing while spriting, which is similar to planning/designing a game before coding it.

Meower

  • Elder God tier or Fagthulu, the great
  • Community Manager
  • *****
  • Karma: 230
  • Offline Offline
  • Posts: 23866
  • Went fat once, never went back

I'll throw this thread in my "to read but no to do or actually yes" bin <3
Logged

Silly Walks

  • 2011 Haxxy Award Winner
  • *
  • Karma: 41
  • Offline Offline
  • Posts: 806

Nice tips Elkondo.

Also thanks for showing the Beneton gif thing, I've been searching for something like this for months :c1:

Logged
[TIC] and Penske
Some say that his pixel art cars are so sexy that he impregnated an entire school of catholic girls... all we know, is he's called the Silly Walks.

See my gallery today!

Haxton Sale

  • The only true
  • Haxxy Organizer
  • *
  • Karma: 18
  • Offline Offline
  • Posts: 3541
  • HAXTON SAAAAAAAAAAALE!

Any chance for getting this stickied, at least for some time?
Logged
THIS POST GOT SIGNED BY

Machidro

  • 2013 Haxxy Award Winner
  • *
  • Karma: 5
  • Offline Offline
  • Posts: 1674
  • Gardicolo time is over.

You should remove your link for beneton movie gif, it registers as a drive by download in avast and web of trust has at least 15 people saying its a trojan horse.
Logged
A CHALLENGER HAS ARRIVED.

Meower

  • Elder God tier or Fagthulu, the great
  • Community Manager
  • *****
  • Karma: 230
  • Offline Offline
  • Posts: 23866
  • Went fat once, never went back

Any chance for getting this stickied, at least for some time?
Ask skele later today (should be at around 20 from your point of view).
Logged

Saniblues

  • Onion Knight
  • Administrator
  • *****
  • Karma: -1305
  • Offline Offline
  • Posts: 12408

ASEPRITE is a pretty good tool for spriting.
http://www.aseprite.org/
It's an open source programming with basic stuff and layering. Also with GIF support.
Logged
Quote from: mop
Quote from: MR MAGN3TIC
I don't like it.  :nah:
Oh, well, you might as well pack up and stop now, because he doesn't like it
I'm bored out of my skull, Lets play a different game!
Lets take a visit down below And cast the world in flames!

Saniblues

  • Onion Knight
  • Administrator
  • *****
  • Karma: -1305
  • Offline Offline
  • Posts: 12408

Heyhey, Guys and Gals!

ASEprite updated, but now you actually have to pay money for the software. Like, actual money! What the heck! Older versions can be found here, and don't require any payment whatsoever.

http://www.aseprite.org/older-versions/
Logged
Quote from: mop
Quote from: MR MAGN3TIC
I don't like it.  :nah:
Oh, well, you might as well pack up and stop now, because he doesn't like it
I'm bored out of my skull, Lets play a different game!
Lets take a visit down below And cast the world in flames!

Pages: [1]
 

Page created in 0.028 seconds with 35 queries.