Spine goes well beyond the limits of traditional 2D animation. The demos below illustrate some of the ways your artists, animators, and programmers can leverage the improved workflows and capabilities provided by Spine to build amazing games.
All the demos below are live demos, using our spine-ts runtime for WebGL. Discover how we've used the Spine Runtimes in the demos by exploring the source code of each demo.
Traditional sprite animation requires an image for each frame of animation, resulting in massive sprite sheets. Each additional animation greatly increases your games' disk space and memory requirements, especially at frame rates necessary for smooth playback. It quickly becomes an enormous amount of work for your artists and your finished product suffers when the number of animations must be reduced to meet size constraints.
Spine animations store only the bone and animation data, coupled with a single set of individual images that are reused for every animation. This allows you to bring your games to life by packing them full of unique animations. Also, Spine animations are interpolated so playback is always perfectly smooth, regardless of the frame rate.
Compare the memory and disk space requirements of Spine versus sprite sheet animations.
While Spine largely replaces the need for traditional frame-by-frame animation, images can still be swapped when needed. For example, a change of perspective for a torso or flapping wing, alternative facial expressions, or a muzzle flash.
Spine's slots, attachments, and draw order mechanisms allow you to easily integrate frame-by-frame animations in your otherwise fully dynamic Spine animations. Even better, Spine can manipulate the frame-by-frame images, shown in this demo by scaling on the alien's exploding head.
An often felt disadvantage of 2D games is the lack of smooth animation transitions. In 3D games, transitions between animations can be calculated on-the-fly at runtime. Animations can even be blended, for example half walking and half running. In 2D games without Spine, blending is impossible and typically transitions are jarring. Artists can manually create frames for every possible transition, but even that doesn't help when animations can be interrupted mid playback.
Spine brings the benefits from the 3D world back to 2D. The Spine Runtimes smoothly and dynamically transition from one animation to the next, giving your characters natural looking fluidity. Layering allows animations to be blended on top of others, for example to play a shooting animation while your character is running or to blend walking and limping more and more as damage is taken.
A Spine character made up of rigid 2D images can already give excellent results, such as Spineboy in the demo above. To give your characters even more life, Spine brings more tricks from the 3D world in the form of meshes and weights. With meshes, images are no longer rigid and can bend and deform however you like. Weights bind meshes to bones, so the images deform automatically as the bones are moved.
Meshes can also improve your game's performance, reducing fill rate usage by not drawing transparent portions of your images. This is especially important on mobile devices.
The amazing art for this demo was kindly provided by Hwadock (a.k.a. dugy). Follow him on Twitter and his blog.
Spine's skins feature is perfect for providing customization and variety while keeping your workload reasonable. With skins, the work of animating only needs to be done once, then you can assign different looks to your skeletons while reusing all your animations. For ultimate flexibility, the Spine Runtimes let you combine parts from different skins at runtime, covering all possible customization needs.
Skins give players the ability to add their own touch to your game's world by outfitting their avatars with new looks, clothing, weapons, and other accessories. Skins also give you more mileage out of your animations: mix and match your art for enemies, items, and other game objects to greatly increase variety for little effort.
The art for this demo can be found in the 2D Anim Heroes character pack for Unity.
Spine's support for inverse kinematics allows for realistic and dynamic movement that would otherwise be difficult or impossible to animate. It also enables more advanced rigging, where complex poses can be easily controlled by a small number of bones.
Since Spine doesn't use baking or plotting, IK really shines at runtime. By dynamically positioning bones at runtime, IK constraints allow your character to easily react to the environment, such as aiming at enemies, having feet follow slopes and bumps in the terrain, and much more. In this demo Spineboy is balanced on a user controlled hover board while playing an animation at the same time.
Try it out! Drag the red circles around to dynamically pose Spineboy. The shoot and jump buttons and aim checkbox layer animations on top of the idle animation.
When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.
The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.
Often a part of a character follows an open or closed path. Rather than key this movement manually, Spine's path constraints can be used to make bones automatically follow a path. The composite Bézier path is made up of a set of interconnected points that let you bend and shape the path. The path itself can be animated and even weighted to bones, so the path deforms automatically as the bones are moved.
In this demo a vine mesh is bound to bones that are constrained to a path. The more vertices in the mesh, the smoother it will bend.
Path constraints can also be used to great effect at runtime. Move the red handles to dynamically modify the path and watch the vine follow it seamlessly!
Path constraints enable powerful rigging, shown by Stretchyman in this demo. For the arms and legs, meshes are weighted to many small bones that are then constrained to follow simple paths for the limbs. The paths are then weighted to bones that can be moved to control the limbs. This setups allows a large number of bones to be controlled with just a few bones. Not only does this make animating easier, but at runtime only a few bones need to be adjusted for posing dynamically.
Move the red handles and make Stretchyman dance!
Sometimes parts of an animation must be partially hidden, like in this example where Spineboy comes out of a portal. Clipping comes in handy in these cases by restricting rendering to a polygonal area. Only the parts of the skeleton inside the predefined, animatable area are shown. This enables many effects that wouldn't otherwise be possible, such as windows, lighting effects, and more. It is also possible to have clipping only affect a subset of the skeleton. For example, an animation where a character goes through an x-ray.
Animating complex skeletons with many interdependent pieces can be tedious. Spine's transform constraints remove this pain by unlocking more powerful rigging. By constraining bone transforms to the transform of another bone, you only need to animate one of the bones and the others are adjusted automatically. While seemingly simple on the surface, advanced rigging can make great use of this to automate how a skeleton behaves as it is posed.
Transform constraints are also great for machinery, such as the tank in this demo. Instead of keying the rotation of each individual wheel, a single wheel is animated while the others follow via a transform constraint. Offsetting and mixing can add individualism back to constrained parts.
The treads on the tank are circulated using a path constraint, which would be impossible to animate without paths. The path is weighted to the wheels, so the path bends automatically as the wheels move up and down.
In this demo, the rotation of the two smaller wheels is constrained by the big wheel's rotation. Also, the big wheel's translation is constrained so it stays between the two smaller wheels.
