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.

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.

Photoshop

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 Import Data 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.

Script settings:

  • Write layers as PNGs An image file is created for each layer.
  • Write a template image An image containing the assembled skeleton images is created for use as a template.
  • Write Spine JSON A JSON file is created which can be imported into Spine.
  • Ignore hidden layers Hidden groups and layers are ignored.
  • Use groups as skins A skin is created for each group and images for each skin are created in their own subfolder.
  • User ruler position as 0,0 When imported into Spine, the Photoshop ruler position will match the 0,0 world position.
  • PNG scale Scales the layers before writing the image files. This is useful when using higher resolution art in Photoshop than you want to use in Spine.
  • Padding The number of pixels around each image. This can avoid aliasing artifacts for opaque pixels along the image edge.
  • Image output directory The folder where the images files are written.
  • JSON output directory The 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.

A number of alternate Photoshop scripts have been posted to the Spine forum (example).

Illustrator

The Illustrator script is similar to the Photoshop script, though with slightly fewer features. If needed, in Illustrator you can click File, Export, PSD, then open the exported PSD with Photoshop and run the Photoshop script described above.

Gimp

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.

After Effects

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.

Inkscape

The Inkscape script exports both layers and a JSON file.

Video

Next: Tools Previous: Basic Concepts