Unity Tutorial: Animate Pixel Art using Aseprite and Animation Importer
Managing pixel art spritesheets and animations inside Unity without custom tools is a nightmare. Here’s what you have to do just to create the assets for a single character:
- Create a texture (png) through a paint program like Photoshop and import a png into the Unity project.
- Set the desired Import Settings for the imported texture to match the same settings you’ve used for every other texture you’ve imported.
- Slice the spritesheet into a sprite grid inside the Sprite Editor by entering the cell size.
- Create animation clips one by one to recreate the same clips you planned out when you made your art.
- Flip over your desk in a fit of rage.
This workflow is clearly not sustainable and a waste of precious development time. And it’s equally or even more laborious when you need to update the art.
We spent weeks during the infancy of Sparklite putzing around with different paint programs and custom tools to figure out how we would expedite our pixel art workflow. We debated the merits of using one sprite sheet per character, or one per animation while walking the Red Blue office dog. Then we discovered @talecrafter’s (FREE and open source) Animation Importer tool and it solved everything.
Here’s how you do all that with Animation Importer:
- Create your texture (png) through Aseprite or Pyxel Edit
- Drag and drop the file into Animation Importer in Unity
- Watch steps 2, 3 and 4 from the above list happen automatically right before your eyes
That’s it.
It was such a lifesaver for us that we decided to shout about it from the internet’s rooftops. So here’s a tutorial on how to use Animation Importer in your pixel art project. In this tutorial we will make a character in Aseprite, animate it, and bring it to life inside Unity. I’ve written it with beginners to Unity and Aseprite in mind, but experts should be able to skim it pretty quickly to understand the tool.
Prerequisites
Before starting, make sure you’ve installed Aseprite, which is well worth the $15 but there’s also a demo if you want to try it. You’ll also obviously need a Unity project ready to go.
*Edit* Aseprite is also accessible on GitHub for those who are comfortable compiling the source. I do still encourage those who can afford it and find it useful to support the development with a purchase.
Download, Install, and Setup
This section explains everything you need to know to install Animation Importer and get it ready to go to work for you.
Download the Animation Importer Tool
Get the latest version of the tool from the github repository. This is a .unitypackage, which is like a zip that contains the asset files.
Import the package into Unity
After downloading the package, import it into Unity via Assets > Import Package > Custom Package...
Setup Animation Importer
- Open the Importer through
Window > Animation Importer - First make sure the path to your Aseprite application is correct. It should be correct unless you’ve moved it to a location besides the default.
- Target Object should be left as SpriteRenderer. This is used for creating animations for UI elements, but since we are making a character right now we leave it on SpriteRenderer.
- Specify your project’s Pixels Per Unit. This is the number of pixels in the sprite that correspond to a unit in the world. We just use 1 to keep it simple (1 pixel is 1 unit), but we may change it to our tilesize of 16 due to concerns about floating point precision.
- Decide where you want to output your Sprites, Animations, and AnimatorControllers. These are the assets generated on import. We use the same directory because it keeps all the files in one place. It makes it easy to delete them all or rename them all (in bulk) if needed.
- Pick a sprite naming scheme if desired. We use default because we rarely have to look at sprite names so it doesn’t bother us.
- We opt out of Automatic Importing. It might be awesome, but we haven’t had any issues with the manual workflow.
- Non-Looping settings are where you specify which clips should *not* loop. You’ll want to come back to this as you add animations, but for now you can leave the defaults.
Congrats! You’re done with the setup.
Create Your Aseprite File
Next I’ll explain the basics of using Aseprite to create your character. If you want to know more about the things you can do in Aseprite you can refer to their documentation.
Create a New File in Aseprite
Open Aseprite and create a new file. Set the Sprite size to the desired size of each cell. This will be the same for every cell of the animation, so it needs to be the largest you could possibly need.
Create the first Frame
Next use the painting tools to create the first frame of your character’s animation. You can also add layers which affect all frames and are especially useful for guides or spot shadows. Each layer can be locked or hidden, as shown in this gif.
Let’s go ahead and save the file now. Animation Importer requires the Aseprite files be stored in the project, so go ahead and save it in a folder of your choice. We put all our Aseprite files inside a single Aseprite folder with subfolders for various object types such as Doodads and Characters.
Adding Frames
Add frames by right clicking the cell and selecting ‘New Frame’ or ‘New Empty Frame’. The little circle inside each cell indicates that it has pixels drawn in it. Add as many frames as you need for your idle. We end up using 6 in our idle. You can also edit each frame to set the duration in milliseconds.
Naming (Tagging) the Animation
Next we need to group the frames together as an animation. This helps Unity know which frames to make into Animation Clips. Aseprite uses what it calls “Tags” to designate frames as part of a single animation. To tag your animation, select all the cells by clicking and dragging across the numbers, right click and select “New Tag”. Name the tag, give it an optional color, and select “OK”.
You can make as many tags as you need, and they can even overlap cells.
Here I’ve made a hero with two animations, an Idle and an Attack. Since we are doing a top down game, we have to animate in several directions. So we name our animations with the direction as a suffix, such as Idle_D and Attack_D as shown in the following screenshot.
Import the Aseprite File into Unity
Next we need to import the file into Unity so that we can animate a character. This is where the Animation Importer tool comes in.
Go to Window > Animation Importer to open up the Importer. You’ll see three big buttons at the top of the window, with three headers. Each of these represents a method for importing the Aseprite file. The methods are Animations, Animator Controller + Animations, and Animator Override Controller + Animations. Each of these has a slightly different purpose, but they all import the animations from the Aseprite file. To understand when to use each one and which one is best for your workflow it’s best to understand what an Animator Controller is and what Animator Override Controllers are. But you can come back to that.
For now we want “Animator Controller and Animations”, so click your Aseprite file and drag and drop it onto the window where it says “Animator Controller + Animations” as shown in the GIF. After the progress bar you’ll see 4 new files as shown (note they may be in subdirectories based on your Animation Importer settings).
- The Spritesheet is the texture and sliced sprites that animation clips reference. You can also use these sprites as single sprites throughout your project.
- The Animator Controller is used on Animators to link animation clips to the object. If you open up the Controller you will see the two states, one for each animation clip.
- The Animation Clips represent the sequence of sprites that make up each animation. Notice each clip corresponds to a tag.
Updating these assets is as simple as dragging and dropping the file into Animation Importer again. This will cause the assets to be regenerated without destroying references to them.
Putting the Assets to Work
You’ve created all the assets you need to get your character animating in game. The next assignment is to create a GameObject that can use these animations and a script to control it.
Conclusion
With a little bit of practice this workflow will become second nature. By streamlining the creation and updating of controllers and clips, the Aseprite to Animation Importer workflow eliminates all of the annoyances of Unity’s default workflows. Now you can spend your time iterating on your great art instead of fumbling around with Unity.
As always, thanks for reading! Also huge thanks to @talecrafter for his work with the Animation Importer repository. And thanks to David Capello for his work on Aseprite, including command line integration!
Please feel free to reach out with questions or comments. If you’d like to support us and our content, please consider buying Sparklite on any of these platforms: Steam (Mac and PC), Switch, PS4, XBox One
If you’re a starving indie, here are some other good ways to support us that won’t shorten your runway:
- Follow RedBlueGames on Twitter to keep an eye on progress and news
- Share our posts with the community
- Contribute code or just bug reports to any of our Open Source repositories
