Now it's easier to turn this:
Into this:
Since it wasn't possible to separate the sequences on the object exported
Usage of the exporter:
Just extract the zip (provided at end of post) inside [TexturePacker instalation folder]\bin\exporters\ and it will be selectable the next time you open TexturePacker GUI, at the 'Data Format' dropdown menu.
Usage of the parser:
If, as an example, your Array variable on the '.js' file generated by TexturePacker is named sprite_sheet (it'll have the name of your generated image file):
var animations = TPKineticParser (sprite_sheet);
The animations object will contain the named arrays according to the files used to build the sprite sheet on Texture Packer.
Eg., if the files used were: idle001.png, idle002.png, idle003.png, jump_001.png, jump_002.png and jump_003.png, the animations Object output will be:
var animations = {
idle: [{
sprite properties
}, {
sprite properties
}, {
sprite properties
}],
jump: [{
sprite properties
}, {
sprite properties
}, {
sprite properties
}]
};
It automatically removes the final '_', '-' or ' '(space) before the sequence numbers. It'll only work if your files are named like this: name_####; or this: name### (the number of digits doesn't matter). If the end of 'name' is also a digit, separate from the sequence number with an underscore (or '-' or space) so it's not removed.
It also works for names not finished with numbers. So you can use it just for storing several images in one file instead of animation sequences.
Downloads
TexturePacker KineticJS Data file exporter (zip)
KineticJS Data file javascript parser (js)
And if you want to see the code for the demo above, here are the source files:
coin_ship.png
Main.js
coin_ship.js
kinetic-v4.1.0.min.js
TPKineticParser.js
Just import them in your html header and execute
new Main();
I'm just a newcomer on KineticJS, but I've done this kind of parser before with both Java and
ActionScript 3.0.
