Check other post from the same series:
Finally it’s here, my last post about 2D animation for Unity, and today it’s turn for Spine2D.
Spine 2D is a software created for 2D animation exclusively, external to Unity but with a plug in to include any animation in any Unity project. It worth the pain or is better to use any of the Unity built in options we have seen before? Click on read more to find out!
Spine interface
New week, new article here!
In my last post, I’ve started a new series of posts related to 2D animations for Unity3D with a short introduction to Unity3D Mecanim. Today is time to import some sprite sheets into Unity and try to get an animation from them.
I personally love crafting my own sprite sheets by hand, I feel my 2D animations much more under control, but for this article I’m using a finished sprite sheet. If some wants to know more about how sprite sheets are made, give a look to this post from the good old times. Before adding it to Unity, check if the size of your sprite sheet is power 2 sized (512*512, 1024*512, 1080*1024…) to avoid further issues.
Spite sheets in Unity 3D
In small projects everyone needs to wear multiple hats. That’s why I’m usually coder, designer and animator in most of my games, and I’m not creating sound effects and music because I literally have no time to learn about it.
For that reason I’ve taken a look to some methods to include 2D animations in all the Unity projects I’m creating while I get used to the engine. For now I’ve tested Spine2D, 2D sprites and the animator that Unity provides as a built-in feature, and this article is an introduction to the last one.
Unity Animator’s curves view
Two weeks ago, in my latest post, I mentioned a list with some things I wanted to know about. One of these things was 2D animation using sprites, and the way I did it may not be the most optimal and easy way to do it, but for once I did it from scratch, by moving every part of the character by hand and redrawing what was needed frame by frame. On the other hand I can say every animation I worked on wasn’t very complicated, mainly due to the short time available to finish them.
Some theory
There are some things you should know before start moving arms and legs. Your game will update the screen several times per second, based on the machine specifications where it’s being executed. This is called framerate, and since it is not equal between machines, a fixed time between tour animation frames will be needed. If you update your animation on each game update, your animation will show faster than light in newer machines and slower and sloppy in the older ones, even if the machine’s hardware is enough to run your game. In my game this is implemented with a constant called “millisecondsPerFrame”, which stores a fixed time in milliseconds (200 in my case). The game will update the screen as fast as possible, but the animation frame won’t change until the actual frame has been active for at least the time stored in that variable.
This amount of time is the base for your animation, every frame should be designed to be active that amount of time, and changing it while creating your sprites may end up with huge problems. The best way is to test which framerate fits your game using prototype textures and animations, and once it’s done, leaving the constant unchanged during the whole development. It’s the Holy Constant that rules your game graphics!
Animation test mannequin
Another topic to keep in mind while animating a model is how many frames we should create. In my case I always try to create as few as possible. You should create a frame for each noticeable change in the model, considering how it should feel: for a smooth transition, it’ll need more frames, while a sharp one could be done by a few.
For example, if we’re animating a bouncing ball, we can choose from a slower and smooth animation or a fast and sharp one only by creating four frames more for the slower one:
Smoother ball animation
Faster ball animation
Let’s move it
For this project I created every frame from scratch, using only Photoshop as main tool, even though this may not be the faster and optimal way to work. I haven’t tried any other alternatives like 3D flats with textures in 3D software like Blender or Maya. Feel free to make a comment with your thoughts about any other 2D animation process you know! maybe I’ll learn about it for the next project.
The first step is drawing the full character in a base state. He can be as complex as you want for your game, using vector graphics or maybe pixel art, but in case your choice is not pixel art, try to create your base character in a document with a high pixel per inch rate and a good size, as much as your computer can handle.
A little ninja in a pink pyjamas!
Yeah! you have your main character yet? Time to slice him into pieces! That may hurt a bit, but it’s going to make everything easier from now on.
Make some cuts on your character’s joints and give some space between them. There are several tools to achieve this in Photoshop, like the lasso tool, or the ellipse marquee tool, but in mi opinion the pen tool is the best option. Check this link if you want to know how it works: Pen tool tutorial!
Sliced ninja in a pink pajama!
At this point you will be in need of a huge amount of patience. For each frame you have to move every part of your character to the correct place, and sometimes, redraw every joint that not fits well. Your character sheet will need 40 frames? well, you just need to create 40 different puzzles using the slices as pieces. I told you, patience is the key to success.
If your Photoshop is not so old, you can use the timeline feature through the Window menu -> Timeline. You’ll see a frame where you can create frames and play them, which is a useful tool to test your process and tweak every position without getting the texture into your game. Here is a timeline tutorial if you’re having problems dealing with it.
Once you have every frame, you’re almost there. Put every frame in a sprite sheet. I’m usually using a grid, mainly because it’s easier to code, but there are some other options that optimizes the document sizes but makes it hard to code, like the angry bird example:
optimized sprite sheet example, all rights owned by Rovio Entertainment Ltd
one row grid spritesheet example
And there it goes! Your spritesheet is finished and ready to be included in your project. As I said earlier, this way may not be the faster way, and there are some tools that may help you at some point:
See you in the next article and feel free to share what you want with us!