Add an animated pet

In this tutorial, you’ll use the Sprite Editor to make an animated 2D cat or dog, then add your new pet to the living room. This more dynamic element will help bring your scene to life a bit more.

2D sprites are often animated using sprite sheets. A sprite sheet is a large image containing many smaller images (sprites). As you might know, an animation is just a series of image frames played one after the other — and a sprite sheet is useful for holding all of those individual frames in one place.

Unity has a built-in tool called the Sprite Editor that helps you work very efficiently with sprite sheets.

In this step, you’ll open either the dog or the cat sprite sheet in the Sprite Editor.

Instructions

1. In the Project window, navigate to _Unity Essentials > Sprites > Animated.

2. Select Sprite_Sheet_Cat or Sprite_Sheet_Dog to preview the sprite sheet at the bottom of the Inspector window.

3. In the Inspector window, change the Sprite Mode property from Single to Multiple, then select Apply.

This will allow you to slice the sprite sheet into multiple individual sprites.

4. Select Open Sprite Editor to view the sprite sheet in the Sprite Editor window.

Instructions

1. From the Slice dropdown, keep the default Automatic options, and select Slice.

Note: If you get a warning about a Potential loss of Sprite data, don't worry. Select Yes to continue.

You’ll see new gray rectangles around the individual sprites.

Note: If the Slice dropdown is grayed out, you might have missed the instruction in the last step to set the Sprite Mode to Multiple.

2. Select Apply to save your changes, then close the Sprite Editor window.

3. In the Project window, expand the Sprite_Sheet_Cat or Sprite_Sheet_Dog assets to reveal the individual sprites that make up the sprite sheet. Use the arrow keys to flip through the sprites to get a sense of the animation in the Inspector preview window.

With your sprite sheet now neatly sliced into individual images, you just need to create an animation file that controls how these frames will be animated in the scene.

Instructions

1. Use the Shift or Ctrl (macOS: Cmd) keys to select all eight of the individual sprites for either the dog or cat (0 through 7), then drag them together into the Hierarchy window.

2. A dialog will open that asks you to save a new Animation file in your assets. Name the new animation file either “Dog.anim” or “Cat.anim”, then select Save.

This file controls how to cycle through the frames of the sprite sheet.

3. In the Hierarchy window, rename Sprite_Sheet_Cat or Sprite_Sheet_Dog to “Cat” or “Dog”, then move the animated pet to an open spot in the living room.

4. Just like with the furniture, set Order in Layer to 10 so the pet is always on top of the rugs.

5. Enter Play mode to see your animated pet in action.

The player will be able to pass right through the animal right now — you’ll fix that next.

Just like you did with the furniture, you’ll need to configure the physics on this animal so you can push it around.

Instructions

1. With the pet selected, add a Circle Collider 2D component and Rigidbody 2D component so that the player can interact with it.

2. Configure the Rigidbody 2D properties appropriately:

• Increase the Mass.
• Increase the Linear Drag and the Angular Drag.
• Set the Gravity Scale to 0.

3. Enter Play mode again to test the interactivity.

If you want, add the other animated animal to bring even more life to your scene!

Congratulations on using the Sprite Editor to bring a pet to life in your living room.

Here are some of the things you learned along the way:

• Define sprite sheet.
• Explain how a sprite sheet can be used to create animated 2D objects.
• Slice sprite sheets into individual images using the Sprite Editor.
• Make an animated sprite sheet that loops through frames.

Instructions

Proceed to the next tutorial, which includes optional challenges to further develop your skills, explore new concepts, and improve your project.