本篇沒有研究json如何製作,請使用官方範例XD
先將官方的dragon.json載入
PIXI.loader
.add('dragon', 'required/assets/spine/dragon.json')
.load(onAssetsLoaded);
建立PIXI.spine.Spine
setAnimation
三個參數:
0: 將動畫存在一個陣列裡,可將其他動畫存在其他位置
'flying': json中animation
true: 動畫loop
var dragon = null;
function onAssetsLoaded(loader,res)
{
// 初始化
dragon = new PIXI.spine.Spine(res.dragon.spineData);
dragon.skeleton.setToSetupPose();
dragon.update(0);
dragon.autoUpdate = false;
// 放入場景
var dragonCage = new PIXI.Container();
dragonCage.addChild(dragon);
app.stage.addChild(dragonCage);
// 動畫array 動畫name loop
dragon.state.setAnimation(0, 'flying', true);
app.start();
}
// ticker跑動畫
app.ticker.add(function() {
dragon.update(0.01666666666667);
});