Pixi.js从动画gif文件生成精灵表动画或影片剪辑

Pixi.js generate SpriteSheet Animation or MovieClip from an animated gif file

本文关键字：动画 精灵 js gif 文件 Pixi      更新时间：2023-09-26

我正在制作一款游戏，允许玩家链接到自己的 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图像，使其自动转换为精灵表或影片剪辑，甚至是纹理对象数组？

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

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

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

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

分离帧的过程将是：

  • 加载图像数据。
    如果你的应用处于联机状态，则必须使用文件 API（请参阅此处）来读取本地文件。
    您将获得包含 gif 原始数据的ArrayBuffer或String，这些数据可以传递给 new Stream(data) .

  • 解析数据：
    呼叫parseGIF(stream, handler) .第二个库可以帮助理解这个过程。
    自定义处理程序和回调以获取所需的内容（宽度，高度，框架...

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

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

相关文章：