Implement 8-way sprite character walking animation
Verification environment
- Windows
-
- 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 | X | Y |
|---|---|---|
| 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.
execution
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.