我也是刚学习这两种引擎的JS写法,具体我先给大家说下Box2dLayer的结构把:
var Box2dLayer = cc.Layer.extend({ world: null,allowSleep: true,//允许睡眠 onEnter: function() { this._super(); },init: function() { },initBox2d: function(size) { this.scheduleUpdate(); },addBallInWorld: function(p) { },update: function(dt) { } });
关于里面的两个参数,world 就是我们将要建造的物理世界,allowSleep,你当允许暂停把;
下来我们先看initBox2d的实现:
initBox2d: function(size) { var b2Vec2 = Box2D.Common.Math.b2Vec2,b2BodyDef = Box2D.Dynamics.b2BodyDef,b2Body = Box2D.Dynamics.b2Body,b2FixtureDef = Box2D.Dynamics.b2FixtureDef,b2World = Box2D.Dynamics.b2World,b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,b2CircleShape = Box2D.Collision.Shapes.b2CircleShape; var g = new b2Vec2(0,-10); //重力系数 this.world = new b2World(g,this.allowSleep); this.world.SetContinuousPhysics(true); //允许物理现象 var fixDef = new b2FixtureDef(); fixDef.density = 1.0; //密度 fixDef.friction = 0.8; //摩擦 fixDef.restitution = 1; //弹性 var bodyDef = new b2BodyDef(); //创建刚体定义数据对象 bodyDef.type = b2Body.b2_staticBody; //为静态刚体,即不受碰撞影响 fixDef.shape = new b2PolygonShape(); //多边形 fixDef.shape.SetAsBox(20,2); //设置为矩形 bodyDef.position.Set(10,size.height / PTM_RATIO); this.world.CreateBody(bodyDef).CreateFixture(fixDef); //世界创建刚体,刚体创建设备,设备拥有形状 //bottom bodyDef.position.Set(10,-1.8); this.world.CreateBody(bodyDef).CreateFixture(fixDef); fixDef.shape.SetAsBox(2,14); // left bodyDef.position.Set(-1.8,13); this.world.CreateBody(bodyDef).CreateFixture(fixDef); // right bodyDef.position.Set(26.8,13); this.world.CreateBody(bodyDef).CreateFixture(fixDef); this.scheduleUpdate(); },一大堆的定义,其实也没啥就是定义了我们界面的4个边框可以碰撞,直接复制粘贴把;
addBallInWorld: function(p) { var sprite = this.getChildByTag(TAG_SPRITE_MANAGER); //根据标记得到小球 sprite.setPosition(p); var b2BodyDef = Box2D.Dynamics.b2BodyDef,b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape; var bodyDef = new b2BodyDef(); bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.Set(p.x / PTM_RATIO,p.y / PTM_RATIO); bodyDef.userData = sprite; var body = this.world.CreateBody(bodyDef); var dynamicBox = new b2PolygonShape(); dynamicBox.SetAsBox(0.5,0.5); var fixtureDef = new b2FixtureDef(); fixtureDef.shape = dynamicBox; fixtureDef.density = 1.0; fixtureDef.friction = 0.3; body.CreateFixture(fixtureDef); },然后是
update: function(dt) { var velocityIterations = 8; var positionIterations = 1; this.world.Step(dt,velocityIterations,positionIterations); for (var b = this.world.GetBodyList(); b; b = b.GetNext()) { if (b.GetUserData() != null) { var myActor = b.GetUserData(); myActor.x = b.GetPosition().x * PTM_RATIO; myActor.y = b.GetPosition().y * PTM_RATIO; myActor.rotation = -1 * cc.radiansToDegress(b.GetAngle()); } } }
好了,方法都架好了,然后让我们来实现:
onEnter: function() { this._super(); this.init(); },init: function() { var size = cc.director.getWinSize(); //添加背景 var bg = cc.LayerColor.create(cc.color(0,0)); bg.attr({ anchorX: 0,anchorY: 0,x: 0,y: 0 }); this.addChild(bg); this.initBox2d(size); //初始化物理世界 var ball = cc.Sprite.create(res.BoxPNG,cc.rect(0,PTM_RATIO,PTM_RATIO)); this.addChild(ball,TAG_SPRITE_MANAGER); //给小球标记TAG this.addBallInWorld(cc.p(size.width / 2,size.height / 2)); //将小球加入物理世界 },
希望想学习的人和我一样写一写。
http://pan.baidu.com/s/1ntVX6nZ 源码在这里。