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

Question

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

我有一个 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 甚至一组纹理对象？

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

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

Answer 1

抱歉，没有办法直接用pixi.js实现。

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

分离帧的过程是:

• 加载图像数据。
  如果您的应用在线，您必须使用文件 API ( see here ) 来读取本地文件。
  您将获得带有 gif 原始数据的 ArrayBuffer 或 String，可以将其传递给 new Stream(data)。

• 解析数据:
  调用 parseGIF(stream, handler)。第二个库对理解这个过程有很大帮​​助。
  自定义处理程序和回调以获得您需要的内容(宽度、高度、帧...)。

• 根据您的规则创建您的 SpriteSheet:
  如果您选择将帧保存为 ImageData，请使用隐藏的 Canvas (它可以与解析中的 Canvas 相同)将它们绘制在正确的位置以形成您的 SpriteSheet。

• 拍摄最终图像并使用它:
  例如，您可以使用 canvas.toDataURL(*format*)(首先，将 Canvas 大小调整为 SpriteSheet 尺寸)将图像作为 base64 url​​。