HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

时间：2014-05-07 08:57 来源：互联网作者：源码搜藏收藏

一，鼠标拖拽刚体使用lufylegend.js库件后，拖拽刚体变得很简单，只需调用LSprite的setBodyMouseJoint(true);方法即可，修改上一节中的add方法如下 [javascript] view plaincopy function add(){ var rand=Math.random(); if (rand0.33){ cLayer= new LSpri

一，鼠标拖拽刚体

使用lufylegend.js库件后，拖拽刚体变得很简单，只需调用LSprite的setBodyMouseJoint(true);方法即可，修改上一节中的add方法如下

[javascript] view plaincopy
			
			function add(){  

			    var rand = Math.random();  

			    if(rand < 0.33){  

			        cLayer = new LSprite();  

			        cLayer.x = 50 + Math.random()*700;  

			        cLayer.y = 50;  

			        backLayer.addChild(cLayer);  

			        bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  

			        cLayer.addChild(bitmap);  

			        cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  

			        cLayer.setBodyMouseJoint(true);  

			    }else if(rand < 0.66){  

			        cLayer = new LSprite();  

			        backLayer.addChild(cLayer);  

			        bitmap = new LBitmap(new LBitmapData(imglist["bird2"]));  

			        cLayer.addChild(bitmap);  

			        var shapeArray = [  

			            [[0,54],[27,0],[54,54]]  

			        ];  

			        cLayer.addBodyVertices(shapeArray,27,27,1,.5,.4,.5);  

			        cLayer.box2dBody.SetPosition(new LGlobal.box2d.b2Vec2((50 + Math.random()*700)/LGlobal.box2d.drawScale,50/LGlobal.box2d.drawScale));  

			        cLayer.setBodyMouseJoint(true);  

			    }else{  

			        cLayer = new LSprite();  

			        cLayer.x = 50 + Math.random()*700;  

			        cLayer.y = 50;  

			        backLayer.addChild(cLayer);  

			        bitmap = new LBitmap(new LBitmapData(imglist["stage01"]));  

			        cLayer.addChild(bitmap);  

			        cLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,5,.4,.2);  

			    }  

			}

可以看到，我只在加入小鸟的时候，加入了鼠标拖拽，下面是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index4.html

二，碰撞检测

使用如下代码来加入碰撞检测事件

[javascript] view plaincopy
			
			LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);

这时候的碰撞是所有刚体之间的碰撞，包括静止的和动态的

为了方便，我这里使用lufylegend.js中的debug方法来验证

[javascript] view plaincopy
			
			function beginContact(contact){  

			    if(contact.GetFixtureA().GetBody().GetUserData().name == "bird" &&   

			            contact.GetFixtureB().GetBody().GetUserData().name == "bird"){  

			        trace("bird and bird");  

			    }  

			    trace("bird and other");  

			};

以上方法就是碰撞的检测，意思是当两只小鸟之间发生碰撞的时候，输出"bird and bird"，小鸟和其他刚体，或者其他刚体之间发生碰撞的时候输出"bird and other"

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index5.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

三，刚体之间的各种链接

最后，我们来看看刚体之间的各种连接，这部分目前没有封装在lufylegend.js里，以后会陆续封装进去，不过现在我们先来看看如何手动实现这些连接

1,距离链接(b2DistanceJointDef)

b2DistanceJointDef可以用来约束两个body之间的距离,用法如下

[javascript] view plaincopy
			
			function add(){  

			    cLayer = new LSprite();  

			    cLayer.name = "bird";  

			    cLayer.x = 50 + Math.random()*700;  

			    cLayer.y = 50;  

			    backLayer.addChild(cLayer);  

			    bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  

			    cLayer.addChild(bitmap);  

			    cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  

			    cLayer.setBodyMouseJoint(true);  

			    return cLayer;  

			}  

			var bird1 = add();  

			var bird2 = add();  

			var distanceJointDef = new LGlobal.box2d.b2DistanceJointDef();  

			distanceJointDef.Initialize(bird1.box2dBody, bird2.box2dBody, bird1.box2dBody.GetWorldCenter(), bird2.box2dBody.GetWorldCenter());  

			LGlobal.box2d.world.CreateJoint(distanceJointDef);

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index6.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

2,旋转链接(b2RevoluteJointDef)

b2RevoluteJointDef可以给两个body设置一个轴心，让两个body绕这个轴心旋转,用法如下

[javascript] view plaincopy
			
			var bird = new LSprite();  

			    bird.name = "bird";  

			    bird.x = 200;  

			    bird.y = 200;  

			    backLayer.addChild(bird);  

			    bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  

			    bird.addChild(bitmap);  

			    bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,0);  

			    var pig = new LSprite();  

			    pig.name = "pig";  

			    pig.x = 200;  

			    pig.y = 150;  

			    backLayer.addChild(pig);  

			    bitmap = new LBitmap(new LBitmapData(imglist["pig2"]));  

			    pig.addChild(bitmap);  

			    pig.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  

			    var revoluteJointDef  = new LGlobal.box2d.b2RevoluteJointDef();  

			    revoluteJointDef .Initialize(pig.box2dBody, bird.box2dBody, bird.box2dBody.GetWorldCenter());  

			    LGlobal.box2d.world.CreateJoint(revoluteJointDef );

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index7.html

下面是运行结果

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

3,滑轮链接(b2PulleyJointDef)

b2PulleyJointDef类似滑轮效果,用法如下

[javascript] view plaincopy
			
			var bird = new LSprite();  

			    bird.name = "bird";  

			    bird.x = 200;  

			    bird.y = 200;  

			    backLayer.addChild(bird);  

			    bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  

			    bird.addChild(bitmap);  

			    bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  

			    bird.setBodyMouseJoint(true);  

			    var bird01 = new LSprite();  

			    bird01.name = "bird";  

			    bird01.x = 400;  

			    bird01.y = 150;  

			    backLayer.addChild(bird01);  

			    bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  

			    bird01.addChild(bitmap);  

			    bird01.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  

			    bird01.setBodyMouseJoint(true);  

			    var anchor1 = bird.box2dBody.GetWorldCenter();    

			    var anchor2 = bird01.box2dBody.GetWorldCenter();    

			    var groundAnchor1 = new LGlobal.box2d.b2Vec2(anchor1.x, anchor1.y - (100 / LGlobal.box2d.drawScale));  

			    var groundAnchor2 = new LGlobal.box2d.b2Vec2(anchor2.x, anchor2.y - (100 / LGlobal.box2d.drawScale));  

			    var ratio = 1.0;    

			    var pulleyJointDef = new LGlobal.box2d.b2PulleyJointDef();    

			    pulleyJointDef.Initialize(bird.box2dBody, bird01.box2dBody, groundAnchor1, groundAnchor2, anchor1, anchor2, ratio);    

			    pulleyJointDef.maxLengthA = 300 / LGlobal.box2d.drawScale;    

			    pulleyJointDef.maxLengthB = 300 / LGlobal.box2d.drawScale;   

			    LGlobal.box2d.world.CreateJoint(pulleyJointDef);