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

原创 2012年06月18日 12:09:01

上次介绍了用box2dweb创建各种刚体,这次来介绍如何用鼠标拖拽刚体,刚体之间的碰撞,以及刚体之间的各种连接。


HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体

http://blog.csdn.net/lufy_legend/article/details/7654607


一,鼠标拖拽刚体

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

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


二,碰撞检测

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

LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);
这时候的碰撞是所有刚体之间的碰撞,包括静止的和动态的

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

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

下面是运行结果



三,刚体之间的各种链接

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

1,距离链接(b2DistanceJointDef)

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

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

下面是运行结果



2,旋转链接(b2RevoluteJointDef)

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

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

下面是运行结果



3,滑轮链接(b2PulleyJointDef)

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

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);

这里是测试连接

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

下面是运行结果


其余的连接还有,b2GearJoint,b2PrismaticJoint,b2LineJoint,b2WeldJoint等多种链接,这些等以后封装到lufylegend.js后再详细介绍,这里不细说了,想了解的朋友可以查阅一下相关资料


最后给出这两次内容的所有源代码

http://fsanguo.comoj.com/download.php?i=box2d_sample01.rar

注意,上面只是源码,如果想要在本地运行这些源码的话,需要自己下载lufylegend.js库件以及box2dweb,然后进行配置


有了上面的介绍,应该可以做一个物理游戏了,相信大家都知道一款非常有名的游戏《愤怒的小鸟》,下次咱们来研究一下如何用html5来实现它

【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果

最近开始研究Box2dweb,Box2dweb是一款物理引擎,主要是对物理刚体和关节连接进行了封装,box2dweb很强大当然也有些复杂,不过幸好lufylegend.js做了这方面的封装,在制作时如...

HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体

本篇开始,会介绍lufylegend-1.4.0的新功能,怎样结合box2dweb创建一个物理世界以及这个物理世界里的各种刚体准备工作首先你需要下载html5开源库件lufylegend-1.4.0h...

使用Box2dWeb模拟飞行箭矢

[HTML5]使用Box2dWeb模拟飞行箭矢 标签: HTML5Box2d游戏 2013-03-18 09:14 3287人阅读 评论(0) 收藏 举报  分类:   ...
  • cdnight
  • cdnight
  • 2016年02月15日 16:57
  • 743

[HTML5]使用Box2dWeb模拟飞行箭矢

Box2d是一个2D游戏物理引擎,由Erin Catto开发,于2007年发布。很多2D游戏都用过Box2d,其中最有名的自然是愤怒的小鸟。Box2d本身是C++编写,但在不同平台都有它的衍生版本,像...

cocos2d-html5 碰撞检测的几种方法

游戏中的碰撞还是比较多的,比如角色与角色的碰撞,角色与墙壁的碰撞,角色与怪物的碰撞等,都需要 进行碰撞的检测,来触发一定的事件 最近在尝试制作一个小游戏的时候需要用到碰撞检测,然后就查了下资料,并...
  • lzan13
  • lzan13
  • 2014年06月12日 14:35
  • 13790

box2d 初识 强大的物理碰撞引擎 结合canvas

一个小的Demo http://jsfiddle.net/qAjPt/ Box2D是一个用于模拟2D刚体物体的C++引擎。作者为Erin Catto。Box2D使用zlib许可。z...

Box2d 物体互相碰撞的条件

Box2d 物体互相碰撞的条件 两个物体的刚体属性都不是感应器: fixture.isSensor=false 两个物体的category和mask都是相互对应的 两个物体都是一个groupIndex...
  • zszeng
  • zszeng
  • 2015年12月19日 15:48
  • 1162

用仿ActionScript的语法来编写html5——第一篇,显示一张图片

最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 ...

抽出1个小时制作一款简单的物理小游戏(绳子原理)

前天公司聚会,在一起玩游戏,游戏虽然及其简单,但是却很适合在活动中玩,因为公司参加聚会的人比较多,所以只有一部分人玩到了。晚上回家后我试着将其中一款游戏用html5还原了一下,第二天给大家玩儿,在公司...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接
举报原因:
原因补充:

(最多只允许输入30个字)