Tutorial

Page 2 of 10

A Brief Overview

Before getting into the code and how to use Spine sprites within Gamemaker: Studio, let's just revise what a skeletal animation is and what it can be used for in your games...

Spine works by having you create a "skeleton" and then pose it to create animations. The skeleton is composed of "bones", which can be attached and moved in relation to one another over a set time-frame, and the final animation can be "skinned" (ie: given a texture) for the final animation. This animation can then be exported either as a bitmap sprite strip, or as a Spine JSON file for adding into your game in GameMaker: Studio.

If you are simply exporting a bitmap sprite, then you can stop reading here, as there really isn't much more to say since the method for creating and using "normal" sprites is well known, however if you export the animation using the Spine JSON format export, it permits you to do far more things with your Spine animation than a simple sprite strip!

For example, you can have a single sprite and create multiple animations for it (for example a walking, running and jumping animation set), you can create multiple skins for your animation, so that a single skeleton can be skinned differently to create multiple characters (all with the same movements, of course), and you can also give your sprites "attachments" to change their look further. All these things are available to use in GameMaker: Studio too when importing JSON sprites, and will be covered as we go through this tutorial.
NOTE: You can find further documentation on how to use Spine here.

Key Concepts

Before getting into the GameMaker: Studio side of things, it's worth going over a few key concepts when using Spine. The first of these is that you need to name your bones and a few other things, and that these names will be what you use as your "handle" into the animations when working with them in GameMaker. Therefore try and keep these names memorable and consistent when creating your animation.

You will also want to pay attention to where the root is in your animation. The root is where your Spine animation would be anchored within the world space, and when you import your sprite into GameMaker, this will be translated as the sprites x/y origin, which is not editable for this kind of sprite in the sprite properties. Most of your calculations for moving parts of the skeleton will also depend on this point.
When creating your animations, you set a pose and then create a key frame from the pose. After that you would advance the timeline for the animation and create another key frame. After doing this Spine will interpolate the bone data between the key frames to give a smooth animation, which can then be named and saved. You can create multiple animation sets for one sprite, and give each one a separate name which can then be used in GameMaker to set the skeletal animation pose for your imported sprite.

There are also attachment "slots" available for your Spine sprite, and these are points where you can have your sprite draw a separate image that doesn't have a bone (ie: a simple bitmap sprite). It will then be moved along with the parent bone it is attached to, permitting you to give your animation multiple sub-images for attaching within a single sprite. These attachment slots should be named appropriately, as should the images that they use, since these names will be used within GameMaker to change attachments at run-time.

Okay, so now you know what GameMaker can import from your Spine animation for use, so let's move on now and actually add one to a game!



© Copyright YoYo Games Ltd. 2014 All Rights Reserved