iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
1
Modern Web

30天Pixi帶你飛上天系列 第 24

Day24 Spine

https://ithelp.ithome.com.tw/upload/images/20181108/20111962iLgbqLZMfS.jpg

本篇沒有研究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);
});

做spine json工具

https://ithelp.ithome.com.tw/upload/images/20181108/20111962M2kAwnlp8Z.jpg


上一篇
Day23 PIXI.projection.Sprite2d(2)
下一篇
Day25 Particle Container噁心蟲蟲
系列文
30天Pixi帶你飛上天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2018-11-08 17:39:53

做完會變成怎樣~~XD

我要留言

立即登入留言