Implement 8-way sprite character walking animation

Page update date :
Page creation date :

Verification environment

  • Windows 11
Unity Editor
  • 2020.3.25f1
Input System Packages
  • 1.2.0

Prerequisites for this tip

The following settings are pre-configured as a prerequisite for the explanation of these tips.

Reference site

About the 4-Way Walking Animation

We showed you how to do a four-way walk animation in our previous tips. In this article, we will explain the 8 directions, but most of the steps are the same as the 4-way walking animation, so we will only explain the differences here.

Preparation of walking graphics

Last time, we prepared graphics for 4 directions, but this time we will prepare graphics for 8 directions as follows. "Bottom left", "Bottom right", "Upper left", and "Upper right" have been added.

As for the order of orientation, it seems that the 8 directions are not so clearly determined compared to the 4 directions. However, the following formats are relatively common, so we will proceed with this arrangement this time.

under lower left
left Bottom right
right Top left
top Top right

Create a project and prepare images

This time, I will try to create something that can place a character and move it with the cursor keys on the keyboard. Since it is 8 directions, if you move diagonally, the graphics will be displayed in diagonal orientation.

The first step is to create a new 2D project. Add the character image you prepared for your project.

Select the image you added and configure the inspector settings. This setting is the same as for 4 directions.

Split the image in the sprite editor. The number of images will increase, but the tasks will be the same.

It is OK if the image in the project is displayed as follows.

Creating Animation Data

What you do here is the same as the 4-way walking animation. In the end, it is OK if you can create an animation in 8 directions. Please note that the numbers in the image are out of sync with the time in the four directions.

Animation file name setting image
IwamaruDown Iwamaru_0, Iwamaru_1, Iwamaru_2, Iwamaru_1
IwamaruLeft Iwamaru_6, Iwamaru_7, Iwamaru_8, Iwamaru_7
IwamaruRight Iwamaru_12, Iwamaru_13, Iwamaru_14, Iwamaru_13
IwamaruUp Iwamaru_18, Iwamaru_19, Iwamaru_20, Iwamaru_19
IwamaruLeftDown Iwamaru_3, Iwamaru_4, Iwamaru_5, Iwamaru_4
IwamaruRightDown Iwamaru_9, Iwamaru_10, Iwamaru_11, Iwamaru_10
IwamaruLeftUp Iwamaru_15, Iwamaru_16, Iwamaru_17, Iwamaru_16
IwamaruRightUp Iwamaru_21, Iwamaru_22, Iwamaru_23, Iwamaru_22

Make sure that each direction animates correctly.

Animation transition settings

The settings are the same as when it is in 4 directions until the middle, so I will omit it.

Once you've set up the Blend Tree, you'll need to create 8 Motions.

We will set the .anim added to the project to the 8 items in Motion.

Specify the direction of each animation numerically.

Direction XY
under 0 -1
top 0 1
left -1 0
right 1 0
lower left -1 -1
Bottom right 1 -1
Top left -1 1
Top right 1 1

This completes the animation setup.

Movement control

Movement is done by pressing a key on the keyboard, so you can create a script to control it. The content of this script is exactly the same as the one created in the 4 directions, so please refer to it. The script name should be "CharacterMove".

Once you've created the script, attach it to the character object.


This completes the whole process. Try running the game and pressing the cursor keys on your keyboard to move it. If the character moves in the direction you pressed it, and the walking animation moves while the graphic changes direction to the direction you are facing, you're done. This time, it supports 8 directions, so please check if the graphic is also diagonally applied when you move diagonally.