Spine: A First Look

I recently obtained a license for Spine, software that makes it easier to get fluid animations into mobile applications, and wanted to see how well it would integrate into Corona SDK. The first thing I did was quickly draw a character that almost resembled a zombie, if it weren’t drawn so poorly in Photoshop. I put each body part on its own layer.

Photoshop

I then ran the script to export each layer as its own .png file.

Script

I started a new Spine project and imported the artwork. I then created a skeleton and attached each piece of artwork to the different bones. By selecting the bones,  I was able to move and rotate the zombie’s limbs to animate him on a timeline.

Spine Zombie

I exported the animation as a .json file. This is what makes Spine useful. It allows you to animate easily and also keep the file size very low since the .json file controls the animation. This saves you from having to export hundreds of sprites and program them into your app. Instead, you just export the artwork of each body part and a .json file.

Export

Once I had my .json file, I used the Corona Runtime provided by Esoteric Software and altered the main.lua file to import my zombie.

Main.lua

I opened the main.lua file in the Corona SDK Simulator and there was my zombie walking on the screen. I haven’t read through any of the documentation on Esoteric Software’s website nor have I watched too many of the videos, so I may have done some of the steps incorrectly. However, just in 20 minutes of playing around with Spine, I was able to create a working example of an animation in a app, not too bad.

Screen Shot 2013-08-05 at 9.39.45 PM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s