[Tutorial] Part 3 : How to create a HTML5 game using Tiled Map Editor

in #gamedev7 years ago (edited)

This is a continuation from the previous post ...

Part 3: Character Animation and Sprite Sheets

Doge Warrior Screenshot01.png

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:

IMAGE ALT TEXT HERE

Multiple Components

Doge Warrior Fire

Doge Warrior SS Row 0

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:

  1. Walking
  2. Idling
  3. Jumping
  4. Crouching
  5. 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.

IMAGE ALT TEXT HERE

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 )

walkcycle2

Dogewarrior walking

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.

Doge Warrior Breathing

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.

Doge Warrior Jump

Animating Crouch Action

This is the easiest. Just copy one of the frame above and modify the foot a bit.

Doge Wariror Crouch

Animating Fire Action

For firing bullet, I only animate the head by opening and closing the mouth.

Doge Warrior Fire

Final Sprite Sheet

Doge Warrior Body

Doge Warrior Head

To be continued...

Sort:  

Pretty nice tutorial. Waiting for part showing coding process.

Coin Marketplace

STEEM 0.20
TRX 0.14
JST 0.030
BTC 66740.62
ETH 3336.11
USDT 1.00
SBD 2.72