Spine: 2D skeletal animation tool

Hey guys, just wanted to drop in to spread the good word about a game development tool I’ve been writing with my good friend, Søren. I’m the programmer and he’s the artist. The tool is called Spine and is used to build 2D skeletal animations specifically for games. We are doing a Kickstarter and passed our intial goal in just 3.5 days! We now have 13\ days\ left\ and\ we’ve\ just\ posted\ stretch\ goals,\ which\ include\ our\ plan\ for\ how\ to\ get\ Spine\ runtime\ support\ on\ more\ toolkits,\ including\ cocos2d-x.\ The\ next\ goal\ is\ for\ a\ generic\ C++\ runtime,\ which\ will\ make\ cocos2d-x\ support\ a\ breeze.
You\ can\ see\ the\ Kickstarter\ here,\ and\ also\ a\ download\ link\ to\ try\ it\ now:


Hopefully\ you\ like\ our\ tool\ and\ can\ take\ advantage\ of\ the50% off you get by obtaining a license before the Kickstarter is over. :slight_smile:

Good job! Your guys are creating a fantastic editor. I would really appreciated if it can support cocos2d series framework sooner or later.

As we known, you’re the key developer of libgdx, and I saw Spine has a jar in it, so I have a question that, is Spine using libgdx as the renderer on multiple desktop platforms?

Currently cocos2d community has a BIG problem that we didn’t found a efficient solution for multi-platform editor.
* CocosBuilder, the most popular editor has been written in objective-c, which made windows and linux user disappointed,
* Qt + Cocos2d-x is too complicated to create UI controllers,
* We have tried to create an editor with cocos2d-x c*+ & managed C*+ in .net framework & C# & cocos2d javascript bindings, & mono on mac osx. Obviously it should be refactored.
* We are trying to create a editor based on cocos2d-html5, everything is running in web browser. This seems to be promising. But we haven’t went too far on this way.

Could you please give us some suggestions?

Hi Zhe Wang, yes Spine is written using libgdx as the renderer for the editor tool that runs on the desktop. Of course the runtimes are written for each game toolkit, without anything specific to libgdx. By using libgdx everything is drawn by OpenGL at 60fps, so we can do smooth UI transitions and of course the animations render quickly. Also it means that the application looks and performs identically on all platforms. Many UI toolkits fail on this point and tend to not look terribly nice.

Spine makes extensive use of my 2D scene graph from libgdx, called scene2d:
http://code.google.com/p/libgdx/wiki/scene2d
On top of the 2D scene graph is a small library for developing UIs, called scene2d.ui:
http://code.google.com/p/libgdx/wiki/scene2dui
This adds is an approach to validating/invalidating layout. It also adds UI widgets, each of which is only 100 or so lines so are easy to understand, use, or even reimplement if necessary.
There is one last important piece which makes working with scene2d.ui pleasant, and that is another of my OSS projects called TableLayout:
http://code.google.com/p/table-layout/
This makes layout code sane, which is extremely important. All of the Spine layout is done with TableLayout.

I’m not yet so familiar with cocos2d-x, but I understand that it is a 2D scene graph so should be possible to build a UI using it, similar to how scene2d.ui is built on top of scene2d. If it is too complicated on the lowest level, build less complicated layers on top until it is manageable. :slight_smile: UIs have pretty specific requirements: layout (typically non-overlapping) including invalidation/validation to trigger relayout, events probably using a bubbling system, themeing/skinning the UI, etc. Implementing these major features will take some time and should probably be iterated and refined a few times before building something large on top. Getting scene2d.ui right was a lot of work, with multiple rounds of refactoring which had to break everyone’s code. Eg:
http://www.badlogicgames.com/wordpress/?p=2468
In the end it was all for the breast, er best. :wink:

One feature that strikes me as being important is that you probably need a source code editor in CocosBuilder. This can be an absolute quagmire to try to do yourself. If you were using Swing, RSyntaxTextArea is quite nice, but Swing is a bit of a pig so I doubt you want to go there. If you are using C**, Scintilla is very, very good:
http://scintilla.org/
SciTE, Notepad**, and many others are based on it.

Another option you can take is to use Eclipse RCP. This gives you cross platform and a great IDE feel as well as text editing capabilities. Eclipse uses SWT for a UI toolkit, which is a bit strange, but Eclipse is very impressive and probably has a LOT you could leverage instead of doing everything from scratch. RCP is a complicated beast though, so be prepared to do a lot of research when you dive in. It would be some effort, but you can drop down to C++ using JNI to implement whatever rendering you want, eg cocs2d-x. libgdx has something called gdx-jnigen which makes mixing Java and native code a lot easier. Or you could use libgdx for the rendering inside Eclipse, probably easiest by using a SWT->Swing bridge, then using libgdx’s LwjglCanvas to embed libgdx in the Swing. This way you’d be Java through and through, which will simplify your life greatly over using native code, getting the build to work for multiple platforms, etc. I know I’m converting you to a Java developer, but it does have fantastic tooling and cross platform becomes a whole lot easier.

Hope that helps. :slight_smile:

@Nathan, thanks a lot for your patient answer. GUI is a weakness of cocos2d, although we have some gui extensions since v2.0, they are still not as rich as scene2d.ui to create a graphic editor on it

I don’t think that embedding a whole source code editor in CocosBuilder is a good idea, while Viktor in Zynga is doing this job.

In the meanwhile, all 2D frameworks on mobile platforms, including cocos2d/corona/libgdx/andengine etc, we all lack a convenient animation + effects + tilemap + scene editor FOR ARTISTS and DESIGNERS. Programmers already have xcode/eclipse/visual studio, and even TextMate/vim, which they are familiar with. We can open other source code editor when programmers click the code file in graphic editor. In this way we don’t need to reinvent the wheel. I will discuss this with Ricardo Quesada in March, before cocos2d 3.0 roadmap set up.

Since 2013, indie developers are hard to success in app stores. As I can see, dev teams with 10+ members for only 1 mobile game project are very very common in Asia. The WORKFLOW between game designers/artists/programmers become more important than before. I’m not sure if you have any plan about this? A world editor which can help programers/designers/artists to cooperate easily in a medium or larger dev team.

This is sweet. I told my boss and my co-workers about this and they seem interested.

@Zhe Wang, I was assuming CocosBuilder had a source code editor, I haven’t looked into it much. :slight_smile: For the tools you mentioned, those tools are probably complex enough that they should be separate. Even just developing Spine for animation has been an enormous amount of work. There are some existing tools, such as:
https://www.iforce2d.net/rube/


https://code.google.com/p/libgdx/wiki/ParticleEditor
Of course each game toolkit needs runtime support before the output can easily be used. I agree 100% with the importance of workflow, both individually for each tool and when collaborating between artists, coders and designers. It’s hard to do well, especially across disparate tools, and often medium-sized or larger games need custom tools developed for them specifically.

Hi Nathan,

I would love to purchase the license if it supports Cocos2d-x. Very nice and impressive tool.

Best Regards,
Paras Mendiratta

Very nice, I look forward to see a example using cocos2d-x.

Oh, Spine hits $28,000 today, C++ stretch goal is reached. So far, it will support cocos2d-iphone, cocos2d-x & cocos2d-html5. Good news!

Zhe Wang wrote:

Oh, Spine hits $28,000 today, C*+ stretch goal is reached. So far, it will support cocos2d-iphone, cocos2d-x & cocos2d-html5. Good news!
They plan to release C*+ runtime in less then 2 weeks, Will be amazing.

Zhe Wang wrote:

Oh, Spine hits $28,000 today, C++ stretch goal is reached. So far, it will support cocos2d-iphone, cocos2d-x & cocos2d-html5. Good news!

Excellent. I’m looking forward to seeing this.

Ben

Just got a $3500 pledge for us to build a cocos2d-x runtime, looks like cocos2d-x will be our priority. :slight_smile:

Nathan Sweet wrote:

Just got a $3500 pledge for us to build a cocos2d-x runtime, looks like cocos2d-x will be our priority. :slight_smile:

@Nathan
I saw your tweet. Thanks a lot to Handy Games!
Now you have news posting permission on cocos2d-x first page. Please feel free to promote Spine on our first page when it’s ready for cocos2d-x :slight_smile:

Nathan Sweet wrote:

Just got a $3500 pledge for us to build a cocos2d-x runtime, looks like cocos2d-x will be our priority. :slight_smile:

Very glad to hear that, Great job!

-Travis

Only 7 hours left then the Kickstarter is over. Last chance to get a license at a big discount! Remember, you get all future updates for free. :slight_smile:

Just posted a news item on the front page, hope that is ok. :slight_smile:

Thanks nathan a 2dx port is exactly what I was going to ask you about.
We’ll be sure to get a licence or two before the last few hours are up.

Great news!

Got two licences before the end of the kickstarter :wink:
and got the webinar videos to boot xD

Already put up a prebuild binary of the SFML sample on github also :slight_smile:
http://github.com/martell/SpineSFMLSample

Have fun xD

Cant wait to see this on cocos2dx.

Any news about cocos2d-x runtime ? :slight_smile: