Jump to content

Animated GIFs


Eagleheart
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...