Animating Wryn

Animating characters in a sidescroller is usually pretty easy, especially when you use something called a sprite sheet. A sprite sheet is a large image that contains all the animations for a character. Example time!

 

Shazam! Here’s a walking animation for a cool robot dude — all the frames are stored inside one large image. You play them one at a time, it looks like he’s walking! Simple!

 

But let’s say we want him to be able to shoot while walking — we’ll need to make a seperate animation for that. And what if we want him to be able to shoot up, down, and forward while walking? Each one of those has to have its own animation. A little more work, but still pretty simple.

 

And what if he can jump? And dodge? And shoot while jumping or dodging — in all directions? I’m sure you can see where I’m going with this. Sprite sheets are great, and often they’re all you need. But they can get out of hand if you aren’t careful.

Yeesh.

 

So now I’m making Bleed, and the main character can run, jump and dodge — and she can shoot 360 degrees around her while doing it. Is it time to make a sprite sheet with a million animations? Nope. Now it’s time to do something a little different.

 

Here’s the sprite sheet for Wryn. I divided her into three parts — head, body and legs. Now all I have to do is layer them on top of each other and I can mix and match for any situation.

 

 

Notice that some body animations have arms, and others don’t. While moving and jumping around normally, Wryn uses the bodies with arms. When shooting she switches to a body with no arms, adds two separate arm layers rotated in the shot direction, and overrides the head to look in the direction she’s shooting. When she shoots and air-dodges, every body part is overridden to match how she’d be twisted in the air to shoot in the proper direction.

 

Dividing Wryn up this way also allows me to animate in some other touches using nothing but code. I can angle her body and legs to make her lean into her movements, and I can subtly raise and lower her head and body while she runs, making the animation look more powerful.

 

And here’s a video of it all coming together!

2 thoughts on “Animating Wryn

  1. Congratulations, Bleed seems to be a very nice game. I’ve just watched the Youtube video from Reddit.

    And keep up with these posts, I’m really interested!