A skeleton is made up of images attached to bones. Spine does not edit images, so you will need to use your favorite image editing software to create the art for your skeleton. Each part of the skeleton that will move independently needs to be a separate image file.
If your images are on separate layers in a Photoshop or Gimp file, a lot of time can be saved by using a script to bring them into Spine already assembled. Otherwise, the images need to be assembled by hand.
The first step to setting up a skeleton is to bring in each image as a "region attachment", which is a simple, rectangular image that is attached to a bone. See region attachments for more information.
Before region attachments can be created, Spine needs to know where to find the skeleton's images.
Images node in the tree stores a path to a folder where Spine will find images for the skeleton. The images path can be relative to where the project file is saved or can be an absolute path. The
Browse button can be used to specify a path, or you can type a path and press enter. Once the path is set, the images in that folder appear under the
Images node. Spine watches the images folder and immediately loads any changes to the image files.
Drag images from the tree to the editor area and Spine will create a slot and a region attachment under the root bone for each image. Multiple images can be selected in the tree using
cmd on Mac) and dragged to the editor area at the same time. Alternatively, images can be dragged directly to a bone or slot in the tree.
A region attachment can also be created by pressing
P or clicking the
Set Parent button in the image's properties at the bottom of the tree. Once in
Set Parent mode a bone in the editor area or a bone or slot in the tree can be clicked. When a skeleton has many bones, it is often easiest to choose a bone in the editor area rather than in the tree.
Images under the
Images node have a red icon if they are not used by any attachment and a green icon if they are.
Once all the region attachments have been created, the
Translate tools can be used to assemble them into the "setup pose", which is the pose of the unanimated skeleton. Next, the
Create tool can be used to create bones and move the attachments to the bones. Using these tools is explained in the next section.
Spine finds the image for an attachment by taking the path specified under the
Images node and appending the attachment name. The attachment name does not need to include a file extension. Spine will look for
.jpeg files. For example, for an images path of
./images/ and an attachment named
head, Spine will look for
./images/head.jpeg. Note that some operating systems are case sensitive.
Attachment names can include subfolders. For example, for an images path of
./images/ and an attachment named
red/head, Spine will look for
If an attachment has a
Path set, the path is used to find the image instead of the attachment name. Two attachments under the same slot cannot have the same name, but they can have the same path.
The path specified under the
Images node can be an absolute path, or it can be relative to the folder containing the Spine project file.
The order attachments are drawn is defined under the
Draw Order node in the tree. Slots higher in the draw order list are drawn on top of those lower in the list. The slots can be dragged up or down to change the draw order. Alternatively, the plus (+) or minus (-) keys on your keyboard will change the draw order of the selected images. Hold shift to jump by 5.
Adjusting the draw order can be made easier by using the filter buttons in the upper left of the tree view to hide both bones and attachments, leaving only slots visible in the tree under the
Slots node. These slots also represent the draw order and can be dragged up or down.
Normally when an attachment is selected in the editor area, it is also selected in the tree. When the tree is filtered so it doesn't contain attachments, the slot is selected in the tree instead which instantly shows where in the draw order the attachment resides.
When creating skeleton images using an image editing program outside of Spine, it's very likely that the images are created on separate layers and oriented correctly for the skeleton's setup pose. It can be tedious to export the images and individually reposition them in Spine. To save time, Spine comes with scripts to export both the images and position data from a number of image editing programs. This data can then be imported into Spine to save a lot of time when setting up skeletons.
The scripts can be found in the Spine installation folder, in the
scripts subfolder. The latest versions of these scripts can always be found here.
The images that make up the skeleton should be on separate layers in a Photoshop PSD or Gimp file. When the script runs it exports each layer as a separate image file and creates a JSON file in Spine's format. Import this JSON by clicking the Spine logo in the upper left, then
Skeleton. The imported skeleton will have one bone with all of the images from the Photoshop file attached using the same position and draw order they had in Photoshop. All that is left is to create the bones using the
Create tool, which is described in the next section.
Write layers as PNGsAn image file is created for each layer.
Write a template imageAn image containing the assembled skeleton images is created for use as a template.
Write Spine JSONA JSON file is created which can be imported into Spine.
Ignore hidden layersHidden groups and layers are ignored.
Use groups as skinsA skin is created for each group and images for each skin are created in their own subfolder.
User ruler position as 0,0When imported into Spine, the Photoshop ruler position will match the 0,0 world position.
PNG scaleScales the layers before writing the image files. This is useful when using higher resolution art in Photoshop than you want to use in Spine.
PaddingThe number of pixels around each image. This can avoid aliasing artifacts for opaque pixels along the image edge.
Image output directoryThe folder where the images files are written.
JSON output directoryThe folder where the JSON file is written. This should be the same folder that will contain the Spine project, else the skeleton's images path may need to be adjusted.
The Illustrator script is similar to the Photoshop script, though with slightly fewer features. If needed, in Illustrator you can click
PSD, then open the exported PSD with Photoshop and run the Photoshop script described above.
The Gimp script writes both layer PNGs and a JSON file. If needed, it may be possible to export to Photoshop and then use the Photoshop script described above.
The After Effects script exports After Effects animation data to Spine's JSON format. Some features that can't be supported in Spine are not exported, such as warp or glow effects.
The Inkscape script exports both layers and a JSON file.