The Pixel Character Creator 2D asset allows you to automatically animate characters. This is done with the help of both sprite sheets and a template character prefab. In this section, we’ll go over how the animating process works and how you can add custom animations.
Animations
Documentation: Pixel Character Creator 2D
Table of contents
5.1
Automatically animated characters
If you are using animations in 2D Unity games, odds are you’re quite familiar with having to manually slice sprite sheets and create animations frame by frame. If you have many different characters this process alone can take hours of your time. That’s why this is one of the core features the Pixel Character Creator 2D provides. This asset can automatically slice the sprite sheets for you and animate your characters frame-by-frame with just one click of a button. So how does it work, and more importantly, how do you actually set it up so you can use it with your characters? Let’s find out!
5.2
Animation Templates
If you’ve read the previous chapter, you’ll have heard about Character Templates. Animation Templates are similar in principle but are as the name implies a template that’s purely meant as a blueprint for the Animator and Animation Clips. In this sub-section, I’ll go over what Animation Templates are and how you can set them up properly.
What are Animation Templates?
Animation Templates are meant to be a blueprint for your custom character’s animations. This blueprint determines:
- which sprites from a sprite sheet are used in the animation;
- the duration of the animation;
- the position of the animation frames;
- whether or not the animation contains an Animation Event.
Defining your Animation Templates properly will allow you to automatically animate your characters at a fast pace. Do take into account that characters created with this animation template will be animated accordingly. If we want to add new animations to our characters and automate the creation process for these animations as well, we’ll have to add those animations to the template as well.
Setting up Animation Templates
If you are using the standard characters that were included in the package, you may skip this subsection. However, if you decide to use your own characters and custom animations you can learn how to set that up here. For this tutorial, I will presume that you already have a Template Character Prefab prepared to animate. If you don’t have a Character Prefab yet, I recommend preparing one first by following the steps in Chapter 4.2.
Step 1.
Animate your Template Character as you normally would. This is the only time when we’ll need to manually slice the sprite sheet and set up the animation frames ourselves. In this tutorial, I won’t go over the process of cutting sprites and creating animation frames. In this video, Brackeys explains how to create your animations with sprite sheets.
An important thing to keep in mind is that all individual sprites should have the same dimensions. You’ll also have to update the Sprite Export Settings to match the sprite sheets you provide. You can learn more about how to do so in Chapter 7.3.
Step 2.
Now that you’ve set up the animations you want, let’s start with organizing. Create a folder where you can keep all of your template Animation Clips and your Template Animator Controller. If you need an example of how I’ve set this up, you can find that by navigating to Assets > PixelCharacterCreator2D > OverheadCharacter > Templates > TemplateAnimations.
Step 3.
Next up, go to the sprite sheet you sliced. It should now consist of multiple individual sprites. Navigate to the Texture 2D Import Settings of your sprite sheet and click on the Sprite Editor button. With the Sprite Editor opened you can click any of the sprites to reveal bits of information such as the Name, Position, Border, and Pivot.
The only info we are currently interested in is the “Name”. For the Character Creator 2D to animate the sprite correctly, we’ll need to tell the Character Creator in which order the sprites are laid out. You can do so by naming them in alphabetical order or, as I like to do, give these sprites the same name but with a number attached at the end of the string. If you need an example of this, you can navigate to Assets > PixelCharacterCreator2D > OverheadCharacter > Templates > TemplateSprites. There you’ll find a sprite sheet called “TopDownPreviewDefault”. If you click on the arrow next to its name you’ll see the same view as seen in the image below. This is how I prefer to name the individual sprites.
As for the order in which the sprites should be numbered, the image below shows the exact order you should follow. Of course, don’t forget to click “Apply”.
Step 4.
Navigate to Assets > PixelCharacterCreator2D > OverheadCharacter and select the Character Data Manager called “PixelCharacterCreator2D”. Then open the Character Creator 2D and select the Character Template you recently added. Make sure that this character is the correct one and that it contains the animations you want.
Step 5.
Open the Export Settings and scroll down to the “Animation Export Settings”. Enable the option “Export Character Animations”. If you see an error message pop up here, your selected Character Template most likely doesn’t support animation exports. You can view the debug message section to find out what the problem is. If you don’t see error messages pop up, we’re good to continue.
Step 6.
Near the bottom of the “Animation Export Settings” section, you’ll find a button called “Fetch data from Runtime Animator Controller”. This will extract all relevant data from the Animator Controller that’s attached to the Character Template you selected. Upon opening the “Template Character Animations” List, you’ll see the following data:
- the animation’s name;
- ID;
- loop time (if it’s enabled or not);
- the amount of keyframes the animation has;
- the frames per second;
- the amount of Animation Events;
- a list of Animation Events found in the Animation Clip with the following data:
- the frame where the event is supposed to be triggered;
- the name of the function we want to call via the event;
- the keyframes of the sprite sheets that are used in the animation.
Step 7.
Now that you’ve extracted all this data, be sure to review the data and check if everything was extracted properly. Is the animation using the correct keyframes? Does it include the animation events you need? Is Loop Time enabled when it needs to be? After you’ve confirmed that the data was correctly extracted, you should be good to go. It is possible to manually edit these settings after extraction. Your changes will, however, be overwritten if you decide to fetch the data from the Runtime Animator Controller again. For this reason, if you find yourself wanting to adjust certain settings, it’s best to do so inside of the Animation Clips themselves.
5.3
Animation Events
What are Animation Events?
As you may have noticed in the previous section, Animation Events can be carried over from a Template Animation to the other Animations you want to create. Animation Events are special events that are triggered upon a certain animation frame being reached. You can view an example of what this looks like in the screenshot below. Animation events are particularly useful when you want to run a specific piece of code at a specific point in time during the animation.
In the example above, I created an Animation Clip of a character that can duck down. Upon Ducking down to the ground I want to trigger an Animation Event as soon as the animation has ended. This way I can, for example, signal to the Character Controller that we need to change a few things such as shrinking down the character’s hitbox or decreasing the character’s movement speed.
How to set up Animation Events?
Step 1.
In order to set up animation events you have to select a frame in the Animation Clip where you need your logic to trigger. Then click the 
icon. Look at the screenshot to see where you can find it if you don’t know where it is.
Step 2.
After clicking the icon, you’ll now be able to click the Animation Event inside of the Animation Clip’s timeline. You will then see a similar view to the screenshot below in your inspector window.
Step 3.
In order to run logic through this Animation Event, we need a script with at least one public function to reference here. This script needs to be attached to the same object that the Animator Controller is attached to. If you downloaded the demo files, you will find that one of the children of the Template Character Prefab contains a script called “EventOnAnimationDone”. The sole purpose of this script is to pass along a signal from the Animation Event in the Animation Clip to another script.
Step 4.
If you haven’t downloaded the script along with the demo files, here’s the C# code so you can create the script yourself and attach it to the object that holds the Animator Controller:
using UnityEngine; using UnityEngine.Events; public class EventOnAnimationDone : MonoBehaviour { public UnityEvent actionOnAnimationDone; public void ExecuteAnimationEvent() { actionOnAnimationDone.Invoke(); } }
You may notice that the class, UnityEvent, and function are all public. That’s because these have to be public in order for them to become accessible for the Animation Event. If you have attached the script to the same object as the one that holds the Animator Controller, you can now access the public void “ExecuteAnimationEvent” from the Animation Event.
Step 5.
Now all that’s left to do is return to the “Event On Animation Done” script and create a UnityEvent. You can do so by pressing the 
icon, dragging a GameObject into the empty slot, and then selecting the script and function that needs to be triggered.
For a more in-depth explanation of how UnityEvents work, I recommend watching this video by Contraband.
5.4
Animation Overrides
The moment you export a character with “Export Character Animations” enabled, you will create something called an Animator Override Controller. This Controller will look at the original Animator Controller that’s held onto by the Template Character Prefab. The Override Controller will then replace all animations in the original controller with the correct animations needed for the new character. This way, other settings such as animation transitions will remain intact, while the Animation Clips themselves can be changed easily.
