Spine, dat.gui, WebSonic

22 Apr 2011 | By Alex Young | Tags graphics libraries mvc webgl


Spine (GitHub: maccman / spine, License) by Alex MacCaw is an MVC library that’s a lot like Backbone.js. The controller API is based on Backbone, so if you’re familiar with that it shouldn’t take too much work to get going with Spine.

Spine models have validations, persistence, serialization, and an event API. It’s a small library, throwing away some of Backbone’s functionality (it’s designed not to require collections for example). I’m not sure how flexible or extensible it is, but the models and controllers have events that can be bound to for everything I could think of.

Models look like this:

var User = Spine.Class.create({
  name: 'Tonje',

  init: function(name) {
    this.name = name;

var user = User.inst();

The inst method is used to instantiate models. I kept thinking I should call init, but inst calls it instead and does all the Object.create stuff to maintain the prototype inheritance chain.


@alex_young good point about the API – I’ve changed it to .init() rather than inst(). It’s backwards compatible with the previous version.

- @maccman


dat.gui (GitHub: dataarts / dat.gui from the Data Arts Team is a controller library. It creates and manages DAT.GUI panels which contain UI controls. The controls can be observed and manipulated. This makes a lot more sense when looking at the example of dat.gui’s homepage!

It seems like something that would work well with data visualisation or Processing inspired graphical projects.


WebSonic (GitHub: Coreh / WebSonic) by Marco AurĂ©lio is a WebGL game engine example that features Sonic the Hedgehog. It’s not exactly a fully-playable game, but it’s extremely interesting. The project’s README on GitHub includes some technical details, with comments from Marco about what he thinks could be improved or requires extra browser support for (like joystick support).

blog comments powered by Disqus