() 運動 cli 圖片 ots 代碼 開始 gin default

1: 掌握sp.Skeleton組件的使用;

spine骨骼動畫工具

1: 骨骼動畫: 把動畫打散, 通過工具，調骨骼的運動等來形成動畫
2: spine是一個非常流行的2D骨骼動畫制作工具
3: spine 動畫美術人員導出3個文件:
　　(1) .png文件:動畫的”骨骼”的圖片集;
　　(2).atlas文件: 每個骨骼在圖片集裏面位置，大小;
　　(3).json文件: 骨骼動畫的anim控制文件,以及骨骼位置等信息;
4: 骨骼動畫導入: 直接把三個文件拷貝到項目的資源目錄下即可;
5: 使用骨骼動畫:
　　(1) 直接拖動到場景;
　　(2) 創建一個節點來添加sp.Skeleton組件;

sp.Skeleton

1: sp.Skeleton: 控制面板屬性:
　　Skeleton Data: 骨骼的控制文件.json文件;
　　Default Skin: 默認皮膚;
　　Animation: 正在播放的動畫;
　　Loop: 是否循環播放;
　　Premuliplied Alpha 是否使用貼圖預乘;
　　TimeScale: 播放動畫的時間比例系數;
　　Debug Slots: 是否顯示 Slots的調試信息;
　　Debug Bone: 是否顯示Bone的調試信息;
2: sp.Skeleton重要的方法: Skeleton是以管道的模式來播放動畫，管道用整數編號，管道可以獨立播放動畫，Track;

　　(1)clearTrack(trackIndex): 清理對應Track的動畫
　　(2)clearTracks(); 清楚所有Track動畫
　　(3)setAnimation(trackIndex, “anim_name”, is_loop)清楚管道所有動畫後，再從新播放
　　(4)addAnimation(trackIndex, “anim_name”, is_loop);往管道裏面添加一個動畫;

動畫事件監聽

　　1: setStartListener: 設置動畫開始播放的事件;
　　2: setEndListener : 設置動畫播放完成後的事件;

　　3: setCompleteListener: 設置動畫一次播放完成後的事件;

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: ‘Foo‘, // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        // 界面綁定
        ske_anim: {
            type: sp.Skeleton, // 
            default: null,
        },
        // end 
    },

    // use this for initialization
    onLoad: function () {
        // 代碼獲取
        var spine = this.node.getChildByName("spine");
        var ske_com = spine.getComponent(sp.Skeleton);
        this.ske_com = ske_com;

        this.ske_com.setStartListener(function() {
            console.log("anim started");
        });

        this.ske_com.setEndListener(function() {
            console.log("anim end");
        });

        this.ske_com.setCompleteListener(function() {
            console.log("play once");
        });
    },

    enter_click: function() {
        // 清理動畫播放管道, 索引來表示
        // this.ske_com.clearTracks(); // 清理所有播放隊列的動畫
        this.ske_com.clearTrack(0); // 指定管道的索引
        // end

        // step1, 播放我們的入場動畫
        this.ske_com.setAnimation(0, "in", false); // 把管道清空，加入當前這個，
        this.ske_com.addAnimation(0, "idle_1", true); // 將我們的動畫，以排隊的方式 加入到管道
        // end

        // step2: 播放我們的idle
        // end 
    },

    click1_anim_click: function() {
        this.ske_com.clearTrack(0); // 指定管道的索引
        this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入當前這個，
        this.ske_com.addAnimation(0, "idle_1", true); // 將我們的動畫，以排隊的方式 加入到管道
    },

    click2_anim_click: function() {
        this.ske_com.clearTrack(0); // 指定管道的索引
        this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入當前這個，
        this.ske_com.addAnimation(0, "idle_1", true); // 將我們的動畫，以排隊的方式 加入到管道
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

cocos creator基礎-(十一)spine骨骼動畫組件使用