Animated GIFs

[Eagleheart]

All the sprite assets for the game I am making are in animated GIF form. There are hundreds. Is there any way to load and play them in PIXI.js without splitting them into individual frame image files first?

Perhaps there is some other library I could use in conjunction with PIXI.js to get these images in?

If not, is there some way I can recursively go through a folder and batch separate all of the GIFs into frame images?

[rich]

No, it's not possible to use animated gifs in this way. You will need to convert them into sprite sheets.

There are lots of tools that can extract frames from animated gifs. Imagemagick is one such command-line tool that could be easily scripted.

[Eagleheart]

I am able to get single files per frame to animate in PIXI.js, so I can do that once extracting with Image Magick. Apparently the preferred way to load animations into PIXI is through a sprite sheet though, like you said, not individual images. I suppose image magick can combine everything into sprite sheets as well, but then is there some way to batch export JSON versions of all of them? I assume I would need to use TexturePacker? The bash page on that is very unclear though: https://www.codeandweb.com/texturepacker/tutorials/batch-conversion-using-windows I don't know what the ' %%X ' means or if it's even possible to have it export JSON files with the command line?

[ivan.popelyshev]

Cant you do it with GUI? Also, you can try http://renderhjs.net/shoebox/ , its free. "Json<Hash>" is the output you need

[Eagleheart]

Hmm...I don't think it would be possible to do it with GUI? There are 189 images all in different folders. I don't think the GUI lets you simultaneously import frames from different folders and export each JSON file to its respective folder. And I don't want to do it manually 189 times in a row. I assume shoebox has the same problem and I don't think that has a command line tool either. And I just realized the TexturePacker command line options were for the pro version only. Hmm hmmm. I didn't expect this would be so difficult.

[mattstyles]

I normally use https://github.com/krzysztof-o/spritesheet.js/ to generate sheets. No idea if its applicable in your case but I've never had a problem with the CLI and you can access it programmatically if you need a bit more control.

[rich]

You can definitely script Texture Packer from the command line, we use it quite often like this. Would allow you to have quite a nice little workflow I think: imagemagick all the frames out into sub-folders, then texture packer them into atlases. I think the difference though is that depending on the size of the frames (and quantity) you should decide if you want to keep every frame or not. Maybe only extract every 2nd frame? Also you want to get as many frames as possible into a single atlas, so it would make sense to manually select which ones work well together (size wise).

[Fatalist]

3 hours ago, Eagleheart said:

And I just realized the TexturePacker command line options were for the pro version only.

You can use it with the free version too, some of the options are not available though.

TexturePacker  --disable-auto-alias --extrude "0" --png-opt-level "0" --algorithm "Basic" --disable-rotation --trim-mode "None" --size-constraints "POT" --data src/img/spritesheet.json --format "json"  --sheet src/img/spritesheet.png images/topack

This is a command I use with the free version.

--png-opt-level "0" --algorithm "Basic" --disable-rotation --trim-mode "None"  - these are mandatory for the free version, as far a I remember.

[Eagleheart]

Awesome! Thanks, guys! I tested the ImageMagick and TexturePacker command line tools manually for one of the images and it worked great. I can easily write a script to do them all automatically now.

Is there some way to specify which images TexturePacker will use rather than specifying a folder? I can just put the frames in their own folder in the script, but I'm just curious if it's needed. Is there some format you can use like out%05d.png that ImageMagick uses for the output command?

Also, one more question. In this tutorial for loading the sprite sheets in: http://www.gamebzh.net/htmlgame/pixi-e/index.html?s=basics&f=spritesheet.js&title=SpriteSheet Animation it iterates the exact amount of times to match the number of frames in the animation. Since some of my GIFs are three frames and others four, how would I make such a loop stop at the correct number depending on how many frames are in the sprite sheet?

11 hours ago, rich said:

I think the difference though is that depending on the size of the frames (and quantity) you should decide if you want to keep every frame or not. Maybe only extract every 2nd frame? Also you want to get as many frames as possible into a single atlas, so it would make sense to manually select which ones work well together (size wise).

The sprites all only have three-four frames, so there's no need to cut any of them. Thanks for the suggestion though. 

[Eagleheart]

Never mind, I figured it out. I just did a try/catch and broke from the loop if the file didn't exist. All my animated sprites are working in the game now and it looks fucking great! Thanks again!