box2dweb 学习笔记--sample讲解
前言:
之前博文"台球游戏的核心算法和AI(1)" 中, 提到过想用HTML5+Box2d来编写实现一个台球游戏. 以此来对比感慨一下游戏物理引擎的巨大威力.
做为H5+box2d的初学者, 将简单讲讲box2d的一些基础概念, 并对一个sample样例做下讲解. 权作学习笔记.
资料:
box2d源自flash版, 后迁移到各个语言版本, box2dweb是与最新flash版本同步的js 2D物理引擎库.
box2dweb版网址: http://code.google.com/p/box2dweb/.
box2d官网: http://box2d.org/.
基本概念:
世界: b2world
box2d物体依托的世界存在, 其需指定重力向量, 以及静止物体的休眠开关.
var world = new b2World(gravity, doSleep);
刚体: b2body
物理世界中的具体物体, 有动态/静态物体之分.
夹具: b2fixture
定义物体的形状,材质属性(密度, 摩擦系数,弹性系数)等等.
代码样例:
box2dweb库采用当前最新的Box2dWeb-2.1a.3. 该库只包含一个js文件, 并附带了样例.
文件组织结构如下所示:
我们以sample.html为例, 对box2dweb库做下简单的讲解.
展示的效果如下:
具体代码如下:
<html>
<head>
<title>Box2dWeb example</title>
</head>
<body onload="init();">
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript">
var world; function init() {
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2MassData = Box2D.Collision.Shapes.b2MassData
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
; world = new b2World(
new b2Vec2(0, 10) //gravity
, true //allow sleep
); var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2; var bodyDef = new b2BodyDef; //create ground
bodyDef.type = b2Body.b2_staticBody;
bodyDef.position.x = 9;
bodyDef.position.y = 13;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(10, 0.5);
world.CreateBody(bodyDef).CreateFixture(fixDef); //create some objects
bodyDef.type = b2Body.b2_dynamicBody;
for(var i = 0; i < 10; ++i) {
if(Math.random() > 0.5) {
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(
Math.random() + 0.1 //half width
, Math.random() + 0.1 //half height
);
} else {
fixDef.shape = new b2CircleShape(
Math.random() + 0.1 //radius
);
}
bodyDef.position.x = Math.random() * 10;
bodyDef.position.y = Math.random() * 10;
world.CreateBody(bodyDef).CreateFixture(fixDef);
} //setup debug draw
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw); window.setInterval(update, 1000 / 60);
}; function update() {
world.Step(
1 / 60 //frame-rate
, 10 //velocity iterations
, 10 //position iterations
);
world.DrawDebugData();
world.ClearForces();
}; </script> </html>
js应该没有类似java和c#的命令空间的概念, 为避免冲突, 往往通过添加前缀名来解决, 比如box2dweb的采用b2前缀. 另一方面, 其通过简写的技巧来缩短类和函数的引用.
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2MassData = Box2D.Collision.Shapes.b2MassData
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
;
注: 通过简写来缩短类名和函数对象的引用.
• 创建世界
world = new b2World(
new b2Vec2(0, 10) //gravity
, true //allow sleep
);
• 创建地面
var bodyDef = new b2BodyDef;
//create ground
bodyDef.type = b2Body.b2_staticBody;
bodyDef.position.x = 9;
bodyDef.position.y = 13;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(10, 0.5);
world.CreateBody(bodyDef).CreateFixture(fixDef);
注: b2Body.b2_staticBody标示该物体为静态物体(固定物), 一个物体由b2BodyDef和b2FixtureDef来确定.
• 创建刚体
//create some objects
bodyDef.type = b2Body.b2_dynamicBody;
for(var i = 0; i < 10; ++i) {
if(Math.random() > 0.5) {
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(
Math.random() + 0.1 //half width
, Math.random() + 0.1 //half height
);
} else {
fixDef.shape = new b2CircleShape(
Math.random() + 0.1 //radius
);
}
bodyDef.position.x = Math.random() * 10;
bodyDef.position.y = Math.random() * 10;
world.CreateBody(bodyDef).CreateFixture(fixDef);
}
注: 这边随机创建了10个圆形/矩形的物体
• box2dweb的调试器(可视化)
//setup debug draw
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
注: DrawScale为物理世界和像素的比例值, 以及Sprite的canvas的2d上下文.
• 事件驱动
注册定时器, 定时更新. 而物理引擎的world.step函数是整个box2d的核心, 其模拟/驱动了物理世界的运行.
window.setInterval(update, 1000 / 60);
function update() {
world.Step(
1 / 60 //frame-rate
, 10 //velocity iterations
, 10 //position iterations
);
world.DrawDebugData();
world.ClearForces();
};
总结:
从这个sample代码中, 学习到了很多. 实践出真知, 希望自己作为一个html5er的初学者能快速成长.
写在最后：
如果你觉得这篇文章对你有帮助, 请小小打赏下. 其实我想试试, 看看写博客能否给自己带来一点小小的收益. 无论多少, 都是对楼主一种由衷的肯定.
box2dweb 学习笔记--sample讲解的更多相关文章
- tensorflow学习笔记----TensorBoard讲解
TensorBoard简介 TensorBoard是TensorFlow自带的一个强大的可视化工具,也是一个Web应用程序套件.TensorBoard目前支持7种可视化,Scalars,Images, ...
- C++内存管理学习笔记（3）
/****************************************************************/ /* 学习是合作和分享式的! /* Auth ...
- 网络协议学习笔记(二)物理层到MAC层，交换机和VLAN，ICMP与ping原理
概述 之前网络学习笔记主要讲解了IP的诞生,或者说整个操作系统的诞生,一旦有了IP,就可以在网络的环境里和其他的机器展开沟通了.现在开始给大家讲解关于网络底层的相关知识. 从物理层到MAC层:如何在宿 ...
- R︱shiny实现交互式界面布置与搭建（案例讲解+学习笔记）
要学的东西太多,无笔记不能学~~ 欢迎关注公众号,一起分享学习笔记,记录每一颗"贝壳"~ --------------------------- 看了看往期的博客,这个话题竟然是第 ...
- 2.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：
转自:https://www.cnblogs.com/ssslinppp/p/4528892.html 个人认为,使用@ResponseBody方式来实现json数据的返回比较方便,推荐使用. 摘要 ...
- 1.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：
转自:https://www.cnblogs.com/ssslinppp/p/4528892.html [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://w ...
- 串的应用与kmp算法讲解--学习笔记
串的应用与kmp算法讲解 1. 写作目的 平时学习总结的学习笔记,方便自己理解加深印象.同时希望可以帮到正在学习这方面知识的同学,可以相互学习.新手上路请多关照,如果问题还请不吝赐教. 2. 串的逻辑 ...
- 3.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：
转自:https://www.cnblogs.com/ssslinppp/p/4528892.html 概述 在文章:<[Spring学习笔记-MVC-3]SpringMVC返回Json数据-方 ...
- WeX5学习笔记
目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...
随机推荐
- Jquery操作复选框(CheckBox)的取值赋值实现代码
赋值 复选框 CheckBox 遍历 取值 1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...
- Scss sass
http://www.ruanyifeng.com/blog/2012/06/sass.htmlscss 声明:1,$blue : #1875e7;2,.class1 { border: 1px so ...
- 创建plist文件
可以先在工程中直接新建一个plist文件,往里面写入自己需要的数据.但是这里的plist文件我们无法修改,是只读的,我们可以将这个plist文件复制一份到沙盒中,然后对沙盒中的文件进行操作.具体代码如 ...
- python视频教程：十分钟快速入门python
想要学习python这门语言,却始终找不到一个全面的Python视频教程,倘若你是真心想学好一门语言,小编建议你亲自动手实践的.下面来看看入门python的学习教程. Python的语言特性 Pyth ...
- 转：Java面试题集（51-70） http://blog.csdn.net/jackfrued/article/details/17403101
Java面试题集(51-70) Java程序员面试题集(51-70) http://blog.csdn.net/jackfrued/article/details/17403101 摘要:这一部分主要 ...
- iOS 三种录制视频方式
随着每一代 iPhone 处理能力和相机硬件配置的提高,使用它来捕获视频也变得更加有意思.它们小巧,轻便,低调,而且与专业摄像机之间的差距已经变得非常小,小到在某些情况下,iPhone 可以真正替代它 ...
- 0911 Socket网络编程
1.实现ftp上传.下载功能 1.1 循环接收数据直到接收完毕 server端接收client发送的命令(比如说ifconfig),然后server端将命令执行结果反馈给客户端,这时候有个问题,ser ...
- Motorola C118修改滤波器组件
所需工具: 热风枪.恒温焊台.镊子.助焊膏.锡丝.滤波器组件 关于怎么使用热风枪拆屏蔽盖将在后期更新视频,以下为修改滤波器流程.以下热风枪设置温度只针对快克957DW(不同品牌风枪和型号可能会有温差) ...
- 微信分享 添加URL Schemes
1. TARGETS - Info - URL Types identifier -> weixin URL Schemes -> 应用id 2.在AppDelegate.h 引入头文件 ...
- hbm2ddl
hbm2ddl工具位于Hibernate核心软件包中,而hbm2java工具位于Hibernate工具包中,因此需要下载Hibernate工具包,文件形式为HibernateTools-X.zip. ...