HTMl5 : Can we combine export output .png from animation. swf into 1 sheet.png


#1

Case for HTML5 export.

Like the title :
Can we combine export output .png from animation. swf into 1 sheet.png.

Example case :
I have 1 animation.swf character walk with asset hand.png, body.png, head.png, and leg.png. If we export the .swf the output will be 4 png (hand, body, head, and leg). Can we combine it into 1 sheet.png instead of 4 png? So the loading time will be much faster.


#2

Does Adobe Animate have an option for combining these resources into a single spritesheet? I believe there’s a default exporter, next we would just have to be able to parse and replay it


#3

I can’t find how to combining in my case. I only find “generate sprite sheet”.

If I use generate sprite sheet, the animation become frame by frame and the images will be a lot.

I want export it like export result dragonbones : head, body, hand, and leg into 1 sheet.png and the animation will be handle from .json file.


#4

ShoeBox (free) a tool I created in Adobe AIR can convert and combine these.
http://renderhjs.net/shoebox/

In particular there is a tool to reverse packing a sprite and instead extract the sprites of an atlas
http://renderhjs.net/shoebox/readSprites.htm

Use that to convert the Adobe Animate (Flash) atlas and then pack it with the Sprite Packer with your other sprites
http://renderhjs.net/shoebox/packSprites.htm

I have used these tools myself in the past for games to reduce the url requests and to just speed up the whole loading with other image formats than PNG like JPG or WebP.

One trick I used in the past is to save the whole atlas as JPG instead of PNG and store the alpha channel on the right side of the image. Then using either a shader or unpacking code I would combine them back into an RGBA bitmapData.


#5

Yes, I already use shoebox at this moment. But for combine ui game and button or animation by frame into 1 spritesheet.

My animation case was using “tween” or “motion” like flash game or dragon bones animation.
Openfl can read .swf directy and convert it into folder “lib” (this is the advantage using openfl saving a lot of time work and we can develop html5 game like flash game).
If I combine pictures on folder “lib” into 1 spritesheet, the animation will not working.

Maybe you can try openfl example “Nyancat”. Build it into html5 version and look at export folder there’s should be folder “lib”.


#6

I don’t have time to test this myself. What matters is that you use the same atlas format that your animation rubtime requires i.e. what dragonbones uses. The other import bit is to maintain the same string ids or names so that the animation engine can map it correctly.

I have done this in the past successfully with dragon bones and starling and combined several charcters into a single texture atlas.