我要的是能在H5页面上跑的javascript版的Box2D啊！！！

最近想学习Javascript版本的Box2D JS物理引擎，无奈搜了半天也没找到相对比较系统的资料

官方网站也只是简单的介绍，API还引导向了FLASH AS3脚本。

我要的是能在H5页面上跑的javascript版本的教程啊！！！

后来搜出了一本中文版Box2D for Flash Games，脚本是AS3版本的书。是由天地会（昵称：鲁邦三世）翻译的

看，书封面

HTML5之2D物理引擎 Box2D for javascript Games 系列第一部分-LMLPHP

没有Javascript版本的啊。点解？(υ◉ω◉υ)

So... 我感觉上帝选中了我⋋(◍’Θ’◍)⋌

以前的我是AS3脚本程序猿出生，那么唯有用我丢掉的几年AS3脚本经验把它改写成Javascript版本的了，谁让我现在写的是Javascript呢。

看…我做的封面

HTML5之2D物理引擎 Box2D for javascript Games 系列第一部分-LMLPHP

完美！！！

用Fireworks把原来的封面做成了javascript，可见我功力了吧，请叫我美工殿下！

我最早是做美工出生我会跟你说？(／￣(ｴ)￣)／

好吧，那我就一边学，一边改成javascript版本了。

如果文章有侵权行为，那么，要么联系我删掉？

要么来告我，反正我也没钱（ミ￣ー￣ミ）

我的邮箱[email protected]

本系列源码持续更新中，已寄存在github上

https://github.com/willian12345/Box2D-for-Javascript-Games

开始前的一些说明

你必定假设你对javascript或者前端知识已经比较熟悉了，如果不熟悉的话你得先补一下前端知识再往下看

FLASH中的舞台对应网页中的Canvas

AS3 (ActionScript3.0)脚本对应网页中的Javascript

2D物理引擎中的一些概念名词翻译列表

rigid body :刚体 

fixture :夹具 

box :盒子或矩形

debug draw : 调试绘图

density :密度 

friction :摩擦或摩擦系数

restitution : 恢复或恢复系数

force : 力或作用力 

impulse : 冲量 

linear velocity : 线速度或线速率

joint : 关节 

motor : 马达 

bullet : 子弹 

sensor : 感应器

第一章

1、Hello Box2D World

如果你想创建2D的物理驱动游戏与应用,Box2D是最佳的有效选择。

Box2D是一个 2D刚体的仿真库,它被使用在一些最成功的游戏上,例如在iPhone上的Angry Birds 和Tiny Wings或者在Flash上的Totem Destroyer和Red Remover。

Google一下它们,你将会发现很多热心的评论。

在我们进入Box2D世界之前,让我说明一下什么是刚体(Rigid Bodies)。

它是一块非常坚硬的物质,任何方法都不能使它弯曲。无论你怎样用力去撞击(Hit)或投掷 (Throw)它,都无法改变它的形状。

在真实世界中,你可以将它的硬度想象成钻石,甚至比钻石还要硬。也许你可以展开想象,假设它是来至外空间的一块不可变形的物质。

Box2D只管理刚体(Rigid Bodies),从现在起,我们将称它为刚体(Bodies)(这句话中文是看不出什么不同的,英文将Rigid Bodies简称为Bodies),不用当心,你将还可以模仿不是刚性的材料,例如弹性球体。

让我们看看,你将在本章节学习到那些知识:

• 安装Box2D 

• 创建你的第一个Box2D世界 

• 了解重力和睡眠刚体

• 运行程序,操作时间步和约束

本章结束后,你将能创建一个空的可运行的世界,在那里你可以搭建你那了不起的物理游戏。

在网页中安装Box2D

你可以从官方站点下载最新的Box2D.js版本或在我的github上直接下载合并好的源码 https://github.com/willian12345/Box2D-for-Javascript-Games/

新建一个demo1-1.html页面

下载到Box2D.js版本后放在网页同级目录或其它目录

根据目录在网页中直接引用

<script src="Box2d.js"></script>

可比在比FLASH简单多了

网页中再添加

<script type="text/javascript">

            function init(){

            function main(){

               console.log(Box2D);

            }

            main();

         }

init();

</script>

测试一把

在浏览器中打开1.html

打开浏览器调试工具，推荐用chrome浏览器。

应该能看到调试器的Console内输出Object {Collision: Object, Common: Object, Dynamics: Object}

init()方法可以在onload时调用, init方法内再建一个main方法

模拟FLASH中自动调用的Main.as类。这里需要手动调用。当然你也随便建方法

完整代码在demo1-1.html中

第一步成功！

为了方便，在init方法一开始内可以添加以下代码，方便对象的使用

var b2Vec2 = Box2D.Common.Math.b2Vec2

   ,b2AABB = Box2D.Collision.b2AABB

   ,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

   ,b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef

   ;

先不用管具体做什么用，后面会一一用到的

当我给本节标题命名为Hello Box2D World时,我并不只是为了创建另一个"Hello World"程序,而是我想要介绍所有Box2D模拟和事件发生的环境:世界(World)。

世界(World)是模拟发生的舞台。你想要通过Box2D物理引擎控制的所有事物必须

在世界(World)中。幸运的是,Box2D世界(World)拥有足够大的空间来容纳你需要的任何事物,所以你无需担心世界(World)的边界(boundaries)。

你只需要记住在电脑中的任何事物都要受到某种限制。所以,越大的世界(World),将会消耗你的电脑越多的资源去管理它。

定义Box2D世界

与现实世界一样,Box2D世界(World)有重力(gravity),所以你需要先定义世界重力(world gravity)。

1. 在你的main方法中,添加下面的一行代码:

var gravity = new b2Vec2(0,9.81);

这里将介绍我们的第一个Box2D数据类型:b2Vec2。（注：在javascript中可没这个数据类型，把它当成一个对象就好了）

b2Vec2是一个2D的纵向量数据类型,它将储存x和y矢量分量。如你所见,构造函数有两个参数,都是数值,代表了x和y分量。通过这种方法我们定义 gravity变量作为一个矢量,它有x=0(这意味着水平的重力)和y=-9.81(这意味着近似的地球重力)。

物理学中说过,一个物体在地球表面自由下落的加速度近似为9.81m/s^2(米每平方秒)也可写作"m/s/s"。所以,假设没有任何空气阻力,我们在模拟一个真实的世界(real-world)环境。解释物体下落的原理已经超越本书的范围,但是你可以在Google或Wikipedia中搜索"equations for a falling body"去获得更多的信息。

2. 你可以设置你的游戏为下面的这行代码: 

var gravity = new b2Vec2(0,1.63);

你也可以将参数设置为(0,0)来模拟一个没有重力的环境:

var gravity = new b2Vec2(0,0);

3. 我们还需要告诉世界，当世界中的刚体静止时，可以允许他们进入睡眠状态,这样它们将不受作用力的影响。

一个睡眠的刚体无需模拟,它只是表示自己的存在,并静止在它的位置上,不会对世界中的任何事物产生影响,允许 Box2D忽略它,而且因此会提升处理速度以及让我们获得更好的性能。

所以推荐可能时让刚体睡眠。  

4. 添加下面的一行,它只是一个简单的布尔(Boolean)变量定义:

var sleep = true;  

5. 最后,我们准备创建我们的第一个世界(world): 

var world = new b2World(gravity,sleep);  

6.现在我们有一个容器来管理所有的刚体并且执行我们的动态模拟。

7.让我们来简单的回顾一下之前的代码,此刻,你的代码应该看起如下面所示:

<script type="text/javascript">

         function init(){

            var b2Vec2 = Box2D.Common.Math.b2Vec2

            ,b2AABB = Box2D.Collision.b2AABB

            ,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

            ,b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef

            ;

            var gravity = new b2Vec2(0, 9.81);

            var sleep = true;

            var world = new b2World(gravity, sleep);

            function main(){

            }

            main();

         }

         init();

      </script>

现在你学习了怎样去创建并配置一个Box2D世界。让我们来看看你将怎样在它里面实现物理效果的模拟。

运行模拟

你需要在每一帧都进行模拟,所以首先你需要一个监听来触发每一帧

1. 让我们添加一点代码:

<script>

         function init(){

            var b2Vec2 = Box2D.Common.Math.b2Vec2

            ,b2AABB = Box2D.Collision.b2AABB

            ,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

            ,b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef

            ;

            var gravity = new b2Vec2(0, 9.81);

            var sleep = true;

            var world = new b2World(gravity, sleep);

            function main(){

               setInterval(updateWorld, 1000 / 60);

            }

            function updateWorld() {

               console.log("my awesome simulation runs here");

            }

            main();

         }

         init();

      </script>

没有什么新的,我们只是添加了一个setInterval循环定时执行,但是我们需要它有序的运行updateWorld()方法中的模拟。

Box2D是通过模拟世界的离散时间步(step time)来进行模拟工作的。

这意味着世界将在每一个时间步被更新。

这将取决于我们在模拟中所采用的时间步。通常情况下,物理游戏的时间步为1/60秒。

2. 下面是updateWorld函数的第一行:

var timeStep = 1/30

只是定义了时间步还不够。在每一步,每一个物理实体(physic entity)根据作用于自身的作用力来更新(不包括睡眠状态)。

处理这项任务的算法叫约束解算器(constraint solver)。

它是基于循环每一个约束然后解算来进的，一次一个，如果你想要学习更多的关于约束的知识，在google在搜索"constraint algorithm"。

Where's the catch? 虽然单个约束可以被完美的解算,但是多个约束时,它会搅乱之前已经解算的别的约束。

试想,当两个球移动的时候:在真实的世界,每一个球的位置是在相同的时间更新。在电脑的模拟中，我们需要通过循环来更新球的位置，而每次只能一个。试想一下for循环每次遍历更新一个球。只要球彼此间没有发生相互作用，一切正常运行，但是如何第二个球撞击了第一个球，谁的位置被更新了？它们会重叠,这在刚体模拟中是不可能的事情。

通过取合适的近似值来解决这个问题,我们需要循环所有的约束不止一次。现在问题是:我们要循环多少次?

有两种约束解算器:速率约束解算器(velocity constraint solver)和位置约束解算器(position constraint solver)。速率约束解算器依据它们的在世界中的冲量来移动物理实体。位置约束解算器调整物理实体的位置避免重叠。

所以,越高的便利次数,将会有更精确的模拟,但是性能会更低。我设法处理超过100个物理实体使用10次速率和位置遍历,虽然Box2D的作者推荐8次速率和3次位置遍历。

这将由你来决定使用的值。与此同时,我将使用对两个约束解算器使用10次遍历。  我们设置了两个新变量:  

var velIterations:int=10;

var posIterations:int=10;

（注：先不用理解太深，反正我也没看懂，不管这个“约束”先 (=◎ω◎=)）

最后我们准备调用world变量的step方法来更新模拟。  

在updateWorld方法中使用world,我们需要把world作为类变量声明,如下所示:  

<script>

         function init(){

            var b2Vec2 = Box2D.Common.Math.b2Vec2

            ,b2AABB = Box2D.Collision.b2AABB

            ,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

            ,b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef

            ;

            var world;

            function main(){

               var gravity = new b2Vec2(0, 9.81);

               var sleep = true;

               world = new b2World(gravity, sleep);

               setInterval(updateWorld, 1000 / 60);

            }

            function updateWorld() {

               var timeStep = 1/30;

               var velIterations = 10;

               var posIterations = 10;

               world.Step(timeStep,velIterations,posIterations);

            }

            main();

         }

         init();

      </script>

现在我们有了我们自己的世界配置,然后运行。不幸的是,这是一个非常空

洞的世界,它的里面没有任何东西。所以在下一章,我们将向世界中填充各

种各样的物理实体。

最后还有一件事情,在每一步之后,你需要清除作用力,让模拟从下一步再次开始。

你可以将这行world.ClearForces();代码添加到step方法之后;你最后的代码如下所示:

<script>

         function init(){

            var b2Vec2 = Box2D.Common.Math.b2Vec2

            ,b2AABB = Box2D.Collision.b2AABB

            ,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

            ,b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef

            ;

            var world;

            function main(){

               var gravity = new b2Vec2(0, 9.81);

               var sleep = true;

               world = new b2World(gravity, sleep);

               setInterval(updateWorld, 1000 / 60);

            }

            function updateWorld() {

               var timeStep = 1/30;

               var velIterations = 10;

               var posIterations = 10;

               world.Step(timeStep,velIterations,posIterations);

               world.ClearForces(); // 清除作用力

            }

            main();

         }

         init();

</script>

源码全部代码在github上的demo1-1.html中，可查看运行

概述

你刚刚学习了怎样为在网页中安装使用Box2D。将它包含到你的项目中并运行,重力规则模拟,管理时间步以及约束解算器。

到现在为止，你的网页上其实并没有显示任何东西。

你有一个空的世界,准备成为你游戏发生的容器。保存它然后在每一个未来的项目中使用它!

注：转载请注明出处博客园：sheldon-二狗-偷饭猫([email protected])

https://github.com/willian12345

Box2D

HTML5之2D物理引擎 Box2D for javascript Games 系列 第一部分