Screenshot Showcase - Map Showcase - Project Sandbox
Progressing Projects - Project Showcase


Tutorial Animating Sprites: Aki's method
#1
My method may not be the most effective or efficient, but maybe we can pick up some tricks from each other!  Tongue  Okay, here's the process I go through when I animate sprites:

Step 4: Now I'm animating! The still sprite is going to act as my first frame for now, so I'm gonna get started on Frame 2! I decided to start with tail movements, so I've separated the entire tail from the body.
[Image: suDuRn4.png]
You can see a ghost tail underneath, and that's from Frame 1. I'll be keeping that there as a reference while I change Frame 2.
Now here is the tail movement I've decided to go with, I'm gonna unwind it a bit and spread it out more than it already is, starting with this:
[Image: ywhnZs7.png]
I made this tail by cutting and pasting several bits of the original tail, however I did not rotate any part of it. I simply redrew a couple of corners that didn't line up perfectly. I'm trying to keep 3 limitations in mind as I continue to position the tail:
  1. The tailbone, as I noted in the planning stage.
  2. The shading on the tail is showing depth and should change a bit as the tail moves.
  3. The base of the tail should not move from where it is attached to the body.
That's how the tail is going to look for Frame 2. Now I'm going to use Frame 2 as a ghost guide for myself as I work on Frame 3, and then use Frame 3 as a guide for Frame 4, and so on. I'll move the tail a bit more each time, and then bring it back so that the tail can return to its' original position and create a nice movement loop. Here's what I've got so far:
[Image: cTTBN0I.gif]
It doesn't look like much does it? But know I've got one body part moving in a way that I want, and it's the base I'm going to work off of. 


Next I'm going to add a little movement to the arms, but before I start, I want to bring up some things about the official sprites 2, 3, 5, and 6:
[Image: 151.gif] [Image: 151.gif] [Image: 151.gif] [Image: mew.gif]
Firstly, As the Mew moves you can see that a lot of the sprite quality-especially the outlines-is lost (not as much in the earlier gen 2 because it doesn't move as much). This is because the pieces were rotated (not gen 6, that's a rip of a 3D model turned into a .GIF it looks that way because 3D objects do not have flat outlines, but you can still see how it changes shape when it moves) without redrawing them at all; I personally dislike it, but it is a huge time saver when you've got a lot of sprites to work on. The second thing I want to point out is how the movement of the tail and arms has the same pacing. The arms are at their highest point when the tail is closest to the body; The arms are at their lowest point when the tail is reaching furthest from the body.

They're in sync, which can be a great thing. But for myself, I want body parts that aren't connected to move independently of each other. So now that I'm ready to move the arms on my Mew, I'm going to start with...hmmm...Frame 3, as if it was my first frame, and make a short loop with only frames 3 through 7, (as opposed to the tail, which loops its' movement in frames 1 through 8, which is all the frames.). Hopefully this will hide some of the "seems" where the .GIF loops, and make it feel a bit more natural. Let's see:
[Image: zK8lRD9.gif]
Mew still looks a bit stiff to me, so I'm going to add some movement to those dangling back legs. I think I'll start with...Frame 6, that's not the start/end of any other movement loops yet.

[Image: roaeR1s.gif]Hmm, maybe it looks a little dis-jointed actually? Well, let's see what happens when I add that bobbing/floating movement: [Image: 93Levwl.gif]
There, I think that ties it together nicely. I saved this biggest movement for last specifically, because I wanted to be very specific in my smaller movements first, and those are easier to see when Mew isn't moving around as much.

I'll call that finished! This process usually takes me 30 minutes or so, but there are flaws like having to do the backsprites separately, and having to recolor every frame for shiny versions. Also, I like to make .GIFs in order to see my results right away, but Pokemon Essentials doesn't usually use .GIF files for battlers. You'll have to separate out the different frames into the proper format.  
 
[Image: u8xRtYU.gif]  [Image: 7hJzmPy.png]  [Image: LiQTRi1.gif]
↓ Sometimes I try writing tutorials ↓
Animating Sprites, Requests, Tilesets, Aesthetics
What Does my Game Need?

Reply
#2
I'll definitely use some of these techniques that you practice. One of the things I noticed right away is that you're thinking of the animation, one movement at a time, as opposed to what I did which was think one frame at a time. I'm definitely going to work on one movement at a time now. I also want to try out gimp, because it allows for much more control in the framrate. Also isn't 300 ms a bit slow. I always thought your Animatons were great, but they didn't seem to "move" to me. I could always see that still pictures were being cycled through. I've heard that the brain starts to see "movement" around 12 frames per second. I can't wait to start trying some of these techniques . . . when I get freetime.
[Fun Fact]: Did you know that the pokemon "Dewgong" is actually based off a "Dugong"?
[Image: SR12caV.png]
If you're interested in this, PM me : )
[-] The following 1 user Likes NinjaBoyz's post:
  • SpeedXaaa
Reply
#3
(09-15-2015, 04:27 PM)Ninja-boyz Wrote: I'll definitely use some of these techniques that you practice. One of the things I noticed right away is that you're thinking of the animation, one movement at a time, as opposed to what I did which was think one frame at a time. I'm definitely going to work on one movement at a time now. I also want to try out gimp, because it allows for much more control in the framrate. Also isn't 300 ms a bit slow. I always thought your Animatons were great, but they didn't seem to "move" to me. I could always see that still pictures were being cycled through. I've heard that the brain starts to see "movement" around 12 frames per second. I can't wait to start trying some of these techniques .  .  .    when I get freetime.
Yeah, the framerate is a personal choice, but if you're going faster (in GIMP I don't see much worth in going faster than 100ms per frame, it's harder to detect) be sure to adjust how you animate it.
[Image: _019_by_akizakura16-d8ulwdp.gif]
For example, I made Rattata here faster on purpose so it would be a bit more "twitchy" in movements in the whiskers and nose, but simply speeding up Mew here probably wouldn't look good since the movement in each frame is more exaggerated, intended for a longer framerate.
[Image: u8xRtYU.gif]  [Image: 7hJzmPy.png]  [Image: LiQTRi1.gif]
↓ Sometimes I try writing tutorials ↓
Animating Sprites, Requests, Tilesets, Aesthetics
What Does my Game Need?

Reply
#4
@Aki Well you don't necessarily have to change how the pokémon will move but if you have a higher framrate, it allows for smoother movements(like tweening if you know what that is), and you can do a bit more in the physics of the pokémon to show how easily they can move around which also says something about their size and weight.
[Fun Fact]: Did you know that the pokemon "Dewgong" is actually based off a "Dugong"?
[Image: SR12caV.png]
If you're interested in this, PM me : )
Reply
#5
Confused Confused God-tier stuff here, Aki! I'm not even a spriter and I feel a bit inspired. I've been thinking for a while of animated sprites for Opal, maybe much later on in the Beta Versions of the game. I also wish I could condense tuts like this, sometimes Tongue good job~!
[Image: Banner.png]
Primary Opal Blog
 
Opal has been canned, and the thread is locked. Thanks for the support!
Reply
#6
(09-15-2015, 04:48 PM)Ninja-boyz Wrote: @Aki Well you don't necessarily have to change how the pokémon will move but if you have a higher framrate, it allows for smoother movements(like tweening if you know what that is), and you can do a bit more in the physics of the pokémon to show how easily they can move around which also says something about their size and weight.

Yes you're right! I mean changing the movements as in, making them smaller in each frame. Like Mew can move 3-5 pixels per frame because it's moving slower, but at higher speeds it would look better to just move 1-2 pixels each frame. (and yeah size/weight is really important in planning too, I didn't touch on that as much as I should have maybe)

Thanks Kawaiiski!  Pleased
I'm allways afraid I'll leave walls of text so I try to keep it to the point. God-tier though, oh my.
[Image: u8xRtYU.gif]  [Image: 7hJzmPy.png]  [Image: LiQTRi1.gif]
↓ Sometimes I try writing tutorials ↓
Animating Sprites, Requests, Tilesets, Aesthetics
What Does my Game Need?

Reply
#7
Animating is very cool... And very hard!
Sprite by SpeedXaa
[Image: PVIyvBO.gif]
[-] The following 1 user Likes Kiedisticelixer's post:
  • Aki
Reply
#8
Okay so I've got about 9 frames for the fakemon in my avatar. Again it's not done so it just cycles through the ones I have right now but I think this was better than the last one I did. What do you think?
[Fun Fact]: Did you know that the pokemon "Dewgong" is actually based off a "Dugong"?
[Image: SR12caV.png]
If you're interested in this, PM me : )
Reply
#9
(09-15-2015, 10:02 PM)Ninja-boyz Wrote: Okay so I've got about 9 frames for the fakemon in my avatar. Again it's not done so it just cycles through the ones I have right now but I think this was better than the last one I did. What do you think?

Oh man those spines are looking really cool now! Big Grin
[Image: u8xRtYU.gif]  [Image: 7hJzmPy.png]  [Image: LiQTRi1.gif]
↓ Sometimes I try writing tutorials ↓
Animating Sprites, Requests, Tilesets, Aesthetics
What Does my Game Need?

Reply
#10
(09-15-2015, 10:02 PM)Ninja-boyz Wrote: Okay so I've got about 9 frames for the fakemon in my avatar. Again it's not done so it just cycles through the ones I have right now but I think this was better than the last one I did. What do you think?

The head looks a bit stiff, maybe have it tilt it's head left and right?
They Lactose!
[Image: 468_80_kizami.jpg]
[-] The following 1 user Likes Epic's post:
  • NinjaBoyz
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)