[Tutorial] Part 3 : How to create a HTML5 game using Tiled Map Editor
This is a continuation from the previous post ...
Part 3: Character Animation and Sprite Sheets
Today I m going to talk about how I created my main character animation sprite sheet. An animation sprite sheet is a picture with several frames, it is usually used to speed up the draw call of your rendering engine.
There are also plenty of Youtube videos tutorials available:
For example:
Multiple Components
There are many different approaches to animating your character. One way to do it is to split all the body components such as head, torso, limbs etc) out as different components and each component has its own animation sheet.
The advantages of doing so is that it offers a lot of flexibility, (such as allowing your character to change/attach/detach components or body parts in game while each component can be animated independently from one another.
In my game, I only split the head from the body, since I only need the flexibility to animate head independently from the body.
Character Actions
In this game, the main character only has 5 actions:
- Walking
- Idling
- Jumping
- Crouching
- Firing
Animating Walk Cycle
I am not an expert in animation, but I came across a Youtube video which explains quite well about how to animate a proper walk cycle. Just click at the video below to watch.
I always use simple lines as the guidelines to draw. There are only 4 frames for each step (8 for both legs if you need to differentiate left and right legs )
Animating Idle Action
To make the character look more alive when idling, you can include some simple breathing animation. For this animation I just animate the chest to go up and down using only 4 frames.
Animating Jump Action
For Jumping, I just animated the leg to retract a bit, with a little bit of arm movement. Then apply a little bit of squash and stretch.
Animating Crouch Action
This is the easiest. Just copy one of the frame above and modify the foot a bit.
Animating Fire Action
For firing bullet, I only animate the head by opening and closing the mouth.
Final Sprite Sheet
To be continued...
Pretty nice tutorial. Waiting for part showing coding process.