有段时间没有写游戏代码了,这回来主要任务是要用jsb构建一个aprg动作游戏,看到3.0官方已经绑定好了armature的js函数,先来体验一把
3.0新建项目比2.2方便了很多,在终端运行tools下的create_project.py, 出现新建项目的图形界面! 赞
新建好一个js项目,像住场景添加一个龙骨动画:(记得在appdelegate.cpp中导入相关的绑定头文件,然后register...)
1
2
3
4
|
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可以监听动作事件,设置某个动作事件时触发回调动作,例如:
1
2
3
4
5
|
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也可以监听帧事件,设置某个帧事件时候触发回调动作,例如:
1
2
3
4
5
|
armature.getAnimation().setFrameEventCallFunc( this .onFrameEvent, this );
onFrameEvent: function
(bone, evt, originFrameIndex, currentFrameIndex) {
} |
添加骨骼,这里我们可以添加一个骨骼,设置它的表现(比如粒子光效),然后把它绑定在某个已有的骨骼上,这样光效就会跟随骨骼移动了
1
2
3
4
5
6
7
8
|
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骨骼运动;
|
修改骨骼的表现,实现换装效果
1
2
3
4
5
6
|
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的碰撞边缘:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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)); //绘制图形,点与点之间顺序相连,第二个参数是填充,第三个是线粗细,第四个是边框
} |