pixijs如何将gif图片加载游戏中变成序列帧
我们先从网上找一个动画素材;
将这张图片加回本地,导入ps,ps中能看到这个动画有12帧;
我们将其导出成png导入texturepacker,
texturepacker是我们常用的一个图片打包软件,一般二维图片素材都会经它之手打成一张大图,加载进游戏,这样可以大大降游戏管理素材;降低drawcall;
注意在选项里选择好引擎/json文件地址/png打包图片地址;
最终形成了游戏中要的序列打包图;
init(){
let facepath = _static.cdn + '/bomb/face.json';
var that = this;
var _back = ()=>{
var anis = core.loader.resources[facepath].data.animations;
var ani = anis[that.list[parseInt(that.index)]];
ani = ani.map(i=>PIXI.Texture.fromFrame(i));
var _f = new PIXI.extras.AnimatedSprite(ani);
_f.scale.x = _f.scale.y = that.scale;
_f.name = 'face_'+that.index;
that.obj = _f;
_f.loop = false;
_f.play();
_f.animationSpeed = 0.2;
_f.onComplete = ()=>{
console.log('complete');
that.destory();
}
that.UI.scene.addChild(_f);
}
if(core.loader.resources[facepath])
{
_back();
}else{
core.loader.add(facepath)
.load((_,r) => {
console.log('r',r)
//resources = r[facepath];
_back();
})
}
}
destory(){
if(this.UI.scene.getChildByName(this.obj.name)){
this.UI.scene.removeChild(this.obj)
}
}
这样游戏中就能用上我们的动画效果了。。。