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

Photoshop-LayersToPNG.jsx exports images in a layer group. You can import the exported images to Spine

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


  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”


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.  You need to use spine library and spine:newImagerect instead of display.newImageRect. Here is the modified custom/components/page01/rocket_image_.lua

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

Copy spine-corona, spine-lua folders and spine.lua in spine folder of Sample project and paste them like this

  • build4/extlib/spine.lua
  • build4/spine-corona
  • buiild4/spine-lua

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.


1 comment

  • For example, the following code is loading spineboy sprite in rocket_image_.lua
    newImageRect function has the four argument to set animation mix and you can change animation by setAnimationByName.

    Sample project is updated. http://kwiksher.com/daily/spine0124/Spine.zip

    local spine = require(“extlib.spine”).new(“spineboy”, “walk”) — default animation is walk

    layer.rocket = spine:newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight,
    stateData:setMix(“walk”, “jump”, 0.2)
    stateData:setMix(“jump”, “run”, 0.2)

    layer.rocket:addEventListener(“touch”, function (event)
    if event.phase ~= “ended” and event.phase ~= “cancelled” then return end
    local state = layer.rocket.state
    local name = state:getCurrent(0).animation.name
    if name == “walk” then
    state:setAnimationByName(0, “jump”, false) — repeat false
    elseif name == “jump” then
    state:setAnimationByName(0, “walk”, true)


Leave a Reply

Your email address will not be published. Required fields are marked *