Skins

Skins allow all the bones and animations for a skeleton to be reused with a different set of attachments. This greatly reduces the effort needed for multiple characters that have similar bones and animations.

The key to skins is the Skin Placeholder. A skin placeholder is an attachment which goes under a slot in the tree, like any other attachment. However, it is just a placeholder for the actual attachment that will be used, which comes from the currently active skin. A skin is simply a collection of attachments for skin placeholders. When a different skin is activated, it changes which attachments are used for skin placeholders throughout the skeleton.

Setup

Setting up a skin consists of creating the skin and skin placeholders, then populating the skin placeholders with attachments for that skin.

Skin

A skin is created by selecting the Skins node in the tree and clicking New Skin.

Skin placeholders

Skin placeholders are created by selecting a bone or slot in the tree and clicking New... Skin Placeholder.

The skin placeholder will hold the attachment for each skin, so its name does not need to indicate which skin it is for. Instead, the skin placeholder name should indicate only what the attachment represents. For example, if you have a "red" and a "blue" skin, "head" would be a good skin placeholder name for the head, not "red head" or "blue head".

Attachments

To populate skin placeholders with attachments for a skin, first make sure the desired skin is active. The visibility dot in the tree indicates which skin is active. Here the "red" skin is active:

Once a skin is active, attachments can be placed under the skin placeholders to define the attachments for the active skin. If a different skin is made active, those attachments will disappear and any attachments defined for the newly activated skin will appear.

Shortcuts

If all the attachments for a skeleton have been created without using skin placeholders, it would be very tedious to create skin placeholders and move the existing attachments to them. To do this more efficiently, first use the filter buttons at the top of the tree to hide bones and slots so multiple attachments are easier to select. Next, create a skin or make sure a skin is active, then select the attachments and choose New... Skin Placeholder. This will create a skin placeholder for each attachment using the same name and the attachments are moved under the skin placeholder for the active skin.

Note that the New... button will be grayed out unless you have an active skin selected.

If skin placeholders are no longer desired, it would be tedious to move the attachment to the slot and delete the skin placeholders. To do this more efficiently, select the skin placeholders and click delete in the properties at the bottom of the tree. On the delete dialog, check Keep current attachment. This will move the attachments for the current skin to the slot before deleting the skin placeholders.

Reusing animations

Skins are an easy way to group attachments that go together. For example, you could have a male and female goblin that use different images. You could create two skins and at runtime choose which skin to use.

This is a fine usage of skins and in fact Spine comes with a "goblins" example project that does just that, but simply grouping attachments is not a hard problem to solve. For example, code at runtime could know which attachments to show on the skeleton to configure it to look like a male or female goblin.

The real power of skins comes from the fact that when an animation shows an attachment, it is the skin placeholder that is keyed and not the specific attachment. The actual attachment shown is the attachment for that skin placeholder in the currently active skin. Without this, animations that show attachments could not be reused.

For example, the goblins skeleton needs to have an animation that makes it blink by showing an eyesClosed-male or eyesClosed-female attachment on top of the eyes. Without skins, two animations would be needed. When using skins, only a single animation is needed which shows the eyesClosed skin placeholder.

Combining skins

Some projects require complex attachment configurations. For example, an avatar system where many different face, body and clothing items can be mixed and matched. To solve this, create skin placeholders as normal, then create a skin for each "item", just to group the attachments. Next, code at runtime will create a skin programmatically and populate it with all the attachments for each "item skin" to define the desired attachment configuration.

For example, you could have a red shirt skin which defines attachments for the torso, sleeveLeft, and sleeveRight skin placeholders. To configure a skeleton with the red shirt item, code at runtime would create a skin programmatically and populate it with all the attachments from the red shirt skin (and any other item skins desired).

Spine does not yet allow multiple skins to be active at the same time in the editor. This feature is planned, but until then skin combinations can only be seen at runtime.

Video

Next: Events Previous: Paths