Indie Developer Survival, is about the survival of a lone indie developer. Trying to make a living by creating games. Will you survive? Or will you be lost to the madness of working in an ordinary store...

Post article RSS Articles

Walking Animation - How To

Animation Tutorial 12 comments

Animation   Small


When I animate, I try to create the illusion of depth. By rotating the shoulders of the character. Where do I start? I'm going to tell you, believe it or not. Let's begin...

First I try to get the core key frames. I start off with 4 frames in this walking animation. A silhuette of the character and red/blue for the moving limbs to easier see which one is which. The right limbs are blue and left red. You can animate directly from the character, but I have found that the easiest way to go about it is by getting the "bones" of the character first. It goes faster to just flesh it out and get the feel of the animation.

A Anim 3

Now this works for a start, however the more frames you have to more smoother. Now if that is the look you are going for aesthetically you might want to have a lower frame animation. Depends on the vision for your game. If it is animation, game design or mechanics always fit them to the game, video or so. This tutorial will end up with 11 frames. 6 key frames and 5 inbetweeners to smooth the animation.

GIF Walking


This is the animation with 6 keyframes. I added the rotating head for that effect I was talking about in the intro. Also notice how the shoulder is moving, it becomes a bit more dynamic. At this point it isn't perfect but it gets a decent amount of job done. We have the key movement, now it is it easier to improve the animation.

Let's add those 5 inbetweeners.

Middle


In this picture we have 11 frames and another frame for the head. Adding a bit more smoothness of it. Trying to sync the head with the shoulder movement.

GIF Walking moreFrames


Do you notice the difference in the smoothness of the walking. Getting the swing of the arms. Now at this point we got a pretty solid foundation. Almost Michael Jackson moonwalk quality. Those 5 more frames gives the animation a nice touch to it overall.

Char

The reference. Made some changes.


So now comes the step of getting the character to the final stage. More towards completion. So by using layers in Pyxel Edit, I draw on top of the silhuette using my finished character as a reference. I draw shadows the last.

Final


Adding the torso, the pants and the limbs. Since there is a size diference on the arms and so on I had to move the shoulder back a pixel. I try to redraw the pose, but it goes pretty fast because I've already drawn it before. Don't be to worried if some of the frames don't look perfect, either you try to fix it afterwards or it might not even be that noticable. Play your animation several times to find mistakes or odd movements, always easier when you the see the whole animation to spot these things.

GIF Final


This is what it looks like now when it is closer to finish. All that is required is getting some feedback from people, adding shadows and fix it a bit. I wanted to show you a final animation that still needs some work instead of the finished one, since you can learn from my mistakes aswell, as I do. Like the right arm is a bit floppy.

Hope it gave you some insight or knowledge that is of use to you all! Regards, the Fairy Axe team.

From Concept to Assets

From Concept to Assets

Design/Concepts Tutorial 4 comments

How we create assets by drawing on paper and then afterwards we create a pixel art asset with Pyxel Edit.

Visibility

Visibility

PR Tutorial

Making great indie titles is only the first step. What a lot of indie developers forget is actually being seen, so that your audience is aware of that...

Add file RSS Files
[WIP] Early Build

[WIP] Early Build

Demo

It is an early build with a lot of bugs and weird stuff happening, but early testing is great!

Comments
progorion
progorion

Nice article mate! Please check out my game as well: Computer Tycoon :)
Indiedb.com

Reply Good karma Bad karma+2 votes
FairyAxe Creator
FairyAxe

Thanks! I will sure check it out :)

Regards

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
Indie Developer Survival
Platforms
Windows
Developer
Fairy Axe
Engine
Unity
Contact
Send Message
Release date
Game watch
Follow
Share
Style
Theme
Survival
Players
Single Player
Project
Indie
Twitter

Latest tweets from @fairyaxetm

RT @DavitMasia: Hi ! Can you test the game and give me some feedback? ▶️ Scirra.com How much FPS? Bugs? Glitches?… T.co

7hours ago

RT @ninichimusic: Having great fun

Jun 23 2017

Hahah best part about game development messing about with numbers! #Indiegame #Indiedevelopment #GamedevT.co

Jun 22 2017

Been helping out wonderfully with programming! <3 T.co

Jun 21 2017

Having great help from dear @NikMikk getting that programming running! Check that dude out, he is very talented!… T.co

Jun 21 2017

We've been working on some more stuffs, like NPC walking around in the city! :D #PixelArt #IndieGame #IndieDevT.co

Jun 21 2017

Embed Buttons
Link to Indie Developer Survival by selecting a button and using the embed code provided more...
Indie Developer Survival
Statistics
Last Update
Watchers
11 members
Files
1
Articles
3
You may also like
Cowboy Clickers
Cowboy Clickers Point and Click
PARADIGM
PARADIGM Point and Click
Max Greene
Max Greene Point and Click
Alena
Alena Point and Click