Implement sprite sheet animations
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.
What is Sprite Sheet Animation?
In modern games, characters and effects are animated by moving 3D models, calculating explosions in real time, and displaying effects. This has become possible because the computing power of game consoles has increased, but since the old game consoles did not have that much power, sprite sheet animation that continuously switched images to make it look as if it was moving was the mainstream. The principle is the same as that of anime played on TV. Sprite sheet animations are used by fewer games than in the past, but they are still often used because the load required for calculations is much lower.
Sprite sheet animation switches and displays multiple images in a row. It is rare to prepare as many image files as there are, and basically all display patterns are included in one image. This makes it easier to manage image files and reduces the load on loading image files. The image file that summarizes this animation is called a "sprite sheet".
Create a sprite sheet
A sprite sheet is essentially just an image file. Since it has nothing to do with Unity, please create it with an image editing tool. The final file format will be a PNG file that Unity can handle.
In addition, there are the following rules for creating sprite sheets.
- Unify the image size of all frames. For example, if the first image is 32x32 pixels, the second and subsequent images will be 32x32 pixels. For example, if you prepare a sprite sheet in a "3x2" format with 6 frames, the size of the sprite sheet will be 96x64 pixels.
- You can align the image freely such as "6x4" or "2x8", but be sure to create it on the assumption that all frames will be filled. If it's "6x4", it's 24 frames, and so on. If it's a 13-frame animation, prepare it with "1x13" or "13x1".
- Since it is an animation, it is properly aligned so that there is no misalignment in the frames before and after.
- The direction of animation starts from the upper left cell and goes to the right, and when you go to the far right, it starts from the left one step down and goes to the right again.
In fact, you don't have to do the above strictly in Unity, but it's much easier to decide on the specifications in advance.
This time, I will use a sprite sheet to switch the following numbers. One square is 32x32 pixels. It consists of 24 "6x4" frames, so the image size is 192x128 pixels.
Configuring the sprite sheet in the Unity Editor
Once you've created your project, add a sprite sheet file to your project.
Here, it is assumed that the file name is NumberAnimation .
NumberAnimation Select the file and fill out the inspector as follows:
| Item | Values |
|---|---|
| Texture Type | Sprites (2D and UI) |
| Sprite Mode | plural |
There are many other settings that can be configured, but let's leave it as it is for now. Once configured, click the "Sprite Editor" button.
If the dialog below appears, click the "Apply" button. In fact, the settings of this inspector are to be saved, and if you scroll to the bottom, there is an "Apply" button, so you need to save the settings with this button. It will also be saved by "Apply" in the dialog, so it doesn't matter which way you save it.
The Sprite Editor appears. In this section, we will work on splitting the sprite from the sprite sheet.
There is a button called "Slice" in the upper left corner, click on it and change the type to "Grid By Cell Size". In this sprite sheet, one size of the sprite is "32x32" pixels, so enter 32 for each pixel size. When you're done, click the Slice button.
This image is difficult to understand because it seems to be clearly divided from the beginning, but it is divided by 1 sprite 32px. Press the "Ctrl" key and the split line will appear in green.
After splitting, save it with the "Apply" button.
If you click the triangle in the project's image file to expand it, you can see that the sprite has been divided.
Sprite Placement and Animation
Drag the set sprite into the view and place it.
Then a dialog will appear, so save NumberAnimation it as .
This file holds the animation settings.
The first sprite is placed in the view, and an animation controller and animation clip are created in the project. If the image is small, set the scale to make it larger.
At this point, the default animation settings will be applied, so you can just run the game. You should be able to see that the sprite animation moves as soon as the game starts.
Prevent animations from looping
Select the animation clip file (NumberAnimation.anim) from your project.
In the inspector, there is a check box for "Loop time", so uncheck it.
If you run the game, you'll see that the animation stops at 24. It is effective for one-time explosion effects.
Change the speed of the animation
Select the sprite you want to animate from the hierarchy.
Then select the Animation tab. If you don't have an Animation tab, select Window > Animation > Animation from the menu.
There is a number called "sample", which is a number of times to switch images in one second. In this sample, the animation is 24 frames, so the animation is repeated every 2 seconds.
If you decrease this number, the animation speed will be slower, and if you increase it, the speed will increase.
About other advanced animation settings
The various animation settings are explained separately in the animation-specific tips. These settings are not exclusive to sprite animations, but are not exclusive to the It is the same as setting up other motion animations and 3D animations.
In this tip, we will explain how to move from a sprite sheet as an animation.