Pixi.js从动画gif文件生成SpriteSheet动画或MovieClip

Question

我正在制作一个游戏，允许玩家链接到自己的gif图像，并立即使它们在游戏中可玩，并需要将动画.gif文件转换为spritesheets。

我有一个小提琴手，它会将您过去的任何图像加载到输入中，但它只加载第一个帧：

http://jsfiddle.net/40k7g0cL/

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

但是，pixi.js资产加载器似乎只能加载动画.gif文件的第一帧，而不能加载其他文件。

我能找到的关于这个主题的所有信息都说我应该提前把动画.gif文件转换成一个SpriteSheet，但是这是不可能的，因为播放器将在播放的时候提供.gif图像，所以我不能提前处理它们。

是否有一种简单的方法来加载动画.gif图像，使其自动转换为SpriteSheet或MovieClip，甚至是纹理对象数组？

如果pixi.js中还没有简单的解决方案，那么我是否需要编写自己的插件，比如使用jsgif来处理.gif并手动分离每个帧？

任何关于如何从浏览器中的动画SpriteSheet客户端生成.gif的建议(在javascript中)都是有用的。

Answer 1

对不起，没有办法直接用pixi.js实现这一点。

正如您所建议的，jsgif似乎是用于客户端javascript的gif的唯一低级别实现。另外，还有一个名为libgif js的分支，比较容易分析，它可以为构建SpriteSheet提供线索。

将框架分开的过程是：

• 加载图像数据. 如果应用程序处于联机状态，则必须使用File (请看这里)读取本地文件。 您将得到一个包含gif原始数据的ArrayBuffer或String，这些数据可以传递给new Stream(data)。
• 解析数据： 打给parseGIF(stream, handler)。第二个库可以很好地帮助理解这个过程。 自定义处理程序和回调以获得所需的内容(宽度、高度、帧.)。
• 根据您的规则创建SpriteSheet： 如果选择将框架保存为ImageData，请使用隐藏的画布(可以与解析中的画布相同)在正确的位置绘制它们以形成SpriteSheet。
• 获取最后的图像并使用它： 例如，您可以使用canvas.toDataURL(*format*) (首先，将画布大小调整为SpriteSheet维度)作为base64 url获取图像。