我正在制作一款游戏,允许玩家链接到他们自己的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中)都可能有用 .
1 回答
对不起,pixi.js无法直接实现这一点 .
正如你的建议,似乎 jsgif 是客户端javascript的唯一低级gif实现 . 此外,存在一个名为 libgif-js 的分支,更容易分析,它可以提供构建SpriteSheet的线索 .
分离框架的过程将是:
Load the image data.
如果您的应用程序在线,则必须使用文件API(see here)来读取本地文件 .
您将获得带有gif原始数据的
ArrayBuffer
或String
,可以传递给new Stream(data)
.Parse the data:
拨打
parseGIF(stream, handler)
. 第二个库可以帮助我们理解这个过程 .自定义处理程序和回调以获得所需(宽度,高度,框架......) .
Create your SpriteSheet according to your rules:
如果您选择将帧保存为
ImageData
,请使用隐藏的画布(它可以与解析中的相同)在正确的位置绘制它们以形成SpriteSheet .Take the final image and use it:
例如,您可以使用
canvas.toDataURL(*format*)
(首先,将画布大小调整为SpriteSheet尺寸)以将图像作为base64网址 .