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