用box2d制作完美绳子
前一段时间发现一个有意思的游戏叫 cut the rope ,凭借其简易的交互和巧妙的构思着实让我着迷了一把, 如果以一个游戏人的角度来分析这款游戏,最amazing的还是其流畅的物理场景,这类游戏往 往让玩家感受更多的真实性和趣味性. cut the rope是用cocos2d实现的,这里我用box2d来实现它的核心元素(rope),先看看demo:
(看不到请reload frame)
demo只是简单的实现了绳子,如果想看完整版的割绳子实现近期我会把实现的完整版放上来(完整版:http://mgp.qq.com/flash/76169/)
今天的主题是"make a perfect rope with box2d",so 如果大家感兴趣就跟着我这个 tutorial走吧.:)
box2d基础
为了不混淆你的代码,box2d的所有类型都以b2开头,整个box2d物理系统由b2world驱动,通过 b2Wrold的step方法来模拟时间经过.box2d的单位系统完全遵照现实世界,用米,秒,牛等单位, 所以使用代码时务必转换(有人因此吐槽box2d,为什么还要开发人员来转,原因是box2d根本 不需要关心你如何处理pixel,你如何显示资源,它就像我们无法触摸但真是存在的物理世界,= =).b2body则是物理系统中的物件,游戏中就是靠它们来模拟现实中的物理模型,结 合 b2Joint关节来连接 b2Body.
具体实现
好了,看了上面的介绍你应该对box有一些了解,现在上代码了,关键部分都有注释.
//为了效率能高点推荐使用requestAnimationFrame window.requestAnimFrame = (function(){ //requestAnimFrame fallback return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); } })(); (function(){ //命名空间的导入 var b2Vec2 = Box2D.Common.Math.b2Vec2 , b2BodyDef = Box2D.Dynamics.b2BodyDef , b2Body = Box2D.Dynamics.b2Body , b2FixtureDef = Box2D.Dynamics.b2FixtureDef , b2Fixture = Box2D.Dynamics.b2Fixture , b2World = Box2D.Dynamics.b2World , b2MassData = Box2D.Collision.Shapes.b2MassData , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape , b2DebugDraw = Box2D.Dynamics.b2DebugDraw ; //这里先创建一个box2d包装器,可以更方便的创建物体啥的而无须关心太多不必要的东西 window.b2dWrapper=function(stage,scale){ var gravity = new b2Vec2(0,10); var doSleep = true; this.world = new b2World( gravity, doSleep); this.debug=false; this.scale=scale; //setup debug draw var debugDraw = new b2DebugDraw(); debugDraw.SetSprite(stage); debugDraw.SetDrawScale(scale); debugDraw.SetFillAlpha(0.3); debugDraw.SetLineThickness(1.0); debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit); this.world.SetDebugDraw(debugDraw); var updateListeners=[]; this.addUpdateListener=function(l){ updateListeners.push(l); } //shape工厂 this.makeShape=function(param){ //定义常用的参数,创建body时就不必传递太多不必要的参数 var defaults = { x: 3, y: 3, width: 3, height: 3, type:'box', scale: 0, linearDamping: 0, angularDamping: 0, fixedRotation: false, allowSleep: true, isSleeping: false, isSensor: false, isBullet: false, isDynamic: true, skin: null, //... scaleSkin: true, density: 1.0, friction: 0.5, restitution: 0.2, angle: 0.0, categoryBits:0x0001, maskBits:0xFFFF, groupIndex:0 }; var p=Object.extend(defaults,param); if (p.width) p.width /= 2; if (p.height) p.height /= 2; var bodyDef = new b2BodyDef(); var fixtureDef = new b2FixtureDef(); var shape=null; var body; if (p.scale == 0) p.scale = this.scale; bodyDef.position.x = p.x / p.scale; bodyDef.position.y = p.y / p.scale; bodyDef.angle = p.angle; bodyDef.linearDamping = p.linearDamping; bodyDef.angularDamping = p.angularDamping; bodyDef.fixedRotation = p.fixedRotation; bodyDef.allowSleep = p.allowSleep; bodyDef.linearDamping = p.linearDamping; bodyDef.angularDamping = p.angularDamping; bodyDef.awake = !p.isSleeping; bodyDef.bullet = p.isBullet; bodyDef.type = p.isDynamic ? b2Body.b2_dynamicBody : b2Body.b2_staticBody; //filter data fixtureDef.filter.groupIndex = p.groupIndex; fixtureDef.filter.maskBits = p.maskBits; fixtureDef.filter.categoryBits = p.categoryBits; fixtureDef.friction = p.friction; fixtureDef.density = p.density; fixtureDef.restitution = p.restitution; fixtureDef.isSensor = p.isSensor; if (p.type == 'circle')//only support two type now { shape = new b2CircleShape(p.width / p.scale); p.height = p.width; //workaround.... } else { shape = new b2PolygonShape(); if (p.type == 'box') { shape.SetAsBox(p.width / p.scale, p.height / p.scale); } else if (type == 'SHAPE_POLYGON') { throw new Error("to be implemented."); } } fixtureDef.shape = shape; if (p.parent) { body = p.parent; shape.SetLocalPosition(bodyDef.position); //根据父对象设置相对位置 } else { body = this.world.CreateBody(bodyDef); } //body.SetUserData(ud);//notice here body.CreateFixture(fixtureDef); return body; } var This=this; var update=function(){ This.world.Step(1/60,10,10); if(This.debug) This.world.DrawDebugData(); This.world.ClearForces(); if(updateListeners.length>0){ updateListeners.forEach(function(itm){if(itm)itm();}); } requestAnimFrame(update); } this.start=function(){ update(); } } })(); //现在基本框架已经出来了,现在开始造绳子了! b2dWrapper.prototype.createRope=function(bodyA,bodyB,params){ //package import var b2DistanceJointDef= Box2D.Dynamics.Joints.b2DistanceJointDef, b2Vec2 = Box2D.Common.Math.b2Vec2, b2Joint= Box2D.Dynamics.Joints.b2Joint, b2RevoluteJointDef= Box2D.Dynamics.Joints.b2RevoluteJointDef, b2RevoluteJoint= Box2D.Dynamics.Joints.b2RevoluteJoint; var This=this; //创建旋转关节 function revoluteJoint(bodyA,bodyB,anchorA,anchorB){ var revoluteJointDef = new b2RevoluteJointDef(); revoluteJointDef.localAnchorA.Set(anchorA.x,anchorA.y); revoluteJointDef.localAnchorB.Set(anchorB.x,anchorB.y); revoluteJointDef.bodyA=bodyA; revoluteJointDef.bodyB = bodyB; revoluteJointDef.collideConnected = true; revoluteJointDef.userData = 'chainParts'; //revoluteJointDef.enableLimit = true; //revoluteJointDef.referenceAngle = -30 * Math.PI / 180; return This.world.CreateJoint(revoluteJointDef); } //连接两个物体 function connectChain(bodyA,bodyB,chainLen/*CHAIN_LEN*/,isHead) { if(!chainLen) chainLen=5; return revoluteJoint(bodyA, bodyB, new b2Vec2( isHead?0:chainLen / 2 , 0 ), new b2Vec2( -chainLen / 2 , 0)); } var startP=bodyA.GetPosition().Copy(),endP=bodyB.GetPosition().Copy(); var detY=endP.y-startP.y,detX=endP.x-startP.x; var angle_rad=Math.atan2(detY,detX);//获取头尾两点的角度 var len=Math.sqrt(detX*detX*900+detY*detY*900);//总长 var subLen=len/10;//每个节点长 var offset=new b2Vec2(Math.cos(angle_rad)*subLen,Math.sin(angle_rad)*subLen);//获取每个 绳子节点相对于前一节点的偏移 for(var i=0;i<10;i++){ var box=this.makeShape(//创建绳子节点 { type:'box', isDynamic:true, width:subLen, height:2, angle:angle_rad, isSensor:true, x:bodyA.GetPosition().x*30+offset.x, y:bodyA.GetPosition().y*30+offset.y } ); var j=connectChain(bodyA,box,subLen/30,i==0); bodyA=box; } connectChain(bodyA,bodyB,subLen/30); }
后记
没用多少时间的实现了这个小demo,我想说的是互联网越来越开放,技术交流也应该如此, 人生苦短,拥抱开源 :>