Spine: 2D skeletal animation

Engines, Libraries and Tools Tools Discussion
#1

Edit: Spine is released! Click here for the official site!


http://i.imgur.com/rXaHF.png

I’ve been unemployed and working full time for a few months now on a tool called Spine, which does skeletal animation for games. I do the coding on the project and my friend Shiu does the art. It started because we wanted to make games but didn’t have a way to bring them alive in the ways we wanted.

Shiu is a pro at Softimage so at first we tried to use it to build skeletal animations. We wrote quite a lot of JavaScript Softimage plugins to make setup easier and to export the skeleton and animation data so it can be used in games. The setup was still very difficult. Also, Softimage can do so many things, if you stray at all from the path our plugins support then your animations won’t work once exported. In general the workflow even with plugins to help was not very good.

We of course looked at other tools. We found a handful of tools that could do this type of animation, but usually it was too difficult or impossible to make use of the data outside of the tool. None of them had the streamlined workflow we envisioned. We were particularly inspiried by UBIart, though unfortunately it looks like it will never be released for use outside Ubisoft. We took a close look at Spriter, which at that time had been funded on Kickstarter 4 months prior. Spriter’s alpha release was not usable at all. It crashed often and didn’t have many required features such as skeletal animation (!), separate SRT keys, tweening curves, and a dopesheet. We gave some feedback to Lucid on his forums about what we’d like to see, but ultimately decided that Spriter wasn’t ready and may never have the features we wanted. More recently there is Objecty but it looks to still be in its infancy, needing both funding and time to see what it will become.

Every time I go to write a game I end up writing tools instead (see libgdx, Kryo, and a dozen other OSS projects and unfinished games). Right now I am unemployed by choice, with the dream of becoming successful writing software for myself. I was hesitant to spend my time going off in the weeds and writing another tool. Time will tell if it was a good choice, but I decided to make the tool we envisioned. Part of what sold me on the idea is that it is a commercial project. The idea is to sell the tool and also to use the tool to make our own games.

Selling tools isn’t a great business model because it is a niche market. The mobile game market has some 500M potential buyers and growing, selling to developers is a much, much smaller market. Still, if Spine can make $50k+ then it isn’t a total disaster. If it gets past 6 digits I will be plenty happy, as it will buy enough time to take a serious run at making mobile games.

We have a whole lot of ideas, but have managed to reduce scope enough to reach a milestone version which has all the major features we wanted, start to finish. We are calling this a beta version and it is now ready for you to try out! It is fully functional, except it will not export the skeleton and animation data as JSON or binary for use in your game. You can still save your Spine project, but we need to leave an incentive to purchase the software. If you purchase when we release the full version, then you can open your Spine project and export the data.

We plan on doing a Kickstarter to raise awareness of the software and fund porting the runtime to various gaming libraries. The runtime will most likely be open source to aid integration into games.

Spine is written in libgdx and runs on Windows, Mac, and Linux. Everything is rendered with OpenGL, so looks exactly the same on all platforms. The entire UI is done with scene2d.ui and showcases the power of that GUI toolkit (but then I’m the author of scene2d :P).

Spine can be used to animate just about anything. While we have focused a lot on animating characters and supporting features (eg swapping outfits), Spine can also be used to animate logos, background objects (clouds, trees, etc), GUIs, spapeships, or just about anything you want. A phenomenal example of extensive usage of “cutout” style animation is Rayman. We want you to use Spine to really bring life to your games. Spine also dramatically reduces the art requirement for games because you can squeeze so much out of the same few images.

Congrats on making it through my wall of text, or being a jerk and scrolling past it. :wink: Here are the download links as well as a short video to get you started. We are working on a website, better videos, and real documentation.

[url=http://esotericsoftware.com/spine-download/]Spine Downloads


[/url]

A five minute run through of how to create animations in Spine:

Se0nh1JPh8s

A brief overview of a number of Spine features:

2ZOGDhvOxec

You guys are the first to try it out, so I expect there may be some issues at first with the less tested OSes (Mac and Linux).

Feedback is greatly appreciated!

#2

Really impressive. Everything is super slick and intuitive. How did you learn to write software that nicely… :o

My only critique so far is that it wasn’t obvious at first how to switch animations. The little buttons are pretty subtle, and double-clicking the animation “idle” (first thing I tried) just gave me a rename option.

Is it a headless display? AWTGLCanvas or something? Also, what was used to deploy as a .dmg? (Works on my Mac!)

P.S. You should really post this to /r/gamedev and other various channels.

#3

Thanks! I’m self taught, no school at all. 8) We tried to put in a lot of attention to detail to simplify the UI and make using it smooth. Eg, there is no “select” tool, most times you can just click and drag on the thing you want to manipulate.

The “eye” column is the standard way to make something visible in the app, but I agree it is subtle at first.

It uses LwjglFrame from libgdx for the window, which is a JFrame that has an LwjglCanvas (also from libgdx) which uses an AWT canvas and Display.setParent. This way the app window is Swing, which allows for a chromeless window. For deployment it is just a .app folder structure. Do show package contents, edit a couple text files, replace the JAR, and your Java app will run with it! Great to hear it worked well on Mac, my Mini has been in storage for 2+ years while I travel around. I dread any problems that crop up, as I have to commandeer a friend’s Mac.

Yeah, we definitely hope to get the good word out about the program, but first we are relying on you guinea pigs guys to test it out with various OSes and configurations so we catch any major problems. We are also sending it to various animators who have expressed interest for their professional input. After a while we’ll make the beta more visible, put up the Kickstarter, etc. Exciting times! :slight_smile:

Note the editor supports multiple skeletons. You could orchestrate a whole animated movie! :slight_smile: Game cutscenes!

#4

Wow!
This is really cool :smiley:

The tool seems great and also the way you develop it via libgdx and scene2d.ui. Very clever.

#5

Tested on Ubuntu 11.10 32bits, it works too. I agree that switching animations wasn’t intuitive, I was about to ask you/Shiu how to before I read davedes post.

#6

Made another small video.

Timelapse of setting up and animation spineboy from scratch, the entire thing took around 30 minutes to do.

QihgkbSZ6S8

Thanks for all the nice comments guys, we really appreciate it, and pushes us forward to make spine better and better.

#7

This is AMAZING! I want to buy it RIGHT NOW! What’ll you charge? And is there any way to get an advance beta code or something?

#8

Thank you very much Ultroman. We haven’t settled entirely on the price yet, but it will be very affordable I can guarantee you that much.
You can already download the beta, Nate linked to it in his first post here :slight_smile:

#9

I know, but we need an export function here! ^^
waves bundles of money at you

#10

Don’t worry it wont be long before you can buy a version with export functionality in it, we’re just ironing out the worst bugs at the moment :slight_smile:

Out of curiosity, which framework/engine do you use ?

#11

Libgdx. I just started on it a few months ago (moving from a lot of intricate Java2D work in the past years), but we’re a small group of very committed individuals, creating games primarily for smartphones, although we also have been developing a desktop game for a long time now.

I have to say, even if you guys primarily aim to make games, it seems to me that your passion for the industry and your insight into the complex frameworks needed to create good engines and games (and perhaps a little laziness?), combines to an incredible ability to create the best tools out there. Libgdx is so easy to use and understand once you get the hang of it, and this…this is just gold in the hands of just about any artist! You can definitely sell stuff like this, and easily make a living selling small tools for different tedious tasks. What most software companies do, is try to create some large environments that do everything within an enormous scope, so the programs become almost impossible to learn because of their counter-intuitive layouts, full of stuff someone (and not you) might need some day. This (Spine) is the kind of tools we need.

Just like Aureliens Physics Body Editor. That one saves me a lot of time! I’d really wish libgdx had its own physics library in the same sane way they’ve implemented so many other things, though. I don’t think Box2D is very intuitive. Why do I have to create 4 different objects just to represent a single object in my world? And then it doesn’t even have texturing or breakable bodies implemented. I just know Nathan and Mario and the team could do it better themselves.

#12

Even though animating body parts with bones is actually a really, really hard task, this program makes it really easy.

I’m here on Archlinux, running java 7, and this just works like expected.
I’ve had some problems understanding, that selecting bones changes the things shown in the “Dopesheet”, but I think you should leave it as is, because that was just my mistake anyways :wink:

It would also be cool if you would let the user (or in this case, Developer) define their own “Curves” and export them and load them, and use them as standard curve.
And probably also let the user define mathematical formulars for their curves, for example the cosine or f(x) = 2t³ - 3t².

All in all this program gives a really easy understandable and useable user interface, unlike blender for example (though it’s much, much more complex).
You should really use this to show of what libGDX can do :wink:

Oh one thing I forgot: Are you planning in supporting svg’s as images / graphics for bones? One last feature I’d like :wink:

#13

Ok, libGDX will be the framework we create import classes for first :slight_smile:
We’re not planning on bloating spine, we have more features we want to add, but we want to keep it manageable and easy to use.
As for physics in libGDX, I believe good physics engines are a huge undertaking, so I wouldn’t expect that to happen any time soon, what could maybe be done, is an easier way to integrate box2D in the framework, but that’s beyond me :wink:

Glad to hear you are finding it easy to use :slight_smile:
We plan to have presets for the graph editor, where you will be able to create your own and load them, so it’s coming. Mathematical input sure is an interesting idea, but if it ever makes it in, I can’t say.
Custom bone graphics is a good idea, but I can’t promise that it will be added quickly, it’s not something Nate and I have discussed, we have some more important things to implement first. What kind of bones were you thinking of, graphics wise?

#14

Oh, eh…
As I understood you currently can only bind png, jpg, etc. images to bones, right? (Seeing all those .png’s in the example project folder)
It would be cool if you could enable the user to load vector graphics, for example the svg file format. Svg’s are quite powerful, and fit such tasks, where the characters are pretty big and very deltailed, very good.

#15

Oh, completely misunderstood you then. I really can’t say if SVG import will be possible, but Nate is following this thread and I’m sure he can chip in some information on the subject :slight_smile:

#16


;D :point: :slight_smile:
::slight_smile:

#17

Fixed! I actually work a lot with vector graphics, so that was embarrassing :persecutioncomplex:

#18

I just had a go with it and everything is of very high quality.
It runs very nicely on a Mac so no problems there.

I sent the link to my colleagues and there are quite a few artists amongst them and I am curious of their feed-back.

But this tool is very very good for developers. I haven’t used it much, I agree that there are a few actions which are not obvious right from the start but once you learned them you realise how easily accessible they are. Like the switch between the Setup and Animate screens.
Also some hints on hover over certain buttons would be great, but I reckon that is in the polish phase. Most of them are there.
Also the transitions of the widgets are very nice. It makes the app very pleasant and slick.

I will come back with more feed-back once I used it but at a glance it looks great!
Will spread the word.

#19

nice tool,

everything is running as indented I guess, on my machine, but I get this exception in the console:
Error setting image directory.
net.contentobjects.jnotify.linux.JNotifyException_linux: Error watching examples/spineboy/images : Bad file descriptor
at net.contentobjects.jnotify.linux.JNotify_linux.addWatch(JNotify_linux.java:109)
at net.contentobjects.jnotify.linux.JNotifyAdapterLinux.createWatch(JNotifyAdapterLinux.java:123)
at net.contentobjects.jnotify.linux.JNotifyAdapterLinux.addWatch(JNotifyAdapterLinux.java:104)
at net.contentobjects.jnotify.JNotify.addWatch(JNotify.java:86)
at com.esotericsoftware.skeleton2d.editor.ImageMonitor.updateWatch(ImageMonitor.java:125)
at com.esotericsoftware.skeleton2d.editor.Editor.create(Editor.java:231)

#20

Thank you very much for your support :slight_smile:
We are indeed in the polish phase, so we will get all the tooltips in before 1.0

You are not the only one on linux getting that error, and I believe Nate knows what is causing it and is fixing it. A new version to download will be up soon, a few bugs have already been fixed in it.