前言

在Cocos Creator游戲開發(fā)中，骨骼動畫對于優(yōu)化系統(tǒng)資源占用有很大幫助，很多時候我們都會使用。

一、 spine骨骼動畫工具

1: 骨骼動畫: 把動畫打散, 通過工具，調(diào)骨骼的運動等來形成動畫

2: spine是一個非常流行的2D骨骼動畫制作工具

3: spine 動畫美術(shù)人員導出3個文件:

(1) .png文件:動畫的”骨骼”的**圖片集**;

(2).atlas文件: 每個骨骼在圖片集里面**位置，大小**;

(3).json文件: 骨骼動畫的**anim**控制文件,以及骨骼位置等信息;

4: 骨骼動畫導入: 直接把三個文件拷貝到項目的資源目錄下即可;

5: 使用骨骼動畫:

(1) 直接拖動到場景;

(2) 創(chuàng)建一個節(jié)點來添加**sp.Skeleton**組件;

二、 sp.Skeleton

1: sp.Skeleton: 控制面板屬性:

Skeleton Data: 骨骼的控制文件.json文件;

Default Skin: 默認皮膚;

Animation:  正在播放的動畫;

Loop: 是否循環(huán)播放;

Premuliplied Alpha 是否使用貼圖預乘;是否要顯示骨骼的各個部分！

TimeScale: 播放動畫的時間比例系數(shù);

Debug Slots: 是否顯示 Slots的調(diào)試信息;

Debug Bone: 是否顯示Bone的調(diào)試信息;

2: sp.Skeleton重要的方法: Skeleton是以管道的模式來播放動畫，管道用整數(shù)編號，管道可以獨立播放動畫，Track;

(1)clearTrack(trackIndex): 清理對應Track的動畫

(2)clearTracks(); 清除所有Track動畫

(3)setAnimation(trackIndex, “anim_name”,  is_loop)**清除管道所有動畫后**，再重新播放

(4)addAnimation(trackIndex, “anim_name”,  is_loop);往管道里面**添加**一個動畫;

@property({type:sp.*Skeleton*, tooltip:"骨骼動畫組件"})

mySkeleton : *sp*.*Skeleton* = null;

    enterAnim(){

        //this.mySkeleton.clearTracks();

        *this*.mySkeleton.clearTrack(0);

        *this*.mySkeleton.setAnimation(0, "in", false);

        *this*.mySkeleton.addAnimation(0, "idle_1", true);

    }

    outAnim(){

        //this.mySkeleton.clearTracks();

        *this*.mySkeleton.clearTrack(0);

        *this*.mySkeleton.setAnimation(0, "out", false);

        *this*.mySkeleton.addAnimation(0, "idle_1", true);

    }

    clkAnim(){

        //this.mySkeleton.clearTracks();

        *this*.mySkeleton.clearTrack(0);

        *this*.mySkeleton.setAnimation(0, "clk_1", false);

        *this*.mySkeleton.addAnimation(0, "idle_1", true);

    }

三、 動畫事件監(jiān)聽

1: setStartListener: 設置動畫開始播放的事件;

2: setEndListener : 設置動畫播放完成后的事件;

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

    start () {

        *this*.mySkeleton = *this*.node.getChildByName("Spine").getComponent(sp.Skeleton);

        *this*.mySkeleton.setStartListener(function(){

            *console*.log("動畫開始播放");

        });

        *this*.mySkeleton.setCompleteListener(function(){

            *console*.log("循環(huán)播放時每一次播放完成時調(diào)用");

        });

        *this*.mySkeleton.setEndListener(function(){

            *console*.log("動畫播放結(jié)束");

        });

    }