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

Question

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

我有一个jsfiddle,它会将你过去的任何图像加载到输入中,但它只加载第一帧:

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并手动分离每个帧？

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

Answer 1

抱歉，无法直接使用 pixi.js 实现此目的。

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

分离帧的过程是：

加载图像数据。
如果您的应用程序在线，则必须使用文件 API（请参阅此处）来读取本地文件。
您将得到带有 gif 原始数据的ArrayBufferor ，可以将其传递给.Stringnew Stream(data)
解析数据：
调用parseGIF(stream, handler). 第二个库可以帮助我们理解这个过程。
自定义处理程序和回调以获得您需要的内容（宽度、高度、框架...）。
根据您的规则创建您的 SpriteSheet：
如果您选择将帧保存为ImageData，请使用隐藏的画布（可以与解析中的画布相同）将它们绘制在正确的位置以形成您的 SpriteSheet。
获取最终图像并使用它：
例如，您可以使用canvas.toDataURL(*format*)（首先将画布大小调整为 SpriteSheet 尺寸）来获取作为 base64 url 的图像。