Images

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

The 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.

By default, only the first 2,000 image files found in the image folder are shown. Uncheck Limit scanning to have Spine find all 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 shift or ctrl (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 Scale, Rotate, and 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.

Image file lookup

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 .png, .jpg, and .jpeg files. For example, for an images path of ./images/ and an attachment named head, Spine will look for ./images/head.png, ./images/head.jpg, and ./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 ./images/red/head.png.

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.

Tinting

Attachments can be tinted a color, including transparency, by setting their slot's color. The slot color view makes setting the color more convenient.

Draw order

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.

Tree filter

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.

Scripts

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. Import the data, create the bones, and rigging is complete.

The scripts can be found in the Spine installation folder, in the scripts subfolder. The scripts are improved frequently and spine-scripts always has the latest versions of the scripts.

Scripts are provided for Adobe Photoshop, Adobe Illustrator, InkScape, GIMP, and Adobe After Effects. Also, some tools have built-in support for exporting Spine data, such as Affinity Designer. Currently the Photoshop script is the most sophisticated and provides the most features.

Video

Next: Tools Previous: Basic Concepts