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
Building the character
Some steps before opening Spine
Spine is ready to build any character by slicing it to independent images, for example in png if it needs some transparency, but in my case I have found there is a faster way to do it by importing directly all images from Photoshop using a special script made by Søren Nielsen you can download here: LayersToPNG, or here. Using it is quite easy:
- Put every part of the character in an independent layer in Photoshop
- Go to File -> Scripts in Photoshop and search for it.
- Check the “create JSON file” box
Following those steps, the scripts will create a png file for each layer and a json file to automatically build the character in a Spine project.
image folder fix
Setting up skeletons with Spine
Ok, now the character is ready, so let’s start creating a new project in spine by clicking in the upper left Spine logo. With the project ready, we are able to import the json file created by the Photoshop script by clicking again in the same logo and choosing “import data” this time. Don’t be afraid of all those red boxes, that’s only because the folder path is wrong by default, and everything will be ok after a quick set up. Just click on “images” folder and select the correct images folder using the “browse” button below.
Creating Bones
Once the character is imported, the tool is easy to use, just click on each part to move or rotate them, just clicking on the scale, rotate or move tools under the canvas. Looking at the right panel, the draw order list sorts which part will be rendered before others, so it’s easy to drag them and sort everything in the correct way.
To create “bones” click on “create” button, then in the right panel, select the parent of the bone to be created and then drag it from the starting position to the end. If shift key is hold while the bone is being drawn, the bone is assigned to the highlighted part of the character.
bone creation process
For example, if you want to create a bone for the hand, usually you should select the forearm bone as parent, then draw the bone starting from the end of the parent bone, and then drag to the hand holding shift to assign the hand as part of the bone. Sounds hard, but it is so easy when you get to the point.
Animation panel
Moving the skeleton
After creating all the bones, the skeleton is ready for the animation process. While using Spine you can switch between the setup panel and the animation panel by clicking the setup text or the animation text in the left upper corner of the canvas.
setup view
animate view
A good point to start is to switch to the animation panel, then select all the bones in the right panel holding shift and then click on the keys at the left of the translate and scale buttons. This is how key frames are manually created in Spine. To create an interpolation, just create a more keyframes.
creating the first key frame
If the auto-key function is enabled, Spine will create a key frame for each part you move in the current point of the timeline. The timeline options are similar to Unity’s mechanim.
In animation mode, each piece can be moved and rotated like in the setup view, but the awesome way to work comes with the “pose” function. If the skeleton is correctly created, moving any bone after selecting “pose” will move every child bone as well, so it’s easier to create a new key frame.
pose tool
More options!
The “ghosting” option is useful as well. Click on the “ghosting” button to open the options panel. There you can set how many frames before the actual one you want to see in the canvas as reference, or even frames in after the actual one to correct any frame with enough references. Give it a try; it has so many options to configure almost everything, from the color of the other frames, to the opacity and the number of frames to be shown.
ghosting options
The animation editor feels easy to use but quite powerful. The Dope sheet button opens the extended timeline, and clicking in Graph the curve panel is shown, plotting the curve of the selected transition. These panels work almost the same as Unity’s mechanim, so please check this post if you want to know more about how it works.
extended animation options
Final thoughts
Pros:
- Working with bones based on inverse kinematics is much easier than working with images.
- The tool is easy to use, powerful and have some nice tools like ghosting.
- Is easy to find lots of videos and tutorials about the tool in the web.
Cons
- A plugin is needed to import the animations in Unity and is not an easy process for the first time.
- Creating the character before building the skeleton might be boring if you need to import every image one by one.
- Some experience and knowledge is needed to create the skeleton. If the position of one bone is wrong, the quality of the final animation will be lower than expected.
In my opinion, if you are working mostly in 2D, it worth to pay for it as long as it isn’t so expensive and is quick and easy to learn. My first animation with Spine was for my last game jam and can be found right here.
Follow @EsotericSoft for more information and visit their website if you want to test or buy Spine.
See you next week with some more post!