Top-down Movement and Attack Game

Mechanics in Unity
 08th May 2020
 by Pav
 Reading Time: 12 minutes
Introduction

In this tutorial we are going to investigate the implementation of an RPG top-down

movement and attack game mechanics in Unity. This type of style can be commonly

seen in a lot of older RPG’s such as Alundra from PS1 era.

Table of contents:

1. Making simple character sprite animations

o Walking Cycles Animations

o Attack Animations

2. Importing sprites into Unity

3. Setting up character animations

o Setting animation transitions in animator panel

4. Binding everything together with scripts

1. Making simple character sprite animations

I am going to use Aseprite to create a quite simple version of a game character

along with his walking cycles and attack animations in all 4 directions. To keep

everything straightforward, the sprites are 16 x 16, and each animation lasts no more

than 4 frames. Given that it is such a small canvas we have to make sure that his

head occupies most of the designated space. The reason is that the facial area

carries the visual information (i.e. mimics) the player will be interested in the most.

Start by drawing a circular shape in the upper part. Turn on the ‘Horizontal

Symmetry’.
Add rectangular shapes on the sides and filled-in rectangles in the bottom part.

Colour the individual parts of the sprite and add eyes – these can be single pixels

located on each side of the head. At this stage you can add more details such as
hairstyle and t-shirt cleavage. To finish off and give our character more depth add

some shadow to his face. The best way to do this is to pick up a darker ‘Value’ of the

face colour in HSV colour space. Click on the colour label on the left, go to ‘HSV’ tab

and scroll ‘V’ down a bit.

Walking Cycles Animations

We are now ready to prepare our walking cycles animations. Press Ctrl + N in order
to add a new frame. Turn on the “Onion Skinning” tool so that we can preview the

adjacent frames to the one we are currently working on.

Move our character up by one pixel, erase left limbs and make them smaller while

the right limbs bigger. This will create the illusion of movement. You can also fiddle

with the hairstyle to further communicate that the character is moving.

copy the second frame as fourth one and flip it horizontally.

 Right-click on the first frame and select ‘New Tag’ option to label it.

 Type in name, such as ‘Run_Down’ and make sure that the animation is set for frames

1 – 4 with ‘forward’ animation direction.

Here’s the final output:

 Press Ctrl + N again to create a new frame.

 Copy the first frame and paste the content to it.

 Fill in the face with hair colour.

 Create new frame, move entire sprite up by one pixel, make limbs on the left smaller

and more saturated, mess the hairstyle a little bit.

 Create two last frames using the same method as before and add a tag for the

animation.

This is what you should end up with:

 Create a new frame and paste the contents of the first frame of the ‘Run_Down’

animation.

 Erase half of the sprite and take a note of the position of the head, hands, and legs.

 Make the hairline look like the head is being seen from the side.

 Erase (cut?) the right-hand side portion of the hair leaving the hairline only on the

left-hand side.
  Add the contour for the rest of the body as if the hand and leg is visible from the

side. Keep in mind the limbs height level and reference the front sprite if needed.

 Colour the individual parts and add final details such as eyes, hairstyle, and shadows.

The idea here is to match the same look visible in the front-view sprite, but don’t

worry if it’s not 100% accurate!

Create new frame and once again move character up by one pixel, remove legs

pixels and make them look as if they are in “contact / passing” position. One leg

needs to be shifted further to the right while the other to the left. You can move the

hand a back and mess up hair a little bit to create an illusion of motion. For this

animation we are going to use only 2 frames. Make a new tag and name it

‘Run_Right’. Mind the frame numbers and direction. In order to create ‘left’ walking
cycle, simply copy-paste the ‘right’ walking cycle frames and flip them horizontally.

Congratulations! You have now finished walking cycles of your character in all 4

directions!
Attack Animations

Let’s have a look at the attack animations. I’m going to make 2 frame animations for

each direction to keep things simple. The idea here is to make our character ‘punch’

his opponents with fists. Create a new frame and copy-paste the first frame from

‘Run_Down’ sequence. In the next frame make the right hand to appear much bigger

so that it is directed straight at us. Complement the pose with making the left leg and

arm smaller as if they were pushed to the back. Label this sequence and copy the

first frame yet again as the new frame.

colour and get rid of cleavage from his t-shirt. This is the same method we used

while doing the ‘Run_Up’ animation earlier. Then, make the right hand and leg bigger

while the left leg and arm smaller to indicate as if the character is almost reaching

out forward up.

‘Run_Right’ animation. In the next frame stretch the arm of our character and once

again make his legs to appear as if his is reaching out. At this point you may also

wish to select his head and move it 1 or 2 pixels to the right so indicate this

movement better.