Unity 5 – Using the Sprite Editor

Unity has a built-in sprite editor, which is used to modify sprites and sprite sheets.

Slicing Images 1. Download the three sprite sheets for asteroids, blocks, and gondola.

2. Start Unity.

3. Create a New Project named testspriteeditor and make sure it is selected for 2D.

4. Right-click in the Assets folder and choose Create and choose Folder:

5. Name this folder Sprites.

6. Repeat these steps and create the following folders in Assets:

Scripts

Prefabs

Backgrounds

The Assets folder should now look like:

7. Double click the Sprites folder to open this folder.

8. Right click in the Sprites folder and choose Import new Asset.

9. Location the Asteroid image file and click Import.

10. Repeat this step and import the Blocks image file.

11. Click the Blocks image and then click the Inspector tab to show the properties for this sprite.

The Inspector tab shows information about this sprite:

Since this is a Sprite Sheet and it contains a number of individual sprites we want to use the Sprite Editor to slice apart

these elements.

12. Next to the Sprite Mode text option use the drop-down to change from single to multiple.

13. Click the Sprite Editor button. You may get a message about unapplied import settings, but just proceed.

14. You see the sprite sheet in the Sprite Editor:

This is a single sprite image but it contains a number of packed sub-images. We want to slice these into individual images

so we can use them in the game.

15. Click the small Slice drop-down

16. In the Slice dialog box make sure the Type is automatic and then click the Slice button.

17. Click the Color button to switch to black and white so you can better see how the slices will be set:

The image changes to black and white and the sliced image outlined.

18. Click the Apply button to apply the slicing and then close your Sprite Editor window.

19. Click the Block sprite in the Sprites folder to choose this sprite and then click the small arrow icon next to this

sprite to show the results of the slicing.

Each element was given a name. The Sprite Editor did not create new sprites but created a reference to each sub-image

within the sprite sheet.

20. Close the Sprite Editor window.

21. Drag blocks_2 until it is below the Main Camera in the Hierarchy area:

Notice how this now shows up in the Game window.

Animating Images Sometimes the automatic slice feature does not work. Unity uses the background space around images to perform an

automatic slice. There are times when you must manually slice the images.

1. Make sure you have imported the Asteroids image. This image has sub-images too close together for automatic

slice to work.

2. Select the Sprite image in the Sprites folder, change the Sprite Mode to multiple, and click the Sprite Editor.

3. Holding down the right mouse button drag the image around the Sprite Editor screen. Use the middle mouse

button to zoom into the image.

4. Holding down the left mouse button drag a rectangle around the first rock and release the mouse. You see a

selected rectangle and an indicator box:

The first rock is identified as Asteroid_0.

5. Click the Trim button to trim this rectangle.

6. Repeat these steps to tag the remaining images in the first row. The reason you are not using an automatic slice

is because the set of images in the first row are too close together to slice. You will have to define each image in

the animation manually.

7. Click the Apply button to apply these slices and close the Sprite Editor window.

8. Click the right arrow next to the Sprite so you can see the sliced images:

You will next create a Game Object for this sprite and add animation.

9. Drag asteroid_0 from the Assets folder into the Hierarchy folder just below Main Camera.

10. With the asteroid_0 sprite object selected click the Window menu and choose Animation:

This will add an Animation component to the asteroid_0 sprite.

You see the Animator dialog box requesting that you create an animator object.

11. Click the Create button in the animation window and save the animation file with the name asteroidanim in the

sprites/assets folder.

12. Click the save button to create this animator. Notice that the Inspector window now has a new component

Animator.

13. Drag each clipped image from the Asteroid sprite into the animation window.

14. Click the Game tab to see the game window and click the Play button in the animation window to see your

animation playing.

15. Close the Animation window. You animation should still be playing in the Game window.

Creating Different Animations

You can create different animations from a single sprite sheet.

1. With your Unity project open, right click in the Assets/Sprites folder and choose Import New Asset.

2. Choose the Gondola.png file and choose Import.

3. With the Gondola.png file selected in the assets folder, set the Sprite Mode to Multiple and click the Sprite

Editor button:

4. Click the Apply button and open the Sprite Editor. You see the various images in this sprite sheet.

5. Click the Slice button and then click Slice to slice this image:

6. The images are each outlined and sliced into separate image. If you have trouble seeing the outline you can click

the Color button to change the image to black/white:

7. Click the Apply button (next to the color button) and close the Sprite Editor window.

8. Expand the sliced image using the expand button on the Gondola image:

9. Choose the first image in this list and drag into the scene. It also appears in the Hierarchy list:

You are going to create an animation for the first six frames of this sprite sheet (gondola_0 to gondola_5)

10. Make sure gondola_0 is selected in the Hierarchy list, select the Window menu, and choose Animation.

11. In the Animation window click the Create button to create an Animator.

12. Name the animation GondolaStand1 and click Save.

13. Drag the animation images starting with gondola_0 through gondola_5 into each frame. After you have inserted

gondola_5 go back to gondola_4 and back to gondola_0. This reverses the animation.

14. Click the Play button to play the scene. The character is now exercising (going up and down).

15. Drag Gongola_6 into the scene and create an animation named WalkRight.

16. Drag Gondola_6 through Gondola_9 into the frames. Play the scene and notice how fast the character is

walking.

17. In the Animation window, hold down the Ctrl Key and select each frame. Blue bars appear before the first and

after the last frame.

18. Drag the right-most blue bar to extend the animation. When you now play it the character walks slower.