cocos2d-x 3.0 Armature jsb 初體驗

有段時間沒有寫遊戲代碼了，這回來主要任務是要用jsb構建一個aprg動做遊戲，看到3.0官方已經綁定好了armature的js函數，先來體驗一把

3.0新建項目比2.2方便了不少，在終端運行tools下的create_project.py， 出現新建項目的圖形界面！  贊

新建好一個js項目，像住場景添加一個龍骨動畫：（記得在appdelegate.cpp中導入相關的綁定頭文件，而後register...）

ccs.ArmatureDataManager.getInstance().addArmatureFileInfo("res/d3.png", "res/d3.plist", "res/d3.xml");
armature = ccs.Armature.create("demo"); 
...
this.addchild(armature);

　　

ok,龍骨的動畫顯示出來了;

一個點擊播放一個動做，手有點生了，點擊響應要先在layer的繼承類的ctor中：this.setTouchEnabled(true);

而後就能夠在類中使用 onTouchesBegan和onTouchesEnded函數了;

 

Armature的基本使用：

ccs.ArmatureDataManager.getInstance().addArmatureFileInfo()  當導入cocostudio類型文件時（只需一個.ExportJson文件參數），當導入龍骨時（三個參數， png, plist, xml）
create(class_name) 傳入類名來生成動畫實例
getAnimation().playWithIndex(n)   從第n個動做開始播放;
++i; i = i% armature.getAnimation().getMovementCount(); armature.getAnimation().playWithIndex(i,10);在點擊事件中用這個方法能夠逐個播放全部動做：
getAnimation().setSpeedScale(f) 設置動畫的播放速度 
armature.init("Knight_f/Knight"); 等同與create+playerWithIndex ? 
setZOrder(n) 改變更畫的所在層級； 
getAnimation().play(name,n) 播放動做名爲name的動做， n參數頗有用，設置兩個動做間自動補間的幀數，讓動做看起來更平滑；

 

Armature能夠監聽動做事件，設置某個動做事件時觸發回調動做,例如：

getAnimation().setMovementEventCallFunc(this.animationEvent,this)；  //爲Armature添加一個事件監聽

animationEvent:function (armature, movementType, movementID) {   //當事件loopComplete發生時觸發下一個動做；
if (movementType == ccs.MovementEventType.loopComplete) {
if (movementID == "Fire") {...}}}

　　

幾個預約義的事件： boneFrameEvent/complete/loopComplete/movementChange/movementFameEvent/start

 

Armature也能夠監聽幀事件，設置某個幀事件時候觸發回調動做，例如：

armature.getAnimation().setFrameEventCallFunc(this.onFrameEvent, this);

onFrameEvent: function (bone, evt, originFrameIndex, currentFrameIndex) {

｝

　　

 

添加骨骼，這裏咱們能夠添加一個骨骼，設置它的表現（好比粒子光效），而後把它綁定在某個已有的骨骼上，這樣光效就會跟隨骨骼移動了

var p1 = cc.ParticleSystem.create("res/Particles/LavaFlow.plist"); //建立粒子
p1.setTotalParticles(50);var bone = ccs.Bone.create("p1"); //建立一個新的骨骼p1
bone.addDisplay(p1, 0); //爲新骨骼添加一個表現
bone.changeDisplayWithIndex(0, true); //顯示新骨骼的表現
bone.setIgnoreMovementBoneData(true); //？
bone.setZOrder(100);
bone.setScale(1.2);
this.armature.addBone(bone, "effect"); //將新的骨骼綁定到armature上的effect骨骼上，讓新骨骼隨effect骨骼運動；

　　

 

 修改骨骼的表現，實現換裝效果

for (var i = 0; i < 7; i++) {
　　var skin = ccs.Skin.createWithSpriteFrameName(weapon[i]); //建立skin對象
　　this.armature.getBone("weapon").addDisplay(skin, i); //將skin對象添加到某個骨骼對象上
}
...
this.armature.getBone("weapon").changeDisplayWithIndex(this.displayIndex, true); //切換骨骼外觀

　　

 

3.0的繪圖使用了新的api, 繪製出armature的碰撞邊緣：

init:function(){
...
    this.shape = cc.DrawNode.create(); //建立新畫板
    this.addChild(this.shape, 10);

    this.schedule(this.draw,2); //jsb下,draw函數是不會自動運行的
}

draw:function () {
        this.shape.clear(); //清楚上一幀的繪製
        var size = cc.Director.getInstance().getWinSize();
        var rect =  this.armature.getBoundingBox();  //獲取armature的邊界
        var rectArr = [  //將邊界轉爲drawPoly所用的座標
                        cc.p(rect.x, cc.rectGetMaxY(rect)),
                        cc.p(rect.x, rect.y),
                        cc.p(cc.rectGetMaxX(rect), rect.y),
                        cc.p(cc.rectGetMaxX(rect), cc.rectGetMaxY(rect))
        ];　　
        this.shape.drawPoly(rectArr, cc.c4f(0,0,0,0), 1, cc.c4f(0, 1, 0, 1));  //繪製圖形,點與點之間順序相連，第二個參數是填充，第三個是線粗細，第四個是邊框
}

　　

 

 

來張效果圖：