最近开始研究Box2dweb,Box2dweb是一款物理引擎,主要是对物理刚体和关节连接进行了封装,box2dweb很强大当然也有些复杂,不过幸好lufylegend.js做了这方面的封装,在制作时如果用lufylegend配合Box2dweb,那就简单多了。要学习box2dWeb我还是给大家推荐拉登大叔的博客,地址:http://www.ladeng6666.com/blog,写得相当好,话说他的文章中还运用了相当多的修辞手法呢,看他的文章边学技术,边学写作,哈哈。顺便也提一提,本次实现的效果也是模仿拉登大叔一篇文章中的效果,不过大叔的是ActionScript版本的,我是Js版的。
最后还是祝大家新年快乐吧~虽然这祝福来晚了,不过还是满含我的诚意……
好了,费话不多说,直接进入正题。
首先看截图吧,如下:
测试链接:http://yuehaowang.github.io/demo/box2d_linkage/
接下来就来讲一讲实现步骤。
一,准备工作
首先你需要下载lufylegend和box2dweb 这两个引擎。
box2dweb可以到这里下载:
http://code.google.com/p/box2dweb/downloads/list
lufylegend可以到这里:
http://lufylegend.com/lufylegend
关于lufylegend怎么用,可以到这里看看API文档:
http://lufylegend.com/lufylegend/api
Box2dWeb怎么用?其实我也不太清楚,这次主要用lufylegend封装的API,用到原生API的时候我自己来讲讲吧,讲的差不要骂喔~
二,原理
这个小demo的原来其实很简单,就是将几块矩形小刚体用旋转关节连接起来。当然,说起来很容易,其实做起来还是要深究的。在我看到拉登大叔的文章之前,其实我也没有想到什么方法,于是就借鉴了大叔的文章,原理不是我独创的,所以呢,不好直说,免得大叔看到了不高兴,大家看一看拉登大叔的文章就能明白原理了。
文章地址如下:http://www.ladeng6666.com/blog/2012/11/25/create-box2d-linkage-or-bridge-effect-using-b2joint/
三,含详细注释的源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box2d demo</title>
<script type="text/javascript" src="./Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript" src="./lufylegend-1.8.7.min.js"></script>
<script type="text/javascript">
init(50,"mylegend",600,400,pageInit);
function pageInit(){
LStage.setDebug(true);
LStage.box2d = new LBox2d();
if(LStage.canTouch == true){
document.body.style.margin = "0px 0px";
LStage.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
}
var mainObj = new Main();
addChild(mainObj);
}
/**
*Main
*@author: Yorhom
*@http://blog.csdn.net/yorhomwang
*/
function Main(){
var s = this;
base(s,LSprite,[]);
/**加入围墙*/
s.addWall();
/**加入锁链桥*/
s.addBridge();
/**随机加入其他物体*/
s.addRandomObj();
}
Main.prototype.addWall = function(){
var s = this;
//设置围墙大小
var wallSize = 10;
//设置围墙数据
var wallList = [
//左边
[wallSize*0.5, LStage.height*0.5, wallSize, LStage.height],
//右边
[LStage.width-wallSize*0.5, LStage.height*0.5, wallSize, LStage.height],
//上面
[LStage.width*0.5, wallSize*0.5, LStage.width, wallSize],
//下面
[LStage.width*0.5, LStage.height-wallSize*0.5, LStage.width, wallSize],
];
//通过遍历围墙数据,添加四面围墙
for(var key in wallList){
//获取数据
var item = wallList[key];
//创建围墙对象
var wallLayer = new LSprite();
//设定对象位置
wallLayer.x = item[0];
wallLayer.y = item[1];
//加入刚体
wallLayer.addBodyPolygon(item[2],item[3],0);
//加入显示列表
s.addChild(wallLayer);
}
};
Main.prototype.addBridge = function(){
var s = this;
//关节向量
var vec = new LStage.box2d.b2Vec2();
//添加对象数量
var amount = 6;
//设置对象宽度和高度
var bw=50,bh=15;
//获取锁链桥总长度
var bridgeWidth = bw*amount;
//设置锁链桥开始位置
var initX=(LStage.width-bridgeWidth)*0.5,
initY=(LStage.height-bh)*0.5+30;
//设置用于固定锁链桥的定点半径
var anchorR = 15;
/**用于固定锁链桥的定点A*/
var anchorA = new LSprite();
anchorA.x = initX-anchorR;
anchorA.y = initY-anchorR;
anchorA.addBodyCircle(anchorR,anchorR,anchorR,0);
s.addChild(anchorA);
/**用于固定锁链桥的定点B*/
var anchorB = new LSprite();
anchorB.x = bridgeWidth+initX-anchorR;
anchorB.y = initY-anchorR;
anchorB.addBodyCircle(anchorR,anchorR,anchorR,0);
s.addChild(anchorB);
//上一个对象
var previousBlock = anchorA;
/**循环添加刚体*/
for(var i=0; i<amount; i++){
//实例化对象
var block = new LSprite();
//设定对象位置
block.x = initX+i*bw+bw*0.5;
block.y = initY;
//加入刚体
block.addBodyPolygon(bw,bh,1);
//设置鼠标拖动
block.setBodyMouseJoint(true);
//加入显示列表
s.addChild(block);
//加入关节
var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();
vec.Set((initX+i*bw)/30, initY/30);
revoluteJoint.Initialize(previousBlock.box2dBody,block.box2dBody,vec);
LStage.box2d.world.CreateJoint(revoluteJoint);
//更改上一个对象
previousBlock = block;
}
//将最后一个刚体固定
var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();
vec.Set((initX+i*bw)/30, initY/30);
revoluteJoint.Initialize(previousBlock.box2dBody,anchorB.box2dBody,vec);
LStage.box2d.world.CreateJoint(revoluteJoint);
};
Main.prototype.addRandomObj = function(){
var s = this;
for(var i=0; i<10; i++){
//创建对象
var obj = new LSprite();
//设置对象位置
obj.x = Math.floor(Math.random()*(400-200+1)+200);
obj.y = 0;
//加入显示列表
s.addChild(obj);
//根据随机数添加不同的刚体
if(Math.random() > 0.5){
//获取随机宽度和高度
var w = Math.floor(Math.random()*10)+25;
var h = Math.floor(Math.random()*10)+25;
//重现设置y坐标
obj.y += h*0.5;
//添加矩形刚体
obj.addBodyPolygon(w,h,1);
}else{
//获取随机半径
var r = Math.floor(Math.random()*20)+5;
//重现设置y坐标
obj.y += r;
//添加圆形刚体
obj.addBodyCircle(r,r,r,1);
}
//设置鼠标拖动
obj.setBodyMouseJoint(true);
}
};
</script>
</head>
<body>
<div id="mylegend"></div>
</body>
</html>
所有代码都在这里了,还是很少的,对吧。看了拉登大叔的原理讲解,再来看我写的js代码就非常容易了。主要是注意以下几个地方。
1,添加刚体
在box2dweb中添加刚体超级麻烦,把整个创建过程告诉大家估计大家都会觉得不耐烦,所以,我用到了lufylegend.js添加刚体,这样一来添加刚体就被简化成一步了。非常方便,不是吗?在lufylegend中添加刚体一共有这几个函数:
addBodyCircle() | 添加原形刚体 |
addBodyPolygon() | 添加矩形刚体 |
addBodyVertices() | 添加不规则图形刚体 |
具体的参数说明和使用举例可以参见lufylegend的API文档中LSprite的API。文档地址已在文章的准备工作一栏写出。
2,添加关节
在lufylegend虽然也有添加关节的封装,但是不能设置关节点。所以我还是用了box2dweb原生方法。添加关节的代码如下:
var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();
vec.Set((initX+i*bw)/30, initY/30);
revoluteJoint.Initialize(previousBlock.box2dBody,block.box2dBody,vec);
LStage.box2d.world.CreateJoint(revoluteJoint);
其他的好理解,主要是vec这个变量,它在这里是一个向量对象,实例化代码如下:
var vec = new LStage.box2d.b2Vec2();
其实这个b2Vec2这个类可以传参数,和它的成员函数Set的参数是一样的。但是这里又多个关节,所以就没有直接设置,而是在后面用Set方法设置。这个向量可以看成一个json吧,传的参数就是设定关节的位置(x,y)。
在创建了关节之后,千万别忘记下面的代码:
LStage.box2d.world.CreateJoint(revoluteJoint);
另外,Initialize方法传的参数是box2dweb的刚体对象,在LSprite中的 box2dBody就可以获取该LSprite添加的刚体。
3,固定动态刚体
在box2dweb中,刚体分动态和静态。静态刚体比较老实,就呆在原地不动;动态刚体很活泼,不停地在做运动。
拉登大叔其实也写过相关的文章,但是我没怎么看,于是就自己想了一个方法:首先在锁链的两端建立两个圆形静态刚体,然后把锁链两端的两块矩形刚体分别连在附近的圆形静态刚体上,圆形静态刚体就会帮忙把锁链拽着,不让它乱跑。但由于锁链中每个矩形刚体是动态的,所以他们还是可以互相牵扯的。
4,如果你自己在用lufylegend+box2dweb编写时看不到图象,该怎么办?
首先你要检测一下是否在最底层上加了一个LSprite,并且用这个LSprite的graphics画了一个不透明的背景。如果是的话,你可以把这个LSprite去掉,然后再看看有没有。如果还没有,可能有以下几种原因:(1)没有在用之前加入LStage.setDebug(true); (2)没有在使用box2dweb之前加入LStage.box2d = new LBox2d();
源代码在上面已经全部给出了,运行时需要配置一下引擎box2dweb和lufylegend,然后把引擎的压缩版本(文件名含.min)放在与html同级的文件目录下即可运行,测试愉快~
好了,今天就先讲到这里。如果大家有不懂的地方可以用微博@Yorhom或者用邮箱联系我wangyuehao1999(at)gmail.com(这年头写e-mail地址再不把@换成(at)垃圾邮件多得甚至会把你用的邮件程序弄得黑白不分呢)。希望大家多支持。下次还会继续给大家带来更多有趣的小玩意。敬请期待~
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自Yorhom's Game Box
http://blog.csdn.net/yorhomwang
欢迎继续关注我的博客