Contents
  1. 1. Forward
  2. 2. 第一步,了解Box2D基础
    1. 2.1. 引入Box2D
    2. 2.2. 定义World变量
    3. 2.3. 添加第一个物体:地面
    4. 2.4. 绘制世界:调试绘图模式
    5. 2.5. 动画
  3. 3. Animation Pro

Forward

(源码来自 <<Pro HTML5 Games>> 第3章内容,一本国内相对冷门的书

适用对象:一切有关物理计算的游戏

准备工作:

  • 库:Box2dWeb-2.1.a.3.min.js
    这个Box2D库是相当一大部分库的基础和实现,由C++编写
  • 浏览器:Chrome,FireFox等
    不推荐使用Safari,渲染速度肉眼可见慢于Chrome,容易崩溃
  • 基础知识:JavaScript基础即可,C艹er请绕路

无论如何,

第一步,了解Box2D基础

引入Box2D

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Box2d Test</title>
<script src="Box2dWeb-2.1.a.3.min.js" type="text/javascript"></script>
<script src="box2d.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="init();">
<canvas id="canvas" width="640" height="480" style="border:1px solid black;">Your browser does not support HTML5 Canvas</canvas>
</body>
</html>

在box2d.js中,我们为了方便,将最常用的对象定义为快捷变量

1
2
3
4
5
6
7
8
9
10
var b2Vec2 = Box2D.Common.Math.b2Vec2;
var b2BodyDef = Box2D.Dynamics.b2BodyDef;
var b2Body = Box2D.Dynamics.b2Body;
var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
var b2Fixture = Box2D.Dynamics.b2Fixture;
var b2World = Box2D.Dynamics.b2World;
var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
var b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef;

(卧槽什么鬼)别急,如果你把源码拆了看一看,这个库的方法分类还是相当清楚的。你就当做头文件一样的东西好了。

定义World变量

创建world对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var world;
var scale = 30; // 在canvas上的30像素表示Box2D世界的1米
function init(){
// 创建Box2D world对象,该对象将完成大部分物理计算
var gravity = new b2Vec2(0, 9.8); // 声明重力加速度为9.8m/s²,方向向下
var allowSleep = true; // 允许静止的物体进入休眠状态,休眠物体不参与物理仿真计算
world = new b2World(gravity, allowSleep);
/*-----------------------------------TO DO:------------------------------------*/
createFloor();
// 创建一些具有简单性状的物体
createRectangularBody();
createCircularBody();
createSimplePolygonBody();
// 创建由两个形状组成的物体
createComplexBody();
// 将两个物体用转动关节连接起来
createRevoluteJoint();
// 创建具有用户自定义数据的对象
createSpecialBody();
// 创建接触监听器并追踪事件
listenForContact();
setupDebugDraw();
animate();
/*-----------------------------------------------------------------------------------*/
}

解释:b2World对象是Box2D的核心,创建时接受一个向量参数b2Vect作为重力数值,和一个布尔值决定允许静止物体休眠(以灰色表示,不参与计算从而提升性能)

添加第一个物体:地面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//创建地面--第一个物体
function createFloor(){
// body的预定以对象,包含创建body刚体需要用到的所有数据
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_staticBody; //静止物体
bodyDef.position.x = 640/2/scale; //中心x坐标
bodyDef.position.y = 450/scale; //中心y坐标
// fixture用来向body添加shape以实现碰撞检测
// fixture的预定义对象,用来建立fixture
var fixtureDef = new b2FixtureDef;
fixtureDef.density = 1.0; //密度
fixtureDef.friction = 0.5; //摩擦
fixtureDef.restitution = 0.2; //弹性
fixtureDef.shape = new b2PolygonShape; //图形模式:矩形
fixtureDef.shape.SetAsBox(320/scale, 10/scale); // 640像素宽,20像素高
var body = world.CreateBody(bodyDef); //把预定义物体放进世界啦,然并卵
var fixture = body.CreateFixture(fixtureDef); //物体有了自己的属性辣,此时才会显现物体
}

(卧槽好麻烦)创建物体时,需要相当多的信息,我们只是创建一个长条矩形就写了这么多行。
总的来说,要创建一个物体,需要给物体套上一个fixture,在给world套上这个物体。

绘制世界:调试绘图模式

要绘制图形,就要和canvas绑定,下面是绑定的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//设置调试绘图
var context;
function setupDebugDraw(){
context = document.getElementById("canvas").getContext('2d');
var debugDraw = new b2DebugDraw();
//使用canvas绘图环境来调试画面
debugDraw.SetSprite(context);
//设置绘图比例
debugDraw.SetDrawScale(scale);
//填充的透明度为0.3
debugDraw.SetFillAlpha(0.3);
//线条宽度为1
debugDraw.SetLineThickness(1.0);
//绘制所有的shape和joint
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
// 设置调制绘图模式
world.SetDebugDraw(debugDraw);
}

总的来说,要给world套上一个绘图模式,这样world世界里的东西,才能以一定参数修改后显示在canvas上。

动画

动画相当重要,Box2D需要我们每一帧都先要清除作用力,然后再更新数据。最后别忘了重复调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var timeStep = 1/60;
// 按照Box2D手册给的建议的迭代数,速度是8,位置是3
var velocityIterations = 8;
var positionIterations = 3;
function animate(){
// 时间步长,速度迭代数,位置迭代数
world.Step(timeStep, velocityIterations, positionIterations);
world.ClearForces();
world.DrawDebugData();
/*-----------------------------------TO DO:------------------------------------*/
// 自定义绘制
if (specialBody) {
drawSpecialBody();
}
//摧毁耗尽生命值的物体
if (specialBody && specialBody.GetUserData().life <= 0) {
world.DestroyBody(specialBody);
specialBody = undefined;
console.log("The special body was destroyed");
}
/*---------------------------------------------------------------------------------*/
setTimeout(animate, timeStep);
}

world.step()的三个参数决定了积分算法的尺度,而一般物理引擎效果较好时,时间间隔至少为60HZ或者1/60S,而且需要恒定,这样才能每次产生相同的结果,便于调试。

这里XANA不自觉地想到了requestAnimationFrame这样一个东西,这是一个可以用来测试浏览器性能的东西,而且具有标签页暂停的逆天功能。因为我们知道,固定帧数的动画有个缺点,太大可能会导致浏览器卡崩,并且setInterval具有若干缺点。而如果根据浏览器对重复调用方法的调用时间触发一个timeout,从而循环调用这个方法,可以有效利用浏览器(队列)资源。到后期我们可以根据这个函数改进这个方法,当然这是题外话,与本例无关。至此本文结束。

Animation Pro

首先,若requestAnimationFrame不存在,则重写之。从中你也能看出此函数的作用机理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(function(){
var lastTime = 0;
var vendors = ['ms', 'mos', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame;++x){
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
})();

重写后的animate,根据响应速度来设置世界时间下一步的步长,主动截断超过1/30秒的步长

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var lastUpdateTime;
function animate(){
var currentTime = new Date().getTime();
var timeStep;
if (lastUpdateTime){
timeStep = (currentTime - lastUpdateTime)/1000;
if(timeStep > 2/60){
timeSetup = 2/60;
};
}
lastUpdateTime = currentTime;
// 要执行的绘制部分
window.requestAnimationFrame(animate, canvas);
}

Contents
  1. 1. Forward
  2. 2. 第一步,了解Box2D基础
    1. 2.1. 引入Box2D
    2. 2.2. 定义World变量
    3. 2.3. 添加第一个物体:地面
    4. 2.4. 绘制世界:调试绘图模式
    5. 2.5. 动画
  3. 3. Animation Pro