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
- Create a new Kwik project
- A layer group – rocket consists of body, wingR, wingL and tale
- export the ‘rocket’ layer group with LayersToPNG.jsx
- Open Spine and create a new spine project and import the parts of rocket
- Make animations in Spine
- Export the spine project. It outputs json, atlas and png files.
- Kwik to publish the project and preview it with Corona simulator.
- Create a custom file of rocket_image.lua to use the files(json, atlas, png) from Spine.
- 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 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
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.