2D Skeletal Animations with Spine

Posted on April 4, 2013
Save memory and animate with 2D skeleton animations

Spine is a really great skeletal 2D animation tool. It allows you to attach images to bones and animate properties like the position, rotation, and scale. You can even animate the images on the bones to show a character blinking for example. I have ported over the Spine generic runtime to AS3 so that we can use it in GameBuilder Studio.

The Spine plugin is not finished yet but I wanted to give a little sneak peek and let you guys know its on the way. Exporting your animations from Spine into GameBuilder Studio will be very seamless and you will be able to control individual bone movements as well as add physics to different bones to interact with your game world.

You can do so much with Spine because it allows you to export the frame by frame animations and you can apply that animation data to spatials in GameBuilder Studio to get animated movements instead of just linear animations with the Interpolation Action that comes out of the box.

%STEP_TITLE%

You can repurpose animations by just swapping out the skin that is attached to a skeleton and like magic you can have a whole new character. We will also create preset animations for things like shooting, jumping, walking and make them available on the GameBuilder Marketplace.

Spine AS3 Runtime Source

This AS3 port is open source under the MIT license and you can find the source files on our github page. Below is a little demo of a walk animation rendered using the GPU via Starling and the GameBuilder Engine.

Spine Boy Walk Animation

Spine isn't free but it is definitely worth the money. We will be giving away a Spine license that we received from backing it on Kickstarter for the first person to develop a playable game with the Spine plugin and GameBuilder Studio and write a tutorial about it once it is ready. More on this later...

Changing The Spine Rendering Engine

var renderer : QuadBatch = new QuadBatch();

//<!---- Starling Rendering -------->
//Parse Spine Skeleton Data via the static factory using StarlingAttachmentLoader
var skeletonJson : SkeletonJson = SkeletonJson.createSkeletonFromAtlas( spineSkeletonTextureAtlas );
   
var skeletonData : SkeletonData = skeletonJson.readSkeletonData( spineBoySkeletonJson.jsonString , "spineboy-skeleton" );
skeleton = new Skeleton(skeletonData);

//Needed for bones and attachments to show up in place
skeleton.setSlotsToBindPose();
skeleton.updateWorldTransform();

skeleton.draw(renderer);

The runtime architecture of Spine allows you to just change the attachment loader type to render the skin of the skeleton with a different type of renderer. The code above is rendering with Starling.

var renderer : Sprite = new Sprite();

//<!---- Basic 2D Rendering -------->
//Parse Spine Skeleton Data via the static factory using Basic2DAttachmentLoader
var skeletonJson : SkeletonJson = SkeletonJson.createBasic2DSkeleton( texturePackerDivider, bitmapDataImage  );
   
var skeletonData : SkeletonData = skeletonJson.readSkeletonData( spineBoySkeletonJson.jsonString , "spineboy-skeleton" );
skeleton = new Skeleton(skeletonData);

//Needed for bones and attachments to show up in place
skeleton.setSlotsToBindPose();
skeleton.updateWorldTransform();

skeleton.draw(renderer);

or render with the basic flash display list. Write your own RegionAttachment subclass and implement your own rendering technique either way its flexible.

Thanks for reading this blog post. Spread the word!


Comments

Pages: 1 All
Said:
Awesome. When we will be able to see it in gamebuilder?
3 years ago
0
Replied:
@Denis It is on the road map. The more you spread the word and support GBs by purchasing a pro license the more features get added .
3 years ago
0
Pages: 1 All

Anyone can leave a comment!


You just need to signup for an account or log-in before you can comment.