Javascript Pixi.js从动画gif文件生成精灵表动画或MovieClip

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

我有一个JSFIDLE，可以将您过去的任何图像加载到输入中，但它只加载第一帧：

但是pixi.js asset loader似乎只能加载动画.gif文件的第一帧，而不能加载其余帧

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

有没有一种简单的方法可以加载动画.gif图像，使其自动转换为精灵表或MovieClip，甚至是纹理对象数组

如果pixi.js中还没有一个简单的解决方案，我是否需要编写自己的插件，或者使用类似于处理.gif文件和手动分离每个帧的东西

---

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

抱歉，没有办法直接使用pixi.js实现这一点

正如您所建议的，jsgif似乎是客户端javascript的gif的唯一底层实现。此外，还存在一个称为的分支，更易于分析，它可以为构建SpriteSheet提供线索

分离框架的过程将是：

• 加载图像数据。
  如果应用程序处于联机状态，则必须使用文件API（）读取本地文件。
  您将获得一个带有gif原始数据的

  ArrayBuffer

  或

  String

  ，可以将其传递到

  新流（数据）

• 解析数据：
  调用

  parseGIF（流，处理程序）

  。第二个库有助于理解此过程。
  自定义处理程序和回调以获得所需的内容（宽度、高度、帧…）

• 根据规则创建精灵表：
  如果选择将帧另存为

  ImageData

  ，请使用隐藏画布（可以与解析中的画布相同）在正确的位置绘制帧，以形成精灵表

• 拍摄最终图像并使用它：
  例如，您可以使用

  canvas.toDataURL（*format*）

  （首先，将画布调整为精灵表维度）将图像作为base64 url获取

---

我知道您想在浏览器中使用，但有一个很好的服务，您也可以使用，试试看

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