Problems displaying Spritesheet Animation when spritesheet is optimized

@singmajesty @player_03

Hi

I am having trouble displaying spritesheet animation when I optimize the spritesheet using Texture Packer Pro. All the images appear mixed up in the spritesheet and when I try to display the 1st image, it displays the 10th image for example (depending on the image position in the spritesheet).

Also the 10th image either appears cut off or doesn’t display at all.
I have heard that we should use the data format (XML or JSON Array) which carries the metadata information. Please suggest which one is better (XML or JSON Array).

I also tried to change the values in the XML or JSON Array, but those changes are not reflected in the animation.

Do I have to load and read the XML or JSON file in order to display the animation correctly, since the animation does not display properly as mentioned earlier due to the mixed images in the spritesheet.

Please Suggest… Thanks

Hi, not sure how to use spritesheet in classic openfl display as I’m used to Starling and TextureAtlas but your problem sounds like you use the images in the sheet in the order they come in.

You should get them by their names instead, probably put them in the right order in an Array of yours. I can probably help if you share your code :slight_smile:

I’m using latest spritesheet library from github (https://github.com/skylarkstudio/spritesheet/) with spritesheets generated from Animate CC using algorithm: Basic, and Data Format: JSON-Array. It works with TexturePackerImporter class of the given library. Had no problems with that yet.

@outline

Have you used Texture Packer Pro to optimize the spritesheet (Use Trim mode : Crop, Flush Position OR Crop, Keep Position)

If you use the above trim mode, the images in the spritesheet gets mixed up in order to best utilize the space in the spritesheet and remove unwanted transparent areas.

After the images get mixed up, if you specify [0] in the BehaviorData parameter inside addBehavior method, it will display some other image which is in the zero position in the spritesheet, instead of the 0th image. Post that all the animation goes haywire… i mean you will see images being cropped or multiple images while playing the animation.

Also how are you reading the JSON-Array. Can you please share the code… Thanks

@outline thanks, can’t help right away as I need to dig in that lib a bit but will try to take the time to do so in the next few days. I’m interested in this as I could need it for non-Starling stuff :slight_smile:

@kiranzz agreed, but it’s manageable I mean I use optimized sheets all the time (again, in Starling where you can get every image (sub-texture) by name)

I’ve made a Sparrow parser (xml) for Tilemap long time ago. I don’t know if it’s still working with last openfl. I may to update soon because I will need it in near future.

1 Like

@kiranzz I’ve not used Texture Packer Pro and any of these options you mention. I guess you should have a matched JSON-Array file to these optimizations. Maybe that TexturePackerImporter is not taking into account these crops and modifications but I should have to investigate that. I remember it being as simple as it possible could be so that could be the case. I’m ready JSON-Array using that exact class TexturePackerImporter since it is in the library I’ve mentioned. Are you using the same library or any other ? :slight_smile:

This class: https://github.com/skylarkstudio/spritesheet/blob/master/spritesheet/importers/TexturePackerImporter.hx