Animation for 2D projects

You’ve made animation for 3D projects, including creating in-Editor animations with keyframes, refining animation curves, controlling animations with Animator Controllers and State Machines, and configuring imported 3D character animations.

In this tutorial, you’ll explore a 2D version of a similar scene and you’ll see how the implementation of those same animation features would be similar or different.

In this step, you'll open the CreativeCore_2D project and then explore the 2D Animation demo scene within it.

Instructions

To test out and explore the 2D Animation scene, follow these instructions:

1. Download and open the CreativeCore_2D project:

• If you’ve already downloaded the CreativeCore_2D project in a previous unit, open it now using the Unity Hub.
• If you haven't downloaded it yet, you can download the project here and then open it using the Unity Hub.
• When the project is open in the Unity Editor, verify you see a CreativeCore_2D folder within your Project window, containing several subfolders.

2. Open the CC_Animation_2D scene:

• Go to Assets > _CreativeCore_2D > Scenes, then open CC_Animation_2D_Scene.

3. Enter Play mode and take note of the Animation elements:

• Enter Play mode.
• Notice the following:
  • There’s an animated cat lying on the grass.
  • The robot has a default idling animation, then also has distinct animations for running up, down, sideways, and diagonally.
  • There’s an animated door that opens when you get close to it, then closes when you move away from it.
  • Behind the door, there’s another robot doing a different idling animation.
• Exit Play mode when you’re done.

You’ve now experienced the 2D scene's animations firsthand and are ready to delve into their specific technical implementation.

What's the same?

Animation Controllers

The door in the scene uses an Animation Controller with states and transitions and an Animator component.

• Select the Door_Red GameObject, then locate the Animator component.
• In the Controller property, double-click the Door_Controller asset, which will open the Animator window.
• Explore the different animation states and transitions between them to see how they work. Transitions between the states are controlled by a Trigger parameter named PlayerProximity, just like in the 3D scene.

Keyframe animation

You can animate objects in the Animation window with keyframes. In this scene, the door is animated with simple keyframes just like the door in the 3D scene.

• In the Project window, navigate to CreativeCore_2D > Animations > Door, then double-click Door_Open_Anim to open the animation clip in the Animation window.
• Select the Door_Red GameObject in the Hierarchy window.
• Drag the current time indicator along the Animation window timeline to preview the keyframe animation.

What's different?

Sprite sheet animations:

Instead of animating a 3D model, you often animate a 2D sprite by cycling through a sequence of images from a sprite sheet. A sprite sheet is a single image file containing multiple smaller images (sprites) arranged in a grid. By rapidly displaying these sprites in sequence, you create the illusion of movement. In this case, both the cat and the player robot have spritesheet animations.

Note: Using the Sprite Editor to slice and prepare sprite sheets is a bit beyond the scope of this tutorial, but you can find more information in the Sprite editor documentation.

Explore the cat spritesheet

• In the Hierarchy window, select the Cat_Animated GameObject.
• In the Sprite Renderer component, select Open Sprite Editor to see the cat’s sliced spritesheet.

Explore the player sprite setup

The player also uses a spritesheet, which houses the sprites for its idling and running animations. These are all configured using an Animation Blend Tree, which determines which animation clip to play, depending on the player’s x and y speed.

1. In the Hierarchy window, select the PlayerRobot GameObject.

2. In the Animator component, double-click on the PlayerRobot_Controller asset assigned to the Controller property to open it in the Animator window.

3. Double-click the Moving state to open the blend tree.

4. Explore the blend tree’s properties in the Inspector window to see how it’s set up.

5. In the Animator window, temporarily drag the Look X and Look Y sliders to the left and right to see how the blend tree would change animation clips depending on the direction and speed of the player.

2D skeletal animation

For more complex 2D character animations, you can use 2D skeletal animation, made possible by the 2D animation package. This involves creating a skeletal rig with bones for your 2D sprite, allowing you to animate different parts of the sprite by manipulating these bones, similar to how 3D characters are rigged. This process can be made easier using 2D Inverse Kinematics, which automatically calculates for the positions and rotations of a chain of bones moving towards a target position.

2D skeletal animation offers several benefits similar to 3D workflows, including the following:

• Reusable skeletons and clips across characters
• Less labor‑intensive than frame‑by‑frame animation
• Reduced file size from lighter texture needs
• Easy swapping of accessories or body parts

To see the skeletal animation implementation in the scene, follow these steps:

1. Temporarily disable the red door in the Scene view so you can more easily see the Robot_SkeletalAnim GameObject behind the door.

2. Zoom in on the character and experiment with moving the character’s feet and hands around. This allows you to experience the power of 2D inverse kinematics.

3. To see how this is set up, navigate to CreativeCore_2D > Sprites, then select Robot_Skeletal_Sheet. Select Open Sprite Editor, then open the Sprite Editor dropdown and select Skinning Editor.

Note: 2D skeletal animation is beyond the scope of this tutorial, but you can find more information on it in its documentation or download Unity's Dragon Crashers sample project, which includes a wide range of characters with skeletal animation.

You now understand how to implement animation in 3D projects and how that translates to, or differs from, 2D projects. You’re ready to apply these concepts to your own personal projects, be they 3D or 2D.