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:

Audio tree node

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.

Audio event

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:

Audio keys

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

Stretchy IK

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: Spine 3.7 IK settings

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 3.7 mesh whitespace strippingg

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

Spine 3.7 export

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!

Export preview

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:

Export range

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

Export cropping

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:

Spine 3.7 pixel art

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

Skins view

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

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

Duplicate skin

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.

Skin placeholder

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

Vertex copy and 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

Command line interface

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

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

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

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

Spine 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

Spine on 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.

Spine Web Player released

December 21st, 2018

2018 is coming to a close, with Christmas and New Year's Eve looming. We at Esoteric Sofware would like to celebrate the occasion with a small gift! We are happy to announce the release of the Spine Web Player.

The Spine Web Player lets you easily show your Spine animations on your website or blog. It's a great way to show off your portfolio, share animation ideas with coworkers and friends, or simply make your site fancy.

The player comes equipped with familiar controls like pause, resume, and a scrubbable timeline, as well as Spine-specific controls that let viewers of your content switch between animations and skins, or show the meshes and bones in your skeleton.

Putting the player on your web page is easy. The above player was created with this HTML/JavaScript snippet:

<!-- Include the JavaScript and CSS files -->
<script src="https://esotericsoftware.com/files/spine-player/3.7/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css">

<!-- Create a container element -->
<div id="player"></div>

<!-- Create the player with your settings and container ID -->
<script>
new spine.SpinePlayer("player", {
jsonUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pro.json",
atlasUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pma.atlas",
animation: "walk",
backgroundColor: "#666666",
});
</script>

You can actually just put this above snippet into an .html file and open it locally with your browser! For an in-depth explanation, check out our extensive Spine Web Player guide.

Note the old, less powerful Spine widget has been removed in favor of the new Spine Web Player.

Next up

This year has been crazy busy for us! You've provided us with invaluable feedback, a lot of which has already been integrated in our 3.7-beta editor and runtime releases. The 3.7 release is scheduled for the 7th of January 2019, so there is something to look forward to when you return from your well deserved holidays.

Until then, we wish you a Merry Christmas and a Happy New Year!
The Spine Team

Discuss this post on the Spine forum.

Welcome Harri!

December 3rd, 2018

Welcome to the team, Harri! Tell us a little bit about yourself and your background

I grew up with computer games in the early 90s. King's Quest VI, Street Fighter II, Doom, Lemmings, Monkey Island, Wing Commander, Ultima Underworld, Burntime, and so many more games cemented my eternal love for pixel art games.

Back in these days I was only allowed to play computer games for half an hour a day (with a later extension to an amazing 60 minutes!). This limitation made playing games even more interesting. When my daily 30 minutes were over, I wasn't sad. Instead, I felt like I felt the day before Christmas - excited that I get to play for another 30 minutes the next day!

This love for games later brought me to Counter Strike. You could create your own maps and import models created in 3D modeling software. At the time I was using Milkshape 3D. A year later I discovered Quake 3's modding capabilities, which started a never ending passion -- creating games on my own.

As a Warhammer 40,000 fan, I wanted to turn the amazing tabletop game Necromunda into a computer game. Learning C programming was required for modding, which soon led me to creating my own terrain engine. Back in these days, we would buy every book about OpenGL and download tutorials from flipcode.com and other tutorial sites onto floppy disks. We only had internet access at school, making this whole endeavour a little more involved than it is today.

All the math I learned at school suddenly became useful -- I had to program all the collision detection and response from scratch. As computers weren't as fast as today's, I had to learn about performance optimization. With programmable shader pipelines arriving on the market, I eventually learned how to program shaders (to make grass move with the wind).

Two years later, I started my university career. I was working on another terrain engine with a few friends. Naturally, the engine had turned into a completely overambitious RPG project. I was looking for ambitious programmers to join the team and got to know Mario - finally a friend with whom I could talk about graphics and game programming!

While at university, I started working part time at Joanneum Research as a C++ programmer. My initial focus was on graphics programming via OpenGL. Later I was mostly working on DirectShow and computer vision applications. I started a computer games company called Pixelcloud Games together with my friend Florian, another graphics programming enthusiast. We started by writing our own engine for a simple 2D game, which wasn't too crazy at the time.

Soon after, Unity (version 3.3 IIRC) had just become affordable. We gathered a few thousand euros and bought our first Unity licenses. Unity didn't support automatically generating colliders for 2D sprites, so I started implementing my own solution. I polished the interface and made the package "2D Collider Gen" available on the Unity Asset Store, which I still support and maintain.

Besides other Unity projects, I also created a brain-computer-interface based training simulation game for disabled people for Graz University of Technology, worked at a VR-startup for a crazy entrepreneur, and, until recently, was an engine and shader programmer at Bongfish GmbH, working on a yet to be announced game.

What brought you to Spine?

Mario approached me and asked if I would like to work on Spine. Being a practitioner of Chinese Martial Arts and hugely interested in the fundamental basics of movement and animation, and with the prospect of working on the industry standard for 2D animation for games, this was an easy question to happily answer with a resounding "Yes"!

What's your role on the Spine team?

Coming from a Unity background, I'm very happy to contribute my knowledge to the Unity runtime and C# core, improve performance through parallelization and optimization, as well as being a bugslayer and making customers on the forum happy. Apart from Unity, I will be helping out with Spine's Unreal Engine integration and the C++ core runtime as well.

Question from the audience: what is your all time favorite video game?

A very hard question! If I have to pick only one, it'd be Privateer -- the first game I played where you could fly around freely, earn money, and spend it on all kinds of weaponry to equip your spaceship.

Say "Hello" to Harri on the forum!

Welcome Erika Inzitari

June 27th, 2017

We're super excited to announce the expansion of our little team here at Esoteric Software! Erika Inzitari has joined our efforts. For this intro, we switch things up a little, interview style.

Welcome to the team, Erika! Tell us a little bit about yourself and your background

I'm a girl who happens to like Spine very much! Previously, I went to an art academy, later I enrolled in a communication design curriculum at university. But what I really like is the idea of motion and transformation! At the age of 3, I decided I wanted to do something involving animation when I grow up. Watching movies on VHS, my favorite parts would be all the moments involving magic: a mouse turning into a horse, or a monkey into an elephant, anything was possible! I also was a lucky child as my farther taught me how to use Windows when I was 4 years old. Since I didn't have many games, I'd play around with the .exe files in the system32 folder, developing an affinity for computers (and not destroying any in the process). Those were the days! This eventually led me to look into game development as well. I've since joined a few game jams and have worked with gaming companies as an animator/rigger. It's my dream to create an interactive children's story one day, and take a stab at animated films & cartoons.

What brought you to Spine?

This is actually a bit of an awkward story. I first saw Spine when my partner researched animation tools and stated that Spine was "THE BEST TOOL EVER (tm)". I watched him use it with suspicious eyes, opposing his every cheerful comment about Spine just for the sake of opposing, saying I don't like the fact that the animations were so fluid and puppet-like, and that the price was a bit too high to spend on software I didn't know and I wasn't sure was usable for me.

Sometime later, he started talking about Spine again, pushing it as the perfect tool for what I wanted to do. I bit the bullet and started watching videos about Spine, reading up on features, checking out comparisons written by other people, checking out (amazing) works of art others have achieved using Spine. Not wanting to give him the satisfaction of being right too quickly, I said, "OK, maybe I can give this a try". I started playing around with it on the side while working for a gaming company who hadn't yet adopted Spine. At my next gig, Spine was already a requirement, so I bought me that sweet sweet Spine Professional and got to work.

I invaded the Spine forums with my first questions. Not expecting a quick answer, I checked back 2 weeks later. To my surprise, my questions had been answered immediately! This made me feel so bad, I started checking the forums daily (because even with my amazing computer skills, I couldn't find the subscribe button, which I only discovered 2 years later...). Once I knew enough, I started returning the favor, answering other people's questions, since everyone was super kind. Suddenly I found myself being very passionate about the software and especially the community.

Which is when my partner started to get his revenge... He'd nag me once in a while with a well placed, "Oh, Spine again? Wasn't that that software with too fluid and puppet-like animations?". (I swear this happened again yesterday evening!).

I couldn't help but tell him I was totally wrong, and that I'm happy he proved me wrong! I fell completely in love with Spine and think it's the best software around for 2D animations in games.

What's your role on the Spine team?

As an animator and Spine connoisseur, my role is to assist people with their Spine Editor related questions. I love some good problem solving, especially if it helps others! I'll also be in charge of a workflow-oriented tutorial series I'll be in charge of. I hope you'll find it useful!

Question from the audience. What ingredients were used to summon you from your magical realm?

10grams of Rooibos, Vanilla, a couple dog hairs, pumpkin flowers, chocolates aaaand fried potatoes.

You can find Erika on the forums and on Twitter.

Older