Welcome!

You are just one step away from creating awesome games!

Sign up with Google

You need a Google account to use Defold

- Select manual -

Spine animation

Spine is a third party animation tool by Esoteric Software that allows you to create animations where movement of bones in a skeletal rig drives various parts of the animated object. It is particularly useful to animate characters and animals, but works very well for other types of objects, like ropes, vehicles or foliage.

Defold implements runtime evaluation and animation expressed in the Spine JSON format.

Defold supports most of Spine’s animation features, including inverse kinematics (IK).

Currently, Defold does not support animation keys that flip bones over the X or Y axis. Defold supports mesh animation but only with bones, meaning that you can’t animate single vertices. If you need to animate single vertices you can do that through a bone being 100% bound to that vertex only and animate the bone.

Concepts

Spine JSON data file
This data file contains the skeleton, all the image slot names, skins and the actual animation data. No images are embedded in this file though. Create this file from your animation software of choice.
Spine scene
The Defold resource tying together the Spine JSON data file and the image atlas that is used to fill bone slots with graphics.
Spine model
The SpineModel component is put in a game object to bring the graphics and animation to the screen. The component contains the skeleton game object hierarchy, which animation to play, what skin to use and it also specifies the material used for rendering the model. See SpineModel documentation for details.
Spine Node
If using Spine animation in a GUI scene, use Spine GUI nodes instead of Spine model components. See the GUI spine documentation for details.

Animation tools

The Spine JSON data format that Defold supports can be created by Esoteric Software’s Spine software. In addition, Dragon Bones has the ability to export Spine JSON data files.

Spine is available from http://esotericsoftware.com

Spine

Dragon Bones is available from http://dragonbones.com

Dragon Bones

Importing a Spine character and animations

When you have a model and animations that you have created in Spine, the process of importing them into Defold is straightforward:

  • Export a Spine JSON version of the animation data.
  • Put the exported JSON file somewhere in your project hierarchy.
  • Put all images associated with the model somewhere in your project hierarchy.
  • Create an Atlas file and add all the images to it. (See 2D graphics documentation for details on how to create an atlas and below for some caveats)

Export JSON from Spine

If you work in Dragon Bones, simply select Spine as your output data type. Also select Images as image type. This will export a .json file and all necessary images into a folder. Then add those to Defold as described above.

Export JSON from Dragon Bones

When you have the animation data and image files imported and set up in Defold, you need to create a Spine scene resource file:

  • Create a new Spine scene resource file (Select New ▸ Spine Scene File from the main menu)
  • Set the spine_json and atlas properties in the Spine scene file to reference the imported JSON and the newly created Atlas:

Setup the Spine Scene

Creating SpineModel components

When you have all data imported and your Spine scene resource file ready, you can create SpineModel components. See SpineModel documentation for details.

Creating Spine GUI nodes

You can also use Spine animations in GUI scenes. See the GUI spine documentation for details.

Animating Spine models and nodes

Defold gives you powerful runtime control of how animations should play through a Lua interface. See the Animation documentation for details.

Atlas caveats

The animation data references the images used for the bones by name with the file suffix stripped off. You add images to your Spine project in the Spine software and they are listed in the hierarchy under Images:

Spine images hierarchy

This example shows files laid out in a flat structure. It is, however, possible to organize the files in subfolders and the file references will reflect that. For instance, a file head_parts/eyes.png on disk will be referenced as head_parts/eyes when you use it in a slot. This is also the name used in the exported JSON file so when creating the Defold image atlas, all names must match an atlas animation.

If you select Add Images Defold will automatically create animation groups with the same name as the added files, but with the file suffix stripped off. So, after having added the file eyes.png its animation group can be referenced by the name “eyes”. This works with file names only, not paths.

So how do you do if your animation references “head_parts/eyes”? The easiest way to accomplish a match is to add an animation group (right click the root node in the Atlas Outline view and select Add Animation Group). You can then name that group “head_parts/eyes” (it’s just a name, not a path and / characters are legal) and then add the file “eyes.png” to the group.

Atlas path names

Moving on to animate your Spine model, please read the Animation documentation.


I want to report anonymously.