pixijs如何将gif图片加载游戏中变成序列帧

我们先从网上找一个动画素材；

将这张图片加回本地，导入ps，ps中能看到这个动画有12帧；

我们将其导出成png导入texturepacker，

texturepacker是我们常用的一个图片打包软件，一般二维图片素材都会经它之手打成一张大图，加载进游戏，这样可以大大降游戏管理素材；降低drawcall;

注意在选项里选择好引擎/json文件地址/png打包图片地址；
最终形成了游戏中要的序列打包图；

pixijs加载纹理是

core.loader.add(facepath)
    				.load((_,r) => {
    	                console.log('r',r)
    	                //resources = r[facepath];
    	                _back();
    	            })

其中facepath是你自己弄好的地址，也可以是本地地址，也可以是远程地址；
load里加载完后方可使用；

加载完成之后你可以在core.loader.resources[facepath].data.animations;
里找到你要的动画；

以下是我的游戏中加载动画的相关代码：

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)
		}
		
	}

下面自己做frames是直接从纹理中找到图片，官方的案例中也这样的；

var frames = [];
for(var i=0;i<12;i++){
    frames.push(PIXI.Texture.fromFrame('anger_'+i+'.png'));
}

var face = new PIXI.extras.AnimatedSprite(frames);
face.play();
face.loop = false;
face.animationSpeed = 0.6;
this.context.addChild(face)
explosion.onComplete = (()=>{
    console.log(this)
    //obj.destory();
}).bind(this)

这样游戏中就能用上我们的动画效果了。。。

——————————————————
html5游戏开发QQ群 639636145