【Day29】Pixi-AnimatedSprite

PIXI.AnimatedSprite

今天介绍用PIXI.AnimatedSprite做影格动画

做好每一格动画的图後，可以先用TexturePacker来做出相对应的spritesheet图及json档，只要直接汇入并选择你要使用的套件，就可以会出相对应的格式喔，现在已经可以支援到PixiJS5了！

动动看
JS

let app = new PIXI.Application({width: 500, height: 500,backgroundColor:0xfafad2})
     document.body.appendChild(app.view)

     app.loader
        .add('spritesheet','./spriteSheet.json') //载入json
        .load(onAssetLoaded)//监听载入完成，并执行onAssetLoaded()

    function onAssetLoaded() {
        const frames=[]
        for(let i=0;i<3;i++){
            frames.push(PIXI.Texture.from(`${i+1}.png`))
        } 
        let face=new PIXI.AnimatedSprite(frames)
        face.x = app.screen.width/2 //将AnimatedSprite置中
        face.y = app.screen.height/2 //将AnimatedSprite置中
        face.anchor.set(0.5) //将AnimatedSprite中心点，设至图片中心
        face.animationSpeed=.1 //设置速度
        face.play() //开始动画
        app.stage.addChild(face) //将AnimatedSprite加入stage
    }

JSON

{"frames": {

"1.png":
{
	"frame": {"x":0,"y":0,"w":118,"h":118},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":118,"h":118},
	"sourceSize": {"w":118,"h":118},
	"anchor": {"x":0.174648,"y":0.5}
},
"2.png":
{
	"frame": {"x":118,"y":0,"w":118,"h":118},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":118,"h":118},
	"sourceSize": {"w":118,"h":118},
	"anchor": {"x":0.174648,"y":0.5}
},
"3.png":
{
	"frame": {"x":236,"y":0,"w":118,"h":118},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":118,"h":118},
	"sourceSize": {"w":118,"h":118},
	"anchor": {"x":0.174648,"y":0.5}
}},
"meta": {
	"app": "https://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "spriteSheet.png",
	"format": "RGBA8888",
	"size": {"w":354,"h":118},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:284e27f896c7300d0fed1731537be3d6:68fd4826430705af2ee597f905a56731:01daf213c191fbc52b75953283de55c1$"
}
}

成果画面：

要看更多PIXI.AnimatedSprite属性可以看官网的介绍

～如有疑问或是错误，欢迎不吝指教～

参考来源：
[1]https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5
[2]https://pixijs.io/examples/#/sprite/animatedsprite-explosion.js
[3]http://pixijs.download/release/docs/PIXI.AnimatedSprite.html