Set the images folder, then bring images into your project by dragging them into position. Or, save a LOT of time by using the PhotoshopToSpine script to bring your images into Spine all at once, in the correct positions.
You can open more views by clicking in the upper right corner.
Use the create tool to start creating bones. Select the parent bone first, then click and drag to create new bones.
Muscles can be simulated with bones in Spine! Use an IK constraint to mimic the muscle's contraction.
The iris follows the pupil with a bit of lag, to give the eye more depth. This can be achieved with transform constraints, or by simply turning the irises into meshes and binding them to both pupil and eye bones.
A basic dog running animation. Quadrupeds vary a lot! Always use references of their actual bone structure for your rigs.
Shoulders can be difficult to rig. Add additional bones and weight your shoulder meshes for much better bending behavior.
Here's a simple 2.5D effect using only a mesh weighted to both a stationary bone and a control bone. Great for gear attached to a character and to reduce the number of bones and constraints.
Here's a 2.5D effect achieved with a transform constraint and smart usage of weights. This is a great way to add depth to character faces or create complex perspective effects.
Parenting bones can be simulated temporarily by turning transform constraints on/off. In this example, we activate two constraints to hold a two-handed sword.
When animating clothes, give them their own, independent bones to more easily adjust a pose or animate secondary motion. Parent the clothes' bones to the bones they should follow, like arms or legs.
Long clothes, like a cloak or dress, can be rigged by parenting the clothing mesh only to clothing bones, then parent the clothing bones to the body bone they should follow.
Multiple poses or directions can be created using a single skeleton. Each pose or direction gets its own attachments. When animating a specific pose, attach only the attachments for that direction and pose the skeleton as required.
Here are examples for a shoe in front, 3/4, and side views. In the 3/4 and side views, form a triangle so that the base has a straight line and the opposite vertex is where the toes should bend.
The example below is a single animation on the same skeleton. The visual variety is achieved solely by using different skins!
When using a transform constraint setup where one bone inversely follows another, scaling one or both bones can result in interesting perspective effects!
Don't go overboard with the number of bones and vertices! Always use the least number that give the effects you need.
Smooth bending doesn't need complex setups. The rod and fishing line each consist of 2 bones, to which a mesh is weighted. No paths were used in the creation of this example!
Here's one way to rig a quadruped leg, using 4 bones and IK. Many animal skeletons are just human skeletons with different proportions!
Here's how you can rig the front leg of a quadruped using 3 bones and 2 IK constraints. Quite similar to a human limb!
The flame consists of three overlapping images, with the second image's blending set to additive. Animate alpha and rotation, then duplicate and scale for variation. Voila, a birthday cake!
Simple, modular characters with mostly round shapes can fake 3D well. Rig the character in a frontal view, then animate bone positions and attachment visibility to create other views!
Quickly make sparkles using key Adjust! It gives off an "under the sea" or spiraling effect, yet it's only zigzagging.
The 5 whipped cream toppings are meshes weighted to and controlled by only two bones, creating a path like behavior without actually using Spine's path features.
A 2.5D facial rig. Split the face mesh up into sections controlled by face bones. Parent these bones to a control bone for a perspective effect. Test that it works even in extreme positions.
Meshes are challenging and vary from case to case with no absolute rules. Here's a breakdown of the logic used to create a facial mesh. Use edges and outlines in the image as guides for edges in the mesh.
Suffering from sliding feet syndrome? Temporarily translate or constrain your character to a path to check and modify your walk animations! Once you are happy with your feet, remove the translation.
Here's how to rig a wing with two images that are being swapped for a flapping animation. The Update Bindings button lets you painlessly bind two images when the bone positions are different!
Layers of fabric can be rigged with layers of bones. The white skirt is independently controlled by a set of bones, which are parented to the green skirt’s bones, which are parented to the large control bones for easy adjustments.
Make it harder for people to spot your keyframes! Create a loop with two poses, add curves, then offset the children so that the start of each loop is equally spaced.
If you have outlines on both the upper and lower limb images, you can create images that retain their outline for all rotations.
Use translation or scale to simulate frontal rotation, adding depth and expressiveness to your rigs. Here it seems as if the arm gestures disapprovingly towards you!
The order of bones in the Weights view controls the order the mesh triangles are drawn. Use this to control how a mesh overlaps itself. The further down a bone is in the list, the earlier the triangles with vertices most affected by its weights will be drawn.
Here's a comparison of an equal length chain of bones vs Fibonacci lengths, which can be better for ropes, hair, or anything that needs to bend more near the end.
Use IK compress and turn off inherit rotation to have the pupil follow a target while staying within the eye!
Skin constraints let you apply constraints only when a specific skin is active, which is great for adding skin-specific variations!
Binding bones to an already bent image gives worse deformation. Try drawing your assets straight, then bending them later in Spine.
Constraint order matters! If another constraint moves the target after IK is applied, the bone won't be pointing at the target. Drag constraints to change the order they are applied.
The dress follows when the legs bend, but this breaks during the walk animation. Constraint mixes can be animated to reduce or disable a constraint when it isn't needed, giving you the best of both worlds!
The behavior of the same asset can be changed in different skins by simply applying different weights!
Don't be afraid to exaggerate to achieve more expressiveness! Break joints, translate bones, and scale them beyond what was originally planned -- traditional animation never held back either!
Skin constraints can help relocating or scaling parts of your skeleton to achieve different proportions.
Weights are a great way to attach the ends of straps, strings, or ropes to different items and have them move independently. For example: shoulders on one end, bag on the other end. This can also be applied to pendants, yo-yos, marionettes, and more!
You can take advantage of Parent and Local axis to offset rotations and translate many bones at once just at the right angle through the use of re-parenting and multi-selection. This is also great to speed up the animation process!
Skin constraints can help to vary your animations, expressing different emotions or personalities.
A scaled parent bone can help to simulate a door rotating at different perspectives. You can also make several meshes follow the same bones at different weights to simulate depth.
Proud of how you setup part of your rig and need to make copies? Parent all the parts under a bone. Duplicate it and re-create the constraints. This will ensure the duplicated meshes are bound to the copied bones, not the original bones.
Speed up your rig creation! Using the Create tool, select a parent bone, hold CTRL and click on one or more images, then click and drag to create a bone. The images are parented to the new bone and the new bone is named after the first image.
If your eyes don't look great when closed because the eyelids are too small, you can add a closed eyelid image on top and fade it in at the right time. You can also reuse the same bones in different positions by using Update Bindings.
Rig long hair as straight as possible. Divide it into smaller chunks with varying weight for more control and variety.
Concentrate vertices where they are needed for deformation and keep the vertex count lower in other parts of your meshes. This improves runtime performance and makes the meshes easier to manipulate.
You can blend several animations together to create interactive and dynamic experiences by controlling the animation track Alpha. This is more powerful than moving a bone around dynamically.
Perspective legs may not need a complete IK setup. Pinning them to the ground and to the body with just a bone in the middle can help achieve more poses and provides more movement freedom.
When you enable backface culling, the triangles facing away are not drawn. You can use this to change what is shown on the other side of a mesh or to show the sides of an object only when needed.
You can save a collection of frequently used poses and parts in an animation, such as mirrored legs or alternative constraints settings, to quickly copy and paste into new animations.
Want to copy a pose into a new animation but the selected keys don't include the entire pose? Press CTRL+SHIFT+L to key all the visible timelines in your dopesheet to create the missing keys.
Here's an easy setup to deform a handheld object in faux 3D.
Need precise clipping vertex placement? Take your background image and temporarily turn it into a mesh, select 4 vertices, then press CTRL+C with World axis enabled. Select the clipping vertices and paste. The clipping attachment now matches the mesh!
You can simulate depth in Spine Essential by disabling scale and rotation of child bones, then manipulating the parent bone.
Combine frame-by-frame with skeletal animation to add more life and expand the possibilities of your images!
Here is a simple trick for smoke that is done by rotating, translating, and fading a round cloud texture and then duplicating the effect.
When adjusting a mesh's weights, push your skeleton to extreme poses. This way the weights that need to be corrected stand out, and tuning the mesh is easier!
Given the same mesh and bones, different weights are possible. Here are 4 different configurations.
When a mesh is bound to more than two bones, first set the parent bone's weights to define the general motion, then set child bone weights to add detail to mesh sections that depend on the parent bone's weights.
You can set weights on a mesh with fewer vertices, then later add more vertices to the mesh. Spine will automatically calculate weights for you based on the surrounding vertices.
It's easier to set weights in animate mode than in setup mode. You can make adjustments while an animation plays and can be sure the setup pose is not altered.
Complex skeletons may be crowded with everything visible at once. Right click a bone's visibility dot to hide it and all its child slots and bones, without affecting animations.
It is common to select different bones/meshes/etc when animating. Instead of making the same selections repeatedly, use PAGEDOWN and PAGEUP to navigate your selection history.
Store your most frequent selections by pressing CTRL+1 (CMD+1 on Mac), then recall the selection by pressing 1. You can store up to 10 different selections using the numbers 0 to 9 and they are saved in the project file.
When you have saved a selection using CTRL+1 (CMD+1 on Mac), you can add the stored selection to your current selection using SHIFT+1.
Frames in the dopesheet help you space out your keys and to select discrete positions in time. Snapping to frames can be turned off by holding SHIFT to place your keyframes at non-integer frames.
To make navigating the tree easier, right click a node to expand or collapse that node and all its children.
Typing * in the tree search matches any characters. ENTER selects the next match and CTRL+ENTER selects all matches. The tree filter can be used to hide all branches that don't match.
When a simple tree search is not enough, regular expressions can be used by typing / at the start and end of the text.
Spine can do the math for you! Type +, +-, *, or / before a number in a numeric text field to add, subtract, multiply, or divide the current value.
When working with multiple skins it can be helpful to switch between the last active skins by pressing the , and . hotkeys.
To prevent bones from moving when an IK constraint is created, select the last bone, choose Parent axis, then choose New > Bone to create the target bone exactly at the tip of the parent bone.
More than one clipping attachment can be active as long as they don't overlap, but remember that clipping is an expensive operation! Minimize the number of clipping vertices and clip as few triangles as possible.
At 100% zoom the unit of measurement is pixels for translation, bone length, etc. The background checkers are 50x50 pixels by default, but this can be changed in the settings.
You can import new images into a fully rigged skeleton by using the same slot names and ignore existing attachments.
Save and load your export settings to share with your team, perform command line exports, or for use with other Spine projects.
A path constraint targets a slot, not a specific path attachment. Different paths can be shown to get different results from the same animation.
Paths can be placed in skins, so path constraints can have different behaviors for the same animation depending on the active skin.
When eyes are oval instead of round, the eye limiter setup can still be used. Parent the structure to a bone and scale it nonuniformly.
A transform constraint can be made to follow the target in only one direction. Check Local in the constraint properties, then set the parent scale to 0.
Polygonal shapes can be made to appear 3D. Bind each side by matching the corner vertices using vertex transform copy and paste while in animate mode.
When the tree shows only slots, they are shown using the draw order. Clicking an attachment in the viewport selects the slot, making it easy to adjust the draw order. Press P to change the slot's parent bone.
Connect a mesh to another by assigning the same or similar weights on vertices that should overlap. In this example, take note of the knee's weights then set the same weights to vertices on the leg.
Animations can be imported as long as bone names match. This can be used for a team to work concurrently on the same skeleton or to salvage parts of animations from other skeletons.
To prevent outlines from stretching or deforming too much, borders can be preserved by padding them on both sides with vertices that have the same weights.
In the export preview, crop your skeleton by dragging the corners or move the crop around by dragging the middle. The estimated size of the exported file is shown at the bottom.
Drag the folder icon to quickly open a recent project.
Duplicate keys faster! Hold CTRL+SHIFT and drag a key to duplicate it in the dopesheet or graph.
Got a project with thousands of images? Are some images suddenly missing, even though the files are there? Uncheck "Limit scanning" to allow Spine to find more than 2000 image files!
Hold a box selection briefly in the dopesheet or graph to scale the keys.
D to play, then A to stop will reset you to the frame where you pressed D. You can change the hotkeys so pressing D twice does the same.
Use animation clean up to remove unnecessary keys from your animations and make your files smaller. You can also do this only for exports.
Sync the dopesheet and place it directly above or below the graph to sync the timeline pan and zoom. When using the graph primarily, this lets you use the dopesheet's white keys to more easily move many keys on the same frame.
You can separate X/Y translation, scale, and shear to achieve more control over your animations. Note it's per bone and per animation.
You can separate slot color and alpha keys in your animations. Note it's per slot and per animation.
Click the animation name in the dopesheet to scroll to it in the tree!
List items can often be right clicked to select the item in the tree. This works in the animations, skins, preview, weights views and elsewhere.
Press ALT+letter to show/hide views. It's fast, easy to remember because Spine doesn't use ALT+letter for anything except views, and for most views the letter corresponds to the first letter (in English) of the view you want: D for dopesheet, G for graph, T for tree, etc.
When rigging hands/fingers or feet/toes it is efficient to weight all the toes/fingers to only one or two bones to achieve nice, progressive motion without cluttering your rig with many controls.
You can use images as references in the editor by unchecking export. Just make sure not to key them in the animations or they will still be exported!
You can keep a skeleton as a reference in the editor by unchecking export in the skeleton options.
You can hide skeleton and skin prefixes in your attachments, for those who organize their images that way.
You can use color tags in the tree nodes by typing a color name or hex in square brackets. Everywhere else you get the actual text.
Using the preview view as you work can be helpful to align bones by seeing them in bent states from setup mode.
In edit mesh mode, click to create a vertex, drag to create an edge, or hold SHIFT while dragging to lock the angle at 90°.
Hold shift while clicking to select a mesh loop or edge.
If you've separated a key's handles in the graph, you can connect them again with ALT+drag, pressing ALT while dragging, or by selecting the handle and clicking the separate button.
"Show all skin attachments" is great when you need to move attachments across different skins.
Using the preview view as you work can be helpful for layered animations, especially with "Play current animation" and "Hide controls".
Right clicking a graph dot toggles it, just like CTRL + left click, without affecting any other dots.
If the new pose of a limb is in perspective, you can translate the bones to bring them closer or farther away. Move the child bone along the parent axis and to match the rotation of the bones.
If you need to add a new object recolored for each skin, you can do so in one click when creating a new skin placeholder.
You can use CTRL+ALT+click to remove vertices from a soft selection. And CTRL+ALT+box select also works! Note that soft selection can be used in edit mode.
Spine can automatically trace the outer hull of a mesh for you by clicking the Trace button in Edit Mesh mode.
Select two bones in the weights view and click the Swap button to swap their weights.
Click a bone's color in the weights view to lock the weights for that bone. When you adjust weights for other bones, the locked bones weights won't change.
Use Find and Replace to select all unused or missing images in the project.
Select multiple slots and click New > Bone to add a bone for each slot. The new bones are named after the slots and the slots are moved under the bones.
To prevent bones from moving when an IK constraint is created, choose the last bone as the target to create a new target bone exactly at the tip of it, parented to the root bone.
Quickly show frame-by-frame animation using sequences! Set the common part of the name and the start and end numbers, then key the sequence to control playback.
Make the most out of your animation workflow! Use both the graph and curves views to visualize and manipulate your project's curves.
You can switch between inverse and forward kinematics mid-animation. Set the IK constraint mix to 0 to manipulate the bones freely, then back to 100 when you want the constraint to take over.
Binary export is smaller and faster to load than JSON. Never use JSON except when a human needs to read the data!
You can export to an older version of Spine with JSON export. Check "Nonessential data" and "Export all", then select the Spine version you need. Any data the wasn't present in that older version or has changed since then will be lost. Use Import Data in the older version to import the JSON into a Spine project.
Save texture atlas space by stripping whitespace and using polygonal packing!
The middle mouse button will always make a new selection. This is useful to make a new selection without deselecting first, especially when making a new box selection.
You can use Import Data while in Animate mode to bring attachments into your project aligned to the bones for the current pose.
If you have a recolored character to add as a new skin, duplicate a skin and check "Linked meshes" and "Rename attachments". In one click you've got a new skin with all the images pointing to a different folder!