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

2012-06-20

HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体本篇开始，会介绍lufylegend-1.4.0的新功能，怎样结合bo

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

本篇开始，会介绍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

准备三张图片，

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

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

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

<br /></p><p>测试URL</p><p>http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index.html<br /></p><p><br /></p>接下来，修改add方法，除了加入圆形刚体的同时，有一定几率加入矩形刚体，如下<p></p><textarea readonly name="code" alt="HTML5游戏开发-Box2dWeb施用(一)-创建各种各样的刚体" width="610" height="310" /></p><p>测试URL</p><p>http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index2.html</p><p><br /><br />最后，是加入三角刚体，起始可以是任意多边形刚体，用到的是LSprite的addBodyVertices方法，</p><p>addBodyVertices(vertices,cx,cy,type,density,friction,restitution)是根据顶点数组来添加任意多边形刚体，参数分别为（顶点数组，中心坐标，静态或动态，密度，摩擦，弹力）<br /></p><p>需要提的是这个方法有个小bug，就是令LSprite的坐标变为（0,0），所以需要用SetPosition方法重新给LSprite设定一下坐标，这个bug在lufylegend.js下次更新的时候会解决，本次添加三角刚体代码如下</p><p></p><textarea readonly name="code" alt="HTML5游戏开发-Box2dWeb施用(一)-创建各种各样的刚体" width="612" height="314" /><br /><p></p><p>测试URL</p><p>http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index3.html<br /></p><p><br /></p><p>本篇结束，奉上最终代码，请期待下一篇教程</p><p></p><textarea readonly name="code" class="javascript"><!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>

2楼wulong7104小时前: 标记一下，虽然从来都很少回来看。

1楼alwaysonline_txm3天前 15:52

封装了之后果然简单好多。。比我之前自己写box2d代码方便多了。。就是连接器的功能少了点。。

Re: lufy_Legend前天 08:20: 回复alwaysonline_txmn兄弟说的不错，现在只是进行了非常简陋的封装，更多功能以后还会陆续添加，不过在此之前，得自己手动实现了@_@!!!

热点排行

Web前端

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