Chapter 3. 2D and User Interface Animation

In this chapter, we are going to cover the following topics:

• Exporting a 2D sprite animation from a 3D package
• Creating a frame-by-frame sprite animation with the Animation View
• Creating a 2D sprite doll animation with the Animation View
• Using the Animator Controller to play sprite animations
• Creating a fade out-fade in transition with the Animation View
• Creating a swipe transition with the Animation View
• Using filled images for creating animated progress bars
• Using Mecanim states for animating UI button states

Introduction

In the previous chapter, we were working with the Animation View, which is an essential tool for authoring animations in Unity. This chapter explains the 2D and user interface animation pipeline. We will continue to use the Animation View to create various 2D and UI animation in this chapter.

Exporting a 2D sprite animation from a 3D package

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:

1. Create an...

Creating a frame-by-frame sprite animation with the Animation View

This recipe shows how to use the Animation View to create sprite animations from previously rendered (or hand drawn) frames.

Getting ready

To create a frame by frame sprite animation in Unity, you should first draw or render out the animation frames from a 3D package, combine them into a sprite sheet, and import the sprite sheet into Unity (see the Exporting a 2D sprite animation from a 3D package recipe). You can also download the provided example Unity project and go to Chapter 03 2D and user interface animation\Recipe 02 Creating a frame by frame sprite animation with the animation view directory. You will find a scene called Example.unity there, with a Coin game object that has been already animated. You can select it and go to Window | Animation to see how the animation was prepared.

How to do it...

To create a frame by frame sprite animation in Unity, follow these steps:

1. Select your sprite sheet asset in the Project View...

Creating a 2D sprite doll animation with the Animation View

In this recipe, we will use a different approach: a 2D sprite doll animation. It is based on creating a 2D doll character with all its limbs as separate sprites and then animating those sprites using Unity's Hierarchy and the Animation View.

Getting ready

To create a 2D doll animation, first you need to prepare your character sprite sheet with all the limbs as separate sprites. See the following screenshot for reference:

You can also use the example project, and go to the Chapter 03 2D and user interface animation\Recipe 03 Creating a 2d sprite doll animation with the animation view directory. You can find the Example.unity scene there, with a Warrior character already animated in the scene's Hierarchy. In the Animation directory, you can find a Warrior.png sprite sheet with all the body parts of the character.

How to do it...

To create a 2D sprite doll style animation, follow these steps:

1. Import your character sprite sheet with all the...

Using the Animator Controller to play sprite animations

In this recipe, we will create an Animator Controller to play 2D animations of a character. Unity's animation system is using the same principles for both 2D and 3D animation clips, which makes it quite intuitive to use.

Getting ready

First, you should have at least two sprite animations (or 2D sprite doll animations) ready. You can also go to the Chapter 03 2D and user interface animation\Recipe 04 Using the animator controller to play sprite animations directory and open the Example.unity scene. You will find an already animated Warrior game object there. If you play the game, you can use the arrow keys (left and right) to move the character. It will play 2D animations accordingly.

How to do it...

To create an Animator Controller for 2D animation, follow these steps:

1. Import your 2D sprite sheets to Unity the same way as in the Exporting a 2D sprite animation from a 3D package recipe.
2. Drag and drop one of the child sprites (not sprite sheets...

Creating a fade out - fade in transition with the Animation View

Every game has some sort of fade in/fade out transitions: between the levels, or when you enter a dialog or a cutscene, and so on. In Unity, we can create such transitions very easily using the Animation View.

Getting ready

You don't have to prepare anything for this recipe; everything is created in Unity from scratch. You can open the provided example Unity project and go to the Chapter 03 2D and user interface animation\Recipe 05 Creating a fade out - fade in transition with the animation view directory. You will find an Example.unity scene there. Play the game and press the space bar to see the fade in/fade out effect.

How to do it...

To create a fade in/fade out effect, follow these steps:

1. Open a scene.
2. Create an Image in the Hierarchy. To do so, go to Game Object | UI | Image menu on the top of the screen.
3. Image and Canvas game objects will be created in the Hierarchy.
4. Select the Image game object and set its name to BlackScreen...

Creating a swipe transition with the Animation View

In this recipe, we will create a bit more creative transition effect. A lot of the steps are similar to the previous recipe, but the final result is completely different. This recipe's goal is to encourage you to experiment with animating different UI properties to achieve interesting effects.

Getting ready

Similar to the previous recipe, we will create everything from scratch in Unity; you don't have to prepare anything beforehand. You can open the provided example Unity project and go to the Chapter 03 2D and user interface animation\Recipe 06 Creating a swipe transition with the animation view directory. You will find an Example.unity scene there. Play the game and press space bar to see the swipe transition effect.

How to do it...

To create a swipe transition effect, follow these steps:

1. Open a scene.
2. Create an Image in the Hierarchy. To do so, go to Game Object | UI | Image menu on the top of the screen.
3. Image and Canvas game objects will...

Using filled images for creating animated progress bars

In this recipe, we will create a very common UI mechanism: progress bar. The same concept can also be used for creating health bars, cooldown indicators, and so on.

Getting ready

Before we start, you should prepare at least one sprite image and import it to Unity. You can also use the provided example Unity project and go to the Chapter 03 2D and user interface animation\Recipe 07 Using filled images for creating animated progress bars directory. You will find an Example.unity scene there. Open it and play the game to see the effect.

How to do it...

To create an animated progress bar, follow these steps:

1. Import the progress bar image to Unity and set its type to Sprite (2d and UI).
2. Open a scene and create a new Image by using the Game Object | UI |Image command.Canvas and Image game objects will be created.
3. Select the Image game object and change its name to ProgressBar.
4. Find the Image component in the ProgressBar game object's Inspector.
5. Set...

Using Mecanim states for animating UI button states

Unity has a very powerful built in UI system. An important part of it is buttons. Buttons have four states: Normal, Highlighted, Pressed, and Disabled. You can use the default Color Tint option to visualize those states, but there is a more interesting option: the animation transition. This recipe covers it.

Getting ready

You don't need to prepare anything before hand as we will create animated buttons from scratch in Unity. You can also use the provided example Unity project and go to the Chapter 03 2D and user interface animation\Recipe 08 Using Mecanim states for animating UI button states directory. You will find an Example.unity scene there. Open it, play the game, and click on the buttons to see the effect.

How to do it...

To create an animated button, follow these steps:

1. (Optional) Import the Button graphic to Unity.
2. Open a scene and create a new Button by using the Game Object | UI | Button command. Canvas and Button game objects will...