Pixi.js generate SpriteSheet Animation or MovieClip from an animated gif file

Question

I am making a game that allows the player to link to their own gif images and immediately make them playable in the game, and need to convert animated .gif files into spritesheets.

I have a jsfiddle that will load any image you past into the input, but it only loads the first frame:

http://jsfiddle.net/40k7g0cL/

var animatedGif = PIXI.Sprite.fromImage('http://i.imgur.com/egzJbiI.gif');

But pixi.js asset loader can only seem to load the first frame of an animated .gif file and not the rest.

All the information I can find on this subject says I should convert the animated .gif file into a SpriteSheet ahead of time, however this is not possible because the player is going to be supplying the .gif images as they play, so I can not pre-process them ahead of time.

Is there an easy way to load an animated .gif image, having it automatically converted to a SpriteSheet or MovieClip or even an array of Texture objects?

If there is not a simple solution already in pixi.js, do I need to write my own plugin, perhaps using something like jsgif to process the .gif and separate each frame manually?

Any suggestions on how to go about generating a SpriteSheet from an animated .gif client-side in the browser (in javascript) could be useful.

Answer 1

Sorry, there is no way to achieve this directly with pixi.js.

As you suggest, it seems that jsgif is the only low-level implementation of gif for client-side javascript. Also, exists a fork of this called libgif-js, a little easier to analyze, and it can offer a clue for build the SpriteSheet.

The process to separate the frames would be:

• Load the image data.
  If your app is online, you have to use the File API (see here) to read local files.
  You'll get an ArrayBuffer or String with the gif's raw data, that can be passed to new Stream(data).

• Parse the data:
  Call parseGIF(stream, handler). The second library can help a lot to understand this process.
  Customize handler and callbacks to get what you need (width, height, frames...).

• Create your SpriteSheet according to your rules:
  If you chose save the frames as ImageData, use a hidden canvas (it can be the same that in the parse) to draw them in the right positions to form your SpriteSheet.

• Take the final image and use it:
  You can use, for example, canvas.toDataURL(*format*) (first, resize canvas to SpriteSheet dimensions) to get the image as a base64 url.