Drawing animated 2D sprites can be a challenge. Some artists create their characters in a 3D package and export them as 2D sprites to make the animation process easier. In this first recipe, we will create such a character and export it's animation as a sprite sheet.
Getting ready
Before we start, you need to have an animated model in your chosen 3D package (we are using Blender). You can also download the provided example; open the project in Unity; go to the Chapter 03 2D and user interface animation\Recipe 01 Exporting a 2d sprite animation from a 3d package folder. You will find a scene
called Example.unity there, with an animated coin sprite. In the Animation directory, you can find exported frames and a sprite sheet containing them. You can also find a *.blend file with the coin model; set to render out the animation.
How to do it…
To export a 2D sprite animation from a 3D package and import it into Unity, follow these steps:
Create an animated object in your chosen 3D package.
1.
Set the camera to render out the animated object. The camera can be perspective 2. or orthographic, depending on what you would like to achieve. In this example (a
rotating coin), it is set to perspective to better show the animation. Try to have the center of your object in the center of the frame.
Render the animation into separate frames with a transparent background (often 3. 12 frames per second is enough for a good quality sprite animation). Use a logical
naming convention (for example, frame_01.png, frame_02.png, and so on). All the frames should have the same size in pixels.
Create a new image in a chosen image editing software (we are using GIMP in 4. this recipe). The image should have a transparent background.
Count all your rendered frames and set the size of the newly created image to be 5. big enough to contain all the rendered frames, one next to another (in columns
and rows). For example, an image of 512 × 512 pixels size can contain up to 8 frames of 256 × 256 size, 16 frames of 128 × 128 size, or 32 frames of 64 × 64 size.
Place all the frames next to each other on the newly created image (in columns 6. and rows), starting from the first frame, as shown in the following screenshot:
Export the image as a *.png file with transparent background.
7.
Import the image to Unity (drag and drop it to the Project View or go to Assets | 8. Import New Asset and choose the image file in the explorer).
Select the imported file in the Project View and go to the Inspector. Set the 9. Texture Type to Sprite (2d and UI), as shown in the following screenshot:
Set the Sprite Mode to Multiple, click on the Apply button (to save the settings), 10. and then click on the Sprite Editor button.
The Sprite Editor window will open, as shown in the following screenshot:
11.
Click on the Slice button, a dialog with additional settings will appear.
12.
Set the Type to Automatic, Pivot to Center, and click on the Slice button.
13.
To finish the editing, click on the Apply button and close the Sprite Editor 14. window.
The texture asset will be turned into a sprite asset with all the frames as separate 15. children: sprites with numbers added to their names, as shown in the following
screenshot:
You can use those children sprites as static 2D graphics or create an animation in 16. the Animation View.
How it works…
You can use animation frames rendered from a 3D package to create 2D sprites in Unity as long as those frames have transparent background. Combining those frames into a sprite sheet saves precious draw calls (sprites are treated as one texture) and makes your game run smoother on lower end devices. It is also easier to organize your project files if you combine sprites into sprite sheets. Unity can automatically split a sprite sheet with transparency into multiple sprites. It recognizes empty pixels (transparent pixels) and isolates individual objects (or animation frames) quite effectively.
Unity can also automatically pack the sprites into a sprite sheet using the sprite packing feature. To pack sprites into an atlas, first make sure that packing is enabled. To do so, go to Edit | Project Settings | Editor and check the Sprite Packer Mode. You should change it to Always Enabled. Then select the sprites you want to pack into one atlas and give them the same Packing Tag. Finally, open the Sprite Packer (go to Window | Sprite Packer) and click on the Pack button. All sprites with the same Packing Tag will be packed together.
There's more…
There are a few other, interesting options in the Sprite Editor:
In the Slice dialog, you can set the Type to:
Automatic: Unity will try to automatically slice the sprite sheet into individual sprites.
Grid By Cell Size: Unity will slice the sprite sheet into a grid with defined size of every cell in pixels. You can slice the sprite sheet into 64 × 64 pixel cells for instance
Grid By Cell Count: Unity will slice the sprite sheet into a grid of sprites with the given number of cells and rows
You can also set the Pivot of each sprite in the Slice dialog. There are multiple options available for setting the pivot of each created sprite to the center of the sprite, right corner, left corner, and so on.
You can also trim each sprite manually when you select it. To do so, click on the border of the sprite and drag it.
You can adjust the pivot of each sprite in a similar way. Select the sprite in the Sprite Editor, click on its pivot (the blue circle), and drag it to change its position.
See also
To create a sprite animation, see the next recipe.