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

时间:2014-12-31 05:29:29

标签: javascript gif animated-gif sprite-sheet pixi.js

我正在制作一款游戏,允许玩家链接到他们自己的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并手动分离每个帧?

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

1 个答案:

答案 0 :(得分:2)

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

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

分隔帧的过程是:

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

  • 解析数据:
    致电parseGIF(stream, handler)。第二个图书馆可以帮助我们理解这个过程 自定义处理程序和回调以获得所需(宽度,高度,框架......)。

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

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