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

原创 2012年06月13日 00:30:57

本篇开始,会介绍lufylegend-1.4.0的新功能,怎样结合box2dweb创建一个物理世界以及这个物理世界里的各种刚体


准备工作

首先你需要下载html5开源库件lufylegend-1.4.0

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

box2dweb你可以到这里下载

http://code.google.com/p/box2dweb/downloads/list


准备三张图片,


分别用来创建圆形,矩形和三角刚体。


准备结束,现在开始制作。
下面是利用lufylegend.js中的LLoadManage类来读取图片

init(10,"mylegend",800,400,main);
var backLayer,cLayer,wallLayer,bitmap,loadingLayer;
var imglist = {};
var imgData = new Array(
		{name:"bird1",path:"./images/bird1.png"},
		{name:"bird2",path:"./images/bird2.png"},
		{name:"stage01",path:"./images/stage01.png"}
		);
function main(){	
	LGlobal.setDebug(true);	
	backLayer = new LSprite();	
	addChild(backLayer);	
	
	
	loadingLayer = new LoadingSample3();
	backLayer.addChild(loadingLayer);	
	LLoadManage.load(
		imgData,
		function(progress){
			loadingLayer.setProgress(progress);
		},
		function(result){
			imglist = result;
			backLayer.removeChild(loadingLayer);
			loadingLayer = null;
			gameInit();
		}
	);
}

LGlobal.setDebug(true);是开启debug模式,这样在创建刚体的时候,会将box2dweb所创建的debug刚体也一起显示出来,发布成品的时候,应该关闭debug模式。

LLoadManage类有三个参数,$list,$onupdate,$oncomplete,

$list是要读取的图片数组,$onupdate是读取中需要调用的函数,$oncomplete是读取完成时调用的函数

LoadingSample3类是lufylegend.js库件中的进度条显示功能,除了LoadingSample3类之外,还有LoadingSample1类和LoadingSample2类

在创建刚体之前,先创建上下左右四堵墙,来控制之后将要创建的刚体的移动范围。

wallLayer = new LSprite();
	wallLayer.x = 400;
	wallLayer.y = 0;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(800,10,0);
	wallLayer = new LSprite();
	wallLayer.x = 0;
	wallLayer.y = 200;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(10,400,0);
	wallLayer = new LSprite();
	wallLayer.x = 400;
	wallLayer.y = 400;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(800,10,0);
	wallLayer = new LSprite();
	wallLayer.x = 800;
	wallLayer.y = 200;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(10,400,0);
不知道LSprite的用法的童鞋请翻看一下我之前的文章,这里不罗嗦了。

addBodyPolygon(w,h,type,density,friction,restitution)是给LSprite加上一个矩形body,参数分别是,(宽,高,静态或动态,密度,摩擦,弹力)

如果第3个参数设定body为静态,则后面的参数可以省略,这里是将四堵墙设为静态。

然后,给backLayer加上鼠标点击事件,准备在鼠标点击的时候,加入一个刚体

backLayer.addEventListener(LMouseEvent.MOUSE_UP,add);

在add方法中添加刚体,先来个最简单的,加入一个圆形刚体,加入圆形刚体代码如下

	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);
addBodyCircle(radius,cx,cy,type,density,friction,restitution)是给LSprite加上一个圆形body,参数分别是,(半径,圆心坐标x,y,静态或动态,密度,摩擦,弹力)

好了,运行代码后,不断点击鼠标得到下面结果


测试URL

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


接下来,修改add方法,除了加入圆形刚体的同时,有一定几率加入矩形刚体,如下

	var rand = Math.random();
	if(rand < 0.5){
		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);
	}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);
	}

addBodyPolygon方法上面已经介绍过了,是给LSprite加入矩形刚体。

运行代码后,不断点击鼠标得到下面结果

测试URL

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



最后,是加入三角刚体,起始可以是任意多边形刚体,用到的是LSprite的addBodyVertices方法,

addBodyVertices(vertices,cx,cy,type,density,friction,restitution)是根据顶点数组来添加任意多边形刚体,参数分别为(顶点数组,中心坐标,静态或动态,密度,摩擦,弹力)

需要提的是这个方法有个小bug,就是令LSprite的坐标变为(0,0),所以需要用SetPosition方法重新给LSprite设定一下坐标,这个bug在lufylegend.js下次更新的时候会解决,本次添加三角刚体代码如下

		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));
运行代码后,不断点击鼠标得到下面结果

测试URL

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


本篇结束,奉上最终代码,请期待下一篇教程

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="../../Box2dWeb-2.1.a.3.min.js"></script> 
<script type="text/javascript" src="../../lufylegend-1.4.0.js"></script> 
</head>
<body>
<div id="mylegend">loading……</div>
<script type="text/javascript">
init(10,"mylegend",800,400,main);
var backLayer,cLayer,wallLayer,bitmap,loadingLayer;
var imglist = {};
var imgData = new Array(
		{name:"bird1",path:"./images/bird1.png"},
		{name:"bird2",path:"./images/bird2.png"},
		{name:"stage01",path:"./images/stage01.png"}
		);
function main(){	
	LGlobal.setDebug(true);	
	backLayer = new LSprite();	
	addChild(backLayer);	
	
	
	loadingLayer = new LoadingSample3();
	backLayer.addChild(loadingLayer);	
	LLoadManage.load(
		imgData,
		function(progress){
			loadingLayer.setProgress(progress);
		},
		function(result){
			imglist = result;
			backLayer.removeChild(loadingLayer);
			loadingLayer = null;
			gameInit();
		}
	);
}
function gameInit(event){
	LGlobal.box2d = new LBox2d();
	
	
	wallLayer = new LSprite();
	wallLayer.graphics.drawRect(10,"#000000",[0, 0, 800, 400],true,"#cccc80");
	wallLayer.alpha = 0.3;
	backLayer.addChild(wallLayer);
	
	wallLayer = new LSprite();
	wallLayer.x = 400;
	wallLayer.y = 0;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(800,10,0);
	wallLayer = new LSprite();
	wallLayer.x = 0;
	wallLayer.y = 200;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(10,400,0);
	wallLayer = new LSprite();
	wallLayer.x = 400;
	wallLayer.y = 400;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(800,10,0);
	wallLayer = new LSprite();
	wallLayer.x = 800;
	wallLayer.y = 200;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(10,400,0);
	
	
	backLayer.addEventListener(LMouseEvent.MOUSE_UP,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);
	}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));
	}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);
	}
}
</script> 
</body>
</html>


相关文章推荐

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

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

使用Box2dWeb模拟飞行箭矢

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

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

上次介绍了用box2dweb创建各种刚体,这次来介绍如何用鼠标拖拽刚体,刚体之间的碰撞,以及刚体之间的各种连接。HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体http://blog...

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

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

Box2DJS入门教程

本文的主要目的是给大家介绍如何使用Box2DJS库在浏览器中创建一个物理世界,本文为基本入门教程,如果你想更深入的了解Box2D的功能,请看本文结尾“相关资源”中的“Box2D v2.0.1 用户手册...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Box2d的javascript版本Box2dWeb-2.1a.3学习笔记(一)

Box2d是一个物理引擎框架可以制作2D动画模拟真实物理环境,可以在HTML5的canvas中实现动画效果(但更好的完成这点需要借助别的技术,后面会说到,但其内置的debugDraw可以生成简单的视图...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

一篇文章带你了解Flannel

【编者的话】Flannel是 CoreOS 团队针对 Kubernetes 设计的一个覆盖网络(Overlay Network)工具,其目的在于帮助每一个使用 Kuberentes 的 CoreOS ...

GNU开发笔记--开发环境基础(持续更新)

GCC(GNU C Compiler)是GNU项目中符合 符合ANSI C 标准的编译系统,能够编译调用 C 、C++、object C等语言编写的程序,同时gcc 也是一个交叉编译器,特别适用于不同...
  • syt8945
  • syt8945
  • 2016年03月22日 21:33
  • 318
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体
举报原因:
原因补充:

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