Spine 3.7 released

January 4th, 2019

Spine 3.7 is here, bringing you many new features, improvements, and bug fixes!

For a full run-down, check out the editor changelog, as well as our runtimes changelog. All the runtimes are already up to date and work with 3.7. Below is a selection of notable new features and other changes.

Audio support

With the 3.7 release, we have added support for audio! This allows you to preview, synchronize, and iterate on both your graphics and audio assets directly within the Spine editor.

It works by introducing a new node in the hierarchy view called Audio:

This is similar to the Images node: all audio files found in the specified path are listed under the Audio node in setup mode. Spine currently supports WAV, MP3, and OGG audio formats.

Once you've added an audio file to your project, you can create an event from it by either dropping the audio file on the Events node or by selecting the audio file and clicking the New Event button. The end result is a new event wired up with the audio file, ready to be keyed in your animation.

As you can see, events have 3 new properties:

• Audio path specifies the location of the audio file associated with the event. If this is set, the audio file will be played when a key for this event is hit in an animation.
• The Volume lets you set the playback volume.
• The Balance lets you set the volume of the left and right channels for stereo, or set the panning for mono.

When you key an audio event, you can key volume and balance values differently from the setup values:

In this screenshot, the footstep audio event has been keyed twice for Spineboy's walk animation. In the dopesheet, the duration of an audio event is indicated by a purple horizontal line. Above the dopesheet, you can see the new Audio view. It is synchronized with the dopesheet, showing the waveforms of all active audio events, and allows you to control the master volume and which audio device is used for output. Scrubbing through either the audio view timeline or the dopesheet timeline will also scrub the audio.

We've updated our export system to handle audio. When you export your animations to video, Spine will also include the audio.

The audio playback is an editor-only feature. At runtime, the 3 additional event properties are available but the Spine Runtimes do not manage loading and playing back audio. Synchronizing your audio with your Spine animations at runtime is still managed like before: register an event handler with AnimationState or TrackEntry to trigger playing the audio you want for each event.

Stretchy, compressed, and uniform inverse kinematics

Spine supports one- and two-bone inverse kinematic constraints that keep one or two bones pointing at another target bone. However, these constraints used to be rigid: the bones in the IK chain did not automatically stretch or compress.

In Spine 3.7, we have added additional settings to IK constraints:

The Stretch option is available for both one- and two-bone IK constraints. When enabled, all bones in the IK chain will stretch as needed to touch the target bone. However, the bones will not get compressed when the distance to the target bone is smaller than the original bone lengths.

For one-bone IK constraints, the Compress setting causes compression of a constrained bone for when the distance to the target bone is smaller than the constrained bone's length.

Both Compress and Stretch can be keyed.

For both stretching and compression, the attachments and children of the constrained bones will be scaled on the bone's X axis. For one-bone IK constraints, you can additionally enable the Uniform setting, so scaling is performed on both axes.

Mesh whitespace stripping

Spine's texture packer can now strip the pixels outside your mesh UVs to reduce the space taken up in your texture atlas. All you need to do is pack a texture atlas with whitespace stripping (for both X and Y) when exporting JSON or binary.

Revamped exports

In Spine 3.7, we have completely revamped our export dialogs and added a ton of new export functionality.

The GIF exporter now uses a highly sophisticated quantization algorithm to preserve the colors of your animations as well as possible within the GIF format's constraint of 256 colors. Colors are carefully chosen not just within each frame, but also temporally across frames to prevent flicker during the animation. We have exposed many controls in the export settings so you can find the best parameters for your specific animations to create the absolute best GIFs possible.

We have added additional export formats. APNG is an animated image format similar to GIF, but supports full colors and transparency. The format is supported across all browsers (except Microsoft Internet Explorer and Microsoft Edge), including mobile, and is an excellent alternative to GIF.

We've added support for exporting to the Adobe Photoshop PSD format. Each frame of your animation will be exported to a separate layer. This can be useful when drawing additional attachments with a different perspective, to apply post effects for VFX and other frame-by-frame animations, or to bring an animation into other software as a single file.

You may have noticed the Preview button in the upper right of the screenshot above. Let's see what happens when it is clicked!

Preview renders the image exactly like it will appear when exported, including any artifacts introduced due to compression or other export settings.

By clicking on Range you can select a subset of frames to be exported:

One of the most often requested features is the Crop setting:

You can specify the dimensions and position of the viewport used to export your scene!

All video exports now also support exporting audio.

Pixel grid rendering

Many Spine users, such as Tom Happ of Axiom Verge fame, are using Spine with their pixel art. We've added pixel grid rendering to support pixel art workflows in Spine. When enabled, Spine will render your pixel art at a 1:1 ratio, then scale the resulting image up to the viewport size, retaining all the pixely goodness:

The feature lets you preview aliasing and other artifacts introduced by retro-style pixel scaling and rotation, right in the Spine editor.

You can enable this feature in the Spine settings. Check out the forum thread on this topic for more insights.

Combining skins

Another often requested feature was to view multiple skins at the same time inside the Spine editor. Previously this could only be done at runtime.

We've now added a new Skins view. A list of all available skins is shown at the top, with a pin for each. At the bottom is a list of the currently pinned skins. All the pinned skins are visible at the same time, starting with the bottom-most skin. The pinned skins in the bottom list can be dragged to change the order they are applied.

When you select a single skin in the skins view, it becomes the active skin. Only attachments from the active skin can be selected and edited in the viewport. The active skin is always visible -- if not pinned it is considered to be applied last.

The skins view is especially useful to work on characters that mix-and-match skins for different gear and body parts, like in the screenshot above. It is also perfect to satisfy any dress-up-party urges you may have. We know. We've wasted plenty of time just trying out new outfit combinations!

Type to search

The Tree view now features a text box to allow searching for items in the hierarchy. Pressing enter focuses the text box, then type a value and press enter (or F3) to select the next search result. Using shift + enter (or shift + F3) selects the previous result and escape clears the text box.

You can also check the Text search filters checkbox in the tree filter popup. When checked, only elements that match the search text will show up in the tree view.

Skin duplication and placeholder creation

Duplicating a skin now includes many new conveniences, including options for automatic renaming, using linked meshes, and duplicating mesh deform keys. This can save a lot of time when setting up new skins.

The same conveniences are available when creating a new skin placeholder from an existing attachment. Additionally, the attachment can be duplicated for every existing skin!

Vertex copy/paste

You can now select vertices, copy, and then later paste them. It's a small thing, but can be very useful! It works on meshes, paths, and bounding boxes. The vertices can even be pasted to a different attachment, as long as the same number of vertices are selected.

CLI improvements

We have added additional features to command line exporting!

The -m or --clean argument lets you remove unnecessary animation keys from your Spine project. It can also be used when exporting to the Spine JSON or binary formats. You can add this as part of your asset pipeline to ensure your runtime files are as small in size as possible, or to clean up Spine projects in bulk.

The new --import argument lets you import JSON, binary, or a project's skeletons into another project. This is great if you want to combine existing skeletons into a single Spine project file. When combined with the --scale flag, you can also scale entire projects from the command line.

You can find examples of these new flags in our documentation on command line exporting.

Runtime improvements

We have put a lot of effort into improving the runtime part of Spine! For a full overview and engine/framework specific additions and changes, check out the Spine Runtimes changelog as well as the commit log for the 3.7 branch.

Some additions and changes are common to all runtimes. There are only a handful of breaking changes, which shouldn't be terribly hard to fix up:

• The completion event will be delivered to listeners of AnimationState and TrackEntry for looped, zero duration animations every frame.
• The flipX and flipY properties of Skeleton have been replaced with scaleX and scaleY. This makes applying transforms simple and is much more powerful, as it allows you to scale the whole skeleton, even if some bones do not inherit scale.
• MixPose has been renamed to MixBlend. Unless you are working directly with the Timeline API or have modified AnimationState yourself, this change is unlikely to affect your existing code.

The most notable additions to all runtimes are:

• Additive animation blending. Normally, when playing animations on separate tracks, the pose from lower tracks are overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This allows effects like blending multiple facial expressions, eg 25% angry, 25% sad, and 50% happy. To enable additive for a track, call TrackEntry#setMixBlend(MixBlend.add). To specify the blend percentage, set TrackEntry#alpha. See this forum thread for a discussion.
• TrackEntry has a new field called holdPrevious. This can be used to counteract a limitation of AnimationState resulting in "dipping" of parts of the animation when using many tracks. For a full discussion of the problem and the solution we've implemented, see this forum thread.
• Support for stretchy and compressed IK constraints, as described above.
• Support for audio events. You can query the audioPath, volume, and balance fields on Event and EventData to implement audio playback.

We have closed 200+ runtime issues since the 3.6 release, including bug fixes and requests for enhancements. This wouldn't be possible without your help. Thanks to everyone reporting issues, we hope you keep up this tradition!

spine-cpp

We haven't talked about the biggest addition to the Spine Runtimes yet: spine-cpp! It started with an innocent pull request by Stephen Gowen, who contributed a great start to a reference C++ runtime. After more than a month of effort, we were able to complete a first version ready for consumption by users.

However, our Unreal Engine, cocos2d-x, cocos2d-objc and SFML Spine Runtimes are all built on spine-c, the C89 compliant version of our reference implementation. Changing these runtimes to spine-cpp and removing their spine-c based counterparts was not a good option since that might disrupt users.

We therefore decided to have two development branches for our brave beta testers: 3.7-beta, where the only addition is a C++ version of our SFML runtime, and 3.7-beta-cpp, where the Unreal Engine and cocos2d-x runtimes have been switched to spine-cpp. This served us well during the beta phase of Spine 3.7, with many users exploring the idiomatic C++ APIs of spine-cpp and reporting issues to make it production ready.

For our 3.7 release, we have decided to make the spine-cpp based branch the default. If you are a user of Unreal Engine or cocos2d-x with a sizable code base relying on spine-c, we provide you with the 3.7-c branch.

Going forward we will continue maintaining both spine-cpp and spine-c in the 3.7 default branch and merge changes to either runtime into the 3.7-c branch. We will however not backport changes to the Unreal Engine and cocos2d-x runtimes from the 3.7 default branch to the 3.7-c branch. For Spine 3.8, we continue maintaining spine-c but will not continue maintaining the spine-c based Unreal Engine and cocos2d-x runtimes.

Spine workshops

Earlier this year, we rolled out our very own workshop offering! Workshops are held by Esoteric Software instructors and are available both on-site and via the web.

We've had a fantastic time with our students the last few months! If you are interested in a Spine workshop, head over to our workshop page and request a workshop today.

Spine educational institutions

There's only so many workshops we can host ourselves! As part of our ongoing effort to educate the world about using Spine, we have reached out to our educational partners across to globe to create a directory of schools, universities, and consultants that can teach you the ins and outs of Spine.

We are more than happy to expand this list of educators by adding your name! If you offer Spine workshops and/or training, hop over to our educational institutions page and submit your course and workshop information.

Examples

On our new examples page, we've written up descriptions for each of the example projects that come with Spine. This is a great resource to learn about a variety of rigging techniques and makes the Spine examples much more useful.

Twitch

Our own Erika Inzitari has started the Esoteric Software Twitch channel this year, where she streams her work with Spine on a weekly basis. Her streams are chocked full of Spine workflow goodies and we highly recommend checking it out! It's a great opportunity to ask questions in a live setting and to see complex rigging in Spine.

All of her streams are uploaded to the Esoteric Software YouTube channel in case you prefer video-on-demand. The description of each YouTube video has topics and links into the video so you can jump to the parts that are interesting to you.

Erika has also invented the Twitter hashtag #skeletember under which she is tweeting one rigging tip each day of September. Consider following her!

Up next

With 3.7 out of the door, we can now focus on the new curve editor, as well as features like separate keying of X and Y translation. On the runtime side, we will continue to improve performance, fix bugs, and add support for new game engines, with Godot and Construct at the top of our list. Lastly, we have a secret project in the making that we hope to release soon!

Thanks to all of our users who reported issues, tested the beta, and proposed new features. We couldn't do it without you!

Happy animating! Your Spine Team

Discuss this post on the Spine forum.