Skip to main content

Spinal tap - First attempt at using Esoteric Software's Spine app.

In NDvsPR I made the sprites by creating individual images of the characters in various positions  in photoshop, collating them as a sprite sheet  and referencing them using the sprite API.
Since the sprite API in Corona has been deprecated, and I'd already purchased a copy of Spine I thought it worth trying it out.
First step is to divide the image to be used into layers, one for each section, so Head, Right arm, Left arm etc...
There is a script that comes with Spine that exports the layers as individual .PNGs and a JSON file outlining their relative positions.

{"bones":[{"name":"root"}],"slots":[
{"name":"Tail_Tip","bone":"root","attachment":"Tail_Tip"},
{"name":"Tail_2","bone":"root","attachment":"Tail_2"},
{"name":"Tail_3","bone":"root","attachment":"Tail_3"},
{"name":"Tail4","bone":"root","attachment":"Tail4"},
{"name":"Left_Leg","bone":"root","attachment":"Left_Leg"},
{"name":"Left_arm","bone":"root","attachment":"Left_arm"},
{"name":"Body","bone":"root","attachment":"Body"},
{"name":"Right_Leg","bone":"root","attachment":"Right_Leg"},
{"name":"Right_arm","bone":"root","attachment":"Right_arm"},
{"name":"Neck","bone":"root","attachment":"Neck"},
{"name":"Head","bone":"root","attachment":"Head"},
],"skins":{"default":{
"Tail_Tip":{"Tail_Tip":{"x":376,"y":1123.5,"width":321,"height":136}},
"Tail_2":{"Tail_2":{"x":154,"y":905,"width":263,"height":364}},
"Tail_3":{"Tail_3":{"x":148,"y":573,"width":236,"height":424}},
"Tail4":{"Tail4":{"x":377.5,"y":429,"width":513,"height":562}},
"Left_Leg":{"Left_Leg":{"x":390.5,"y":200,"width":528,"height":400}},
"Left_arm":{"Left_arm":{"x":922,"y":835,"width":169,"height":93}},
"Body":{"Body":{"x":542,"y":537,"width":1054,"height":1065}},
"Right_Leg":{"Right_Leg":{"x":735,"y":309,"width":718,"height":504}},
"Right_arm":{"Right_arm":{"x":913,"y":803.5,"width":147,"height":111}},
"Neck":{"Neck":{"x":885,"y":969.5,"width":260,"height":231}},
"Head":{"Head":{"x":1081.5,"y":997,"width":236,"height":189}},
}}, "animations": { "animation": {} }}


A new project is created in Spine, and the data imported providing the image with all the components correctly positioned. Each component needs to have a bone associated with it. This is a bit fiddly, and I redid the bone structure half a dozen times as I kept making mistakes. A handy hint when creating the bones is to hold the shift key which allows components to be associated directly, rather than once a bone is created.


Once the skeleton is attached I switched to animation mode. Here I had to create the initial keyframe, and subsequent movements for a 12 frame section. Unfortunately my components didn't lend themselves well to animation and the poor thing looks like it's got a hip problem.
I need to redraw the individual components and re-export them, but not today.


Popular posts from this blog

live

Beta Beater

The Google Developer Console is really very very good.
It's logically set out, and makes it super easy to run a Beta test.
I'm on the tenth iteration of the final draft, and think I've got to a point where I can actually promote the app to Production.
The latest revision changed the icon set, and removed a load more cruft, slimming the app down to just 12.14Mb. I could strip out the iOS icons and lose a few more bytes but the original aim way back when I started on this project was to build a simple game that could be deployed cross platform, so I think I'll try and maintain just one codebase... as I really should submit this to the iTunes store too, to close the project.



Spine again - animating game assets

Laura Tallarday gave a neat demo of how to build an animation in Spine on the CoronaGeek Hangout, so I had a bash at chopping up an image and animating it.
The plan is to add some more sophisticated animations to the new game "Duck sized horse".. but as was discussed in the show adding a whole bunch of spine animated objects might hammer a mobile device... and as the aim is to have 100 tiny duck sized horses, I'd best choose another approach for them.

anyway here's a swaying viking...