How to use a sprite sheet in Unity3D

blog post header image

Build a running animation for your character in Unity3d starting from a sprite sheet

Are you ready to bring your game characters to life with realistic and immersive 2D animations in Unity? Look no further! In this tutorial, we will be diving into the exciting world of sprite sheet animation and showing you how to create a smooth, seamless running animation using Unity. Whether you're a beginner or an experienced Unity developer, this tutorial is the perfect starting point for adding dynamic animations to your Unity projects. So, grab your sprite sheet, and let's get started on creating some dynamic, engaging animations that will take your game to the next level!

What is a sprite sheet?

Basically, a sprite sheet is a single image file that contains multiple smaller images, or sprites, arranged in a grid. These sprites can be used to create animations by cycling through different sprites in the sheet. Sprite sheets are commonly used in 2D game development and graphic design to efficiently store and manipulate multiple images, reduce memory usage and improve performance in games. It's also used to store multiple animation frames, in a single image file, this way it can save memory space and improve loading times. In the case of this tutorial, we will use sprite sheets to create animations for characters, objects, and other entities.

Sprite sheets can be easily created and edited using tools like Adobe Photoshop, GIMP, specialized software like TexturePacker, or Final Parsec's very own in-browser sprite sheet maker.

Importing the sprite sheet into Unity

Before importing a sprite sheet to our Unity project, we need to make a few configurations to get it working properly.
In the Unity Editor, click on the window tab > Package Manager. Now find 2D Sprite and click install, if it isn't already. The 2D sprite Package gives you the ability to create and edit Sprite asset properties like pivot, borders, and Physics shape.

Now that we have created the Unity project, and installed the 2D Sprite Editor, we need to import the sprite sheet to our project.

To do this, you can simply copy the sprite sheet into the Assets folder. Or any folder you are keeping your art. Unity will automatically recognize it as a sprite sheet and import it as an asset. Once it's imported, you can use it in your project by dragging it from the "Assets" window to the scene or hierarchy.

Now that the sheet is in your project, select it in the editor and ensure the following settings are set in the inspector window.

Change texture type to Sprite (2D and UI)

Change Sprite Mode from Single to Multiple.

Next, click on the Sprite Editor. It may ask you for confirmation to apply the change. Click apply to open the sprite editor window.

The Sprite Editor is equipped with a slice tool that allows users to slice Sprite Sheets into individual Sprites that can be used in Sprite Animations. Sprites that are meant to be used in animations are sometimes arranged in a grid-like manner and are better suited to be sliced using one of the manual slice operations. It is also worth noting that the artist will purposefully space Sprites evenly in a Sprite Sheet to allow the animation to playback smoothly. If Sprites are not spaced evenly, it could result in a wobbly animation.

Now that you know how the sprites are organized, let's slice up our sprite sheet. For that:

Click the Slice button to reveal the Slice dropdown menu and choose Grid By Cell Count

In the Grid By Cell Count options, change the value of Columns to 10 and the Rows to 1. Next, apply the changes

You can check to make sure everything is sliced correctly. If not, you can manually edit the shape and click Apply.

Once you have successfully sliced it, close the window editor and check your sprite sheet in the asset folder. you will realize that it is divided into sprites.

Creating the running animation from selected sprite

Now that we have a sprite sheet that has been sliced up, we can animate it. To animate the sprite sheet, we need to drag and drop it into the game scene. By doing so, Unity will automatically begin the process of adding an Animator to the asset in the Scene and also create an Animation Clip from the selected Sprites. You can name it whatever you want but in this tutorial, we will name it runninganimation.anim. The default animation is a looping animation. Since our sprite sheets are set up with the lunar rotation moving in the same direction, the animation for running is automatically created. There is no need for additional adjustments or configurations. You can render the running animationby simply pressing play.

Creating keyframe animation

Animating sprites in Unity is a straightforward process, similar to animating any other GameObject. The key to this process is keyframes, which are points on an Animation Clip timeline that store information about the GameObject, such as its Transform data. These keyframes represent a change in the data, resulting in an animation when played. Unity takes the data from one keyframe and smoothly interpolates it to the next, creating a seamless animation.

To create animation using keyframes, refer to the following step:

First, go to Window > Animation > Animation to open the animation window.

Select the Sprite Game Object from the Hierarchy. In the Animation window, click on the Animation Clip dropdown menu and choose Create New Clip Browse to the desired folder to save the Animation Clip and rename it Save the Animation Clip

To start creating keyframes, go to the Animation window and press the Record button. Manipulate the keyframes to create your desired animation. Unity automatically records movement in Animation Mode. Once you have finished, click the Record button to deactivate it and press the Play button in the animation window to preview the Animation Clip

Summary

In conclusion, using a sprite sheet in Unity3d to create animation is a powerful method for bringing your characters to life. By importing your sprite sheet and manipulating keyframes, you can easily control the animation and create a smooth, seamless movement. It's important to pay attention to the settings for each frame of the animation, such as the frame rate and the transition time, in order to ensure that the animation looks and feels natural. With this tutorial, you should now have a solid understanding of how to use sprite sheets in Unity3d to create running animations. With a little practice, you'll be able to create realistic and engaging animations for your Unity3d projects.

Take a look at the Github project used to create this article.

Want to learn more about Unity3d animation? Check out our previous articles on the topic or consult the official documentation of Unity3d for more information.

Recommended posts

We have similar articles. Keep reading!