Pixi.js可以从一个动态gif文件生成SpriteSheet动画或MovieClip。

Question

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

我有一个jsfiddle，可以加载您粘贴到输入框中的任何图像，但它只加载第一帧。

http://jsfiddle.net/40k7g0cL/

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

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

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

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

如果pixi.js中没有简单的解决方案，那么我需要编写自己的插件，也许使用类似jsgif的东西来处理.gif并手动分离每一帧？

任何有关如何在浏览器中（使用javascript）从动画的.gif生成SpriteSheet的建议都可能很有用。

- Brian

---

我知道你想在浏览器中实现，但是也有一个不错的服务可以使用，试试http://cloudinary.com/cookbook/extract_frames_from_an_animated_gif#play_button_overlay。 - hitautodestruct

Answer 1

很抱歉，使用 pixi.js 没有直接实现此功能的方法。

正如您所建议的，似乎 jsgif 是客户端 JavaScript 中唯一低级别实现的 gif。还有一个名为 libgif-js 的分支，稍微容易分析一些，并且它可以为构建 SpriteSheet 提供线索。

拆分帧的过程如下：

• 加载图像数据。
  如果您的应用程序在线，则必须使用 File API (请参阅此处) 读取本地文件。
  您将得到一个包含 gif 原始数据的 ArrayBuffer 或 String，可传递给 new Stream(data)。

• 解析数据：
  调用 parseGIF(stream, handler)。第二个库可以大大帮助理解此过程。
  自定义处理程序和回调以获取所需内容（宽度、高度、帧...）。

• 根据您的规则创建 SpriteSheet：
  如果选择将帧保存为 ImageData，则使用隐藏画布（可以与解析时相同）以正确位置绘制它们以形成 SpriteSheet。

• 获取最终图像并使用它：
  例如，您可以使用 canvas.toDataURL(*format*)（首先将画布调整为 SpriteSheet 尺寸）以获取图像作为 base64 url。

- Bumxu