Exporting Spine Animations for GameBuilder Studio

Favorite This Post!
0 Votes
Posted by Lavon on August 2, 2014

There are plenty of resources on the Spine website about how to use Spine so I won't cover that topic. (Quick Start) I will just show you how you can get your Spine animations into GameBuilder Studio (GBs) seamlessly.

Exporting ".SKEL" Skeleton Animation Data Files

Exporting Skeleton Animation Data Files

Simply open up the export dialogue and change the file extension from ".json" to ".skel". This will indicate to GBs that the file is a Spine skeleton animation. Also make sure to unselect Nonessential data, it is not needed. You can select Pretty print which just makes the skeleton data file easier to read to the human eye but does increase the file size.

Specifying Custom Sprite Sheet Name In Spine Data File

For every Spine animation there will be three separate files that are required to render the animation. The Spine .skel data file, the texture atlas data file, and the texture atlas image file. Spine has a built in way of exporting the images of an animation into a packed image file known as an atlas but GBs supports packed sprite sheets from Texture Packer. Until Spine supports additional metadata in their exported Spine data format you will need to indicate to GBs which spine data file goes with what sprite sheet. There are two ways to do this.

  1. You can place the Spine ".skel" animation data file and the texture packer sprite sheet data file and image file in the same folder with the same name. So you would end up with goblin.skel (Spine animation data), goblin.json (texture atlas coordinates and size data), and goblin.png (image file). GBs will look for the files with the same name and import all three assets when you select to import the Spine ".skel" file.
  2. This next method is necessary if you are exporting a skeleton animation that has a separate name than the texture packed sprite sheet. Add a property to the front of the ".skel" file name in the following format: "atlasFileName": "goblins.json", right before the "skeleton" property declaration. Make sure that you put a comma after the atlas file name property declaration. The sprite sheet data files still have to be in the same directory but GBs will know specifically which sprite sheet to import based on this property. Keep in mind that if that sprite sheet is already imported into the editor then GBs will just import the Spine ".skel" data file.
Specifying Custom Sprite Sheet Name In Spine Data File

Setting Up Texture Packer W/ Nested Assets (Smart Asset Folders)

Setting Up Texture Packer W/ Nested Assets

In Spine you can define different skins per skeleton so your image file structure may be a nested structure with the skin name and the individual body parts of the skin having the same file name just in a separate folder.

**Note: You can avoid this by pre-pending all the body parts with the skin name to make them unique.

If you use this nested file structure for your assets when the animation gets exported the filename for the attachment on the skeleton will have the full path to the image. You will need to use smart folders in Texture packer to have Texture Packer export the images of the sprite sheet with the same path/folder structure in the name so that everything matches up when imported into GBs.


Smart Asset Folder Structure

Before you even start importing the images for your character into Spine setup the folder structure with the skin parts nested in a folder called "assets". The name of the folder is very specific because Texture Packer will recognize it as a smart folder and export the nested folder structure for the image file name in the sprite sheet data file just like Spine does.

Once you follow either one of the two export methods above just import the Spine ".skel" file into GBs via the assets window and a Spine Skeleton asset will be created for you.

Next In This Series...

Congratulations on finishing this tutorial! Found it helpful? Spread the word...


There are no comments yet!

Anyone can leave a comment!

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