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

Posted 2023-03-25

【中文标题】Pixi.js 从动画 gif 文件生成 SpriteSheet Animation 或 MovieClip

【英文标题】：Pixi.js generate SpriteSheet Animation or MovieClip from an animated gif file

【发布时间】：2015-02-27 06:36:01

【问题描述】：

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

我有一个 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 的建议都可能有用。

【问题讨论】：

我知道你想在浏览器中使用，但是你也可以使用一个不错的服务试试cloudinary.com/cookbook/…

【参考方案1】：

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

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

分离框架的过程是：

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

解析数据： 致电parseGIF(stream, handler)。第二个库有助于理解这个过程。 自定义处理程序和回调以获得您需要的内容（宽度、高度、帧...）。

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

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