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));  //绘制图形,点与点之间顺序相连，第二个参数是填充，第三个是线粗细，第四个是边框
}

　　

来张效果图：