Home / Uncategorized / How to import Spine animation

How to import Spine animation

Spine is an animation tool that focuses specifically on 2D animation for games
http://esotericsoftware.com/spine-quickstart

Photoshop-LayersToPNG.jsx exports images in a layer group. You can import the exported images to Spine
https://gist.github.com/NathanSweet/c8e2f6e1d79dedd56e8c

Let’s create a rocket animation.
Sample project is here. http://kwiksher.com/daily/spine0124/Spine.zip

Steps

  1. Create a new Kwik project
  2. A layer group – rocket consists of body, wingR, wingL and tale
  3. export the ‘rocket’ layer group with LayersToPNG.jsx
  4. Open Spine and create a new spine project and import the parts of rocket
  5. Make animations in Spine
  6. Export the spine project. It outputs json, atlas and png files.
  7. Kwik to publish the project and preview it with Corona simulator.
  8. Create a custom file of rocket_image.lua to use the files(json, atlas, png) from Spine.
  9. Publish again to make the custom file enable to work

creating a new Kwik project and exporting the rocket parts with LayersToPNG.js

you can find layer png files and page1.json 

Open Spine and import data. You can set page1.json from Browse button and set Skeleton name as” rocket”. Then click OK

If Missing is displayed, you need to set the correct images folder

Set the images folder path from Tree Panel > Images > Path

select images folder and click Open to set the images folder.

Now the images are displayed

You don’t need to use  background image. So make it uncheck “Export”. I modified the background color transparent to focus the rocket.

Set the center to the origin. This is important for importing the spine animation later to Kwik/Corona

Making bones

Making animations. I named the animation as “animation”

Export

Select JSON and Create atlas checked. Output folder is “build4/assets/sprites”

In the sample project, you can preview it with Corona simulator. Please open spine/main.lua with Corona simulator

Now please go back to work Kwik. Publish it to generate the lua files.

You find rocket_image_.lua in components/page01 folder

Copy and paste rocket_image_.lua to custom/components/page01 folder. (You need to create ‘page01’ folder by hand )

Modify the custom rocket_image_.lua

  • line 22 local spine = require(“extlib.spine”).new(“rocket”)
  • line 28 layer.rocket = spine:newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight)

Copy spine-corona, spine-lua folders and spine.lua in spine folder and paste them to build4/extlib folder.

Publish again to make the custom file enabled to work.
<img class=”alignnone size-medium” src=”http://kwiksher.com/daily/spine0124/2017-01-24_1438.png” alt=”” width=”300″ />

P.S. the sample project used Particles replacement. The fire layer and the background are replaced with the particles.

You can find the sample particles in CoronaSDK_Emitter_Viewer_Sample folder.

I changed the emit angle as 180 for air_stars.  Editing particles(Kaboom) on Kwik4 is only available for users who purchased a Kwik license.

Enjoy.