Spine Animation Tutorial

 admin

The Complete Spine Game Rigging & Animation Course will show you how to create high quality stylized game animations that will stand up as professional work. The techniques taught in this course can be translated into just about any game animation software but this course specifically teaches Spine Animation. Jul 30, 2014 In this tutorial, I’ll show how to create a simple two-part animation: a bee that has two states, fluttering, and pausing. To begin, you need at least the trial version of Spine. Download it at.

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.

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.

If a skin is duplicated, the following options will be available:

Spine Animation Tutorial Youtube

  • Linked meshes turns all the meshes in the selected skin into parent linked meshes and creates children linked meshes inside each other skin if checked.
  • Inherit deform when checked, the linked meshes created will inherit the deform of the source mesh.
  • Duplicate keys duplicates the animation keys, such as mesh deform keys, from the original skin to the new skin when checked.
  • Rename attachments renames each duplicate attachment using the skin and skin placeholder names if checked, automatically changing the path to the folder that has the same name as the new skin name.

Skin placeholders

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

New skin placeholder

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

If a skin placeholder is created by selecting an attachment, the following options will be available:

  • Duplicate attachments for each skin will copy the attachment inside the new skin placeholder for each skin if checked.
  • Linked meshes will turn the selected mesh attachment into the parent linked mesh and will create children linked meshes inside each other skin if checked.
  • Inherit deform will create meshes that have the same deformation keys if checked.
  • Rename attachments will use the skin name in the path of the attachment for each skin.

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.

Skin bones

Bones can be added to one or multiple skins to be active only when a skin they are in is active. This means each skin can have its own specific bones.

To add a bone to a skin, select it, then click on Add bone to skin and click on the chosen skin. The bone can also be dragged and dropped on the chosen skin in the skin node. A skin icon will appear next to the bone name, hovering on it displays the number of skins the bone is in; clicking on it, will locate it inside the first skin that includes it in the skins node. If the bone is required by meshes, attachments, or constraints in different skins, the bone will also be added automatically to all the skins that require it. The Spine log will show the automatic changes.

If a bone not in a skin is parented to a skin bone, the bone may only be active when the skin bone is active, causing a warning icon to display next to the bone name in the hierarchy.

To remove a bone from a skin expand the chosen skin in the skins node, and select the bone. This will display a button in the bone properties to remove it from the skin.

Skin constraints

Constraints can be added to one or multiple skins to be active only when one skin they are in is active. Inactive skin bones and constraints are not computed at runtime, so there is no performance impact to having many skins with bones and constraints.

A skin can use constraints to move bones so a skeleton and all its animations can be reused for characters with different proportions.

Youtube

To add a constraint to a skin, drag the constraint from the constraints node of the tree hierarchy and release it on the chosen skin in the skins node of the tree hierarchy. A skin icon will appear next to the constraint name, hovering on it displays the number of skins the constraint is in; clicking on it, will locate it inside the first skin that includes it in the skins node. To remove a constraint from a skin expand the chosen skin in the skins node, and select the constraint. This will display a button in the constraint properties to remove it from the skin.

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.

Spine Animation Program

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.

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.

Spine Animation Download

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.

Spine Animation 2d

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.

Spine animation tutorial youtube

Spine Animation Tutorial For Beginners

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 animation tutorial

Spine Animation Download

The skins view allows previewing the different skins combinations in the editor.