本篇开始,会介绍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>
<metacharset="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 Canvas开发物理引擎Box2dWeb
一个js版本的box2d引擎,包含重力系统和碰撞检测,可以去github上下载,放在此处只是为了方便,侵删~
这是关于box2dweb入门学习的一些资料,是我自己上网收集,然后做成pdf格式
重力框架Box2d的javascript版本2.1a.3。由box2dfalash改编成javascript 参考文档可以看:http://www.box2dflash.org/docs/2.1a/reference/和box2dflash的官方教程
box2d中文教程 cocos2d-x 中 学习物理引擎的好文档
Box2d Web - 教程 5:危险连接 - 第 2 部分 推介会 该项目展示了 Box2d Web 中可用的不同类型的链接(关节)。 它允许: 了解如何将对象链接在一起,对它们应用物理约束并创建机制, 完成一组使用这些链接的示例,...
box2dweb-exporter-physicseditor Box2DWeb的自定义导出器,可与CodeAndWeb的PhysicsEditor一起使用导出的脚本是ES6 / 2015模块 默认情况下,该脚本设置为导入ES2015模块box2dweb-haircut: Box2DWeb的CommonJS...
Box2d Web - 教程 5:危险连接 - 第 1 部分 推介会 这个项目是对 Box2d Web 中的链接(关节)的介绍。 它允许: 了解连接:了解它们的工作原理,了解如何创建和使用它们, 使用特殊的 MouseJoint 链接在 2D 环境中...
Silverlight5轻松开启绚丽的网页3D世界2-使用Toolkit开发3DWeb应用.pdf
游戏进行中 Box2d Web - 教程 1:一个大立方体,一个小立方体,... 推介会 ... 在 HTML 5 画布中创建“世界”或 2D 物理环境, 向其中添加静态和动态对象, 配置box2d的调试模式。 连接 查看 访问
Silverlight5轻松开启绚丽的网页3D世界2-使用Toolkit开发3DWeb应用.doc
游戏进行中Box2d Web - 教程 4:跳跃拼图推介会该项目提议使用在前三个项目中看到的所有概念,以创建一个小型游戏板混合平台和(一个点)反射。连接查看访问
游戏进行中 Box2d Web - 教程 3:跳跃! 推介会 该项目介绍了如何改进对角色的控制及其与 2D 环境的交互。 它涵盖以下几点: 对物体施加力/冲量, 管理环境中对象之间的碰撞, 将多个 Fixtures 应用到 Body, ...
使用Box2dWeb库模拟飞行箭矢 注: 1、仅在Chrome 25.0.1323.1下测试 2、因为懒得切换输入法,所以注释均为英文
box2dweb box2djs 双包 zip。
有趣的雨网页游戏实验。 Pixijs,box2dweb,boplex v2。
大盒子 Grand Box是Box2DWeb支持的平台程序,具有内置的关卡编辑器。 将来,人们将能够建立和共享关卡,供他人发现和玩耍。 野心是创造一个游戏,人们可以创建基于物理的关卡来与世界共享,或者只是在沙盒模式下玩转...
Box2D的简单应用,一个投篮小程序,适合作为教学实例。
-核心- D2D_Engine........D2D_引擎 D2D_Texture.......D2D_纹理 D2D_Sprite........D2D_精灵 D2D_Animation.....D2D_动画 D2D_Font..........D2D_文字 ...Box2DWeb..........一个Javascript实现的box2d物理引擎
box2Dweb 用于HTML5的Box2D的Javascript端口 支持Box2D 2.2中的绳索接头... Enjoy :)