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

时间：2016-05-16 12:52:17 阅读：264 评论：0 收藏：0 [点我收藏+]

标签：

这是系列第二部分，之前部分在本博客中找

源码demo存放在https://github.com/willian12345/Box2D-for-Javascript-Games

向世界添加刚体

刚体(Bodies)是我们用Box2D创建物理游戏的重要对象。任何你可以移动的或交互的对象都是刚体(Bodies)。

愤怒的小鸟(Angry Birds)中创建的小鸟和小猪是刚体,同样在图腾破坏者(Totem Destroyer)中的黄金神像和图腾砖块也是刚体。

本章将带你学习创建各种类型的Box2D刚体,此外还有一些其它重要的特性,如下表所列

• 创建圆形刚体?

• 创建矩形刚体?

• 创建任意多边形刚体

• 使用DebugDraw()方法测试模拟

• 定义刚体的类型:static,dynamic或kinimatic?

• 设置材质属性:密度(density),摩擦系数(friction)和恢复系数(resitution)

• 度量单位?

• 创建合成对象

通过本章的学习,你将会创建一个你的第一个图腾破坏者类型的游戏。本章有较

多的知识点,那么我们废话少说,直接开始本章的学习吧!

你的第一个模拟—一个球落地

我们先从简单的任务开始,最简单的物理模拟:一个球落到地面。总之,虽然

这是一个简单小球落地的模拟,但是它将是你的第一个模拟,并且易于很快实

现它。

让我们看看在这次模拟中我们要做些什么:

• 世界的重力(gravity)?

• 一个受到作用力(例如:重力(gravity))的球

• 一个不受任何作用力的地面?

• 某种材质,正如我们希望小球在地面弹起的材质

在之前的学习中,你已经能够配置世界的重力了,所以我们从创建小球开始本章的代

码编写。

1. 无论我们是创建球形还是多边形,第一步都是创建一个刚体:

　　var bodyDef =new b2BodyDef();

　　b2BodyDef类是一个刚体的定义类,它将持有创建我们刚体所需要的所有数据。

2. 现在可以将刚体添加到世界中。因为我们采用的舞台尺寸是640X480,我们将把球放置在舞台的顶部的中心位置,该位置为(320,30),如下所示:

　　bodyDef.position.Set(10.66,1);

　　通过position属性显示的设置了刚体在世界中的位置,但是我确信你会对我之前所说的位置为(320,30)的设置而变成(10.66,1)而感到困惑。

　　这原因要关系到度量单位上。虽然Flash是以像素(pixels)为度量单位,但是在Box2D中尝试模拟真实的世界并采用米(meters)作为度量单位。

　　对于米(meters)和像素 (pixels)之间的转换没有通用的标准,但是我们采用下面的转换标准可以有很好的运行效果:

　　1米 = 30像素

　　所以,如果我们定义一个变量来帮助我们将米(meters)转换成像素 (pixels),我们便可以在Box2D世界(world)中进行操作时使用像素 (pixels)而不用使用米(meters)来作为度量单位。

　　这样将使我们在制作 Flash游戏时,使用像素来思考,从而变得更加直观。

3. 打开你在第一章中创建的demo1-1.html,并像下面那样修改它:

<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;
            var worldScale = 30;
            function main(){
               world = new b2World(new b2Vec2(0, 9.81), true);
               var bodyDef = new b2BodyDef(); 
               bodyDef.position.Set(320/worldScale,30/worldScale);

               setInterval(updateWorld, 1000 / 60);
            }
            function updateWorld() {
               world.Step(1/30,10,10);
               world.ClearForces(); // 清除作用力
            }

            main();
         }
         init();
</script>

并且,注意我是怎样创建世界和调用step方法的。这比之前少用了几行代码。

一旦你创建了刚体定义,那么是时候给它一个形状了。

创建一个圆形形状

形状(shape)是一个2D几何对象,例如一个圆形或者多边形,在这里必须是凸多边

形(每一个内角小于180度)。记住,Box2D只能处理凸多边形

现在,我们从小球开始,所以我们创建一个圆形:

var circleShape =new b2CircleShape(25/worldScale);

b2CircleShape是用来创建圆形形状,并且它的构造函数需要一个半径(radius)作为参数。

在之前的代码中,我们创建了一个圆形,它的半径为25像素(pixels),由于设置了worldScale变量。

从现在起,每次你想要使用像素进行操作时,你只要将它们除以 worldScale即可。你也可以定义一个方法名为pixelsToMeters的方法,在每次你需要将像素(pixels)转换成米(meters)时调用。

当我们有了刚体定义和形状时,我们将使用夹具(fixture)来将它们粘合起来。

创建夹具

夹具(fixture)用于将形状绑定到刚体上,然后定义它的材质,设置密度 (density),摩擦系数(friction)以及恢复系数(restitution)。

此刻我们无需去担心材质,让我们把注意力集中到夹具(fixture)上:

1.首先,我们创建夹具(fixture):?

var fixtureDef = new b2FixtureDef();
fixtureDef.shape=circleShape;

　　一旦我们通过构造函数创建了夹具(fixture),我们将分配之前创建的形状给它的shape属性。

2.最后,我们准备将球添加到世界中:?

var theBall =world.CreateBody(bodyDef);
theBall.CreateFixture(fixtureDef);

b2Body是刚体的实体:是物质,是通过使用bodyDef属性创建的具体刚体。

3.再次说明一下，使用以下步骤将刚体添加到世界中:

　　I 创建一个刚体定义，它将持有刚体信息，例如刚体的位置信息。

　　II 创建一个形状，它将决定刚体的显示形状

　　III. 创建一个夹具,将形状附加到刚体定义上。

　　IV. 创建刚体在世界中的实体,使用夹具。

一旦你知道了每一步的重要性,添加刚体到你的Box2D世界中将会很容易和有趣

回到我们的项目。现在的main函数内应该看起来和下面一样:

function main(){
               world = new b2World(new b2Vec2(0, 9.81), true);
               var bodyDef = new b2BodyDef(); 
               bodyDef.position.Set(320/worldScale,30/worldScale);
               var circleShape = new b2CircleShape(25/worldScale);
               var fixtureDef = new b2FixtureDef();
               fixtureDef.shape = circleShape;
               fixtureDef.density = 1;
               fixtureDef.restitution = .6;
               fixtureDef.friction = .1;
               var theBall = world.CreateBody(bodyDef);
               theBall.CreateFixture(fixtureDef);

               setInterval(updateWorld, 1000 / 60);
}

定时保存项目并测试它。准备好看看你的第一个Box2D刚体的活动?运行影片!

额…，然而你现在运行时还是看不到任何东西。。让我告诉你原因，Box2D只负责模拟物理世界，而不负责显示任何东西。

这意味着，你的刚体正活跃在你的Box2D世界中，只是你看不到而已。

使用调试绘图测试你的模拟

幸运的是,Box2D有一个特性,调试绘图(debug draw),它将帮助你显示出模拟的情况:

在网页中首先要添加一个canvas如

<canvas id="canvas" width="640" height="480" style="" ></canvas>

1.调试绘图(debug draw)将Box2D世界中发生的事情显示出来,在

updateWorld方法中,我们可以在Step()方法之后调用世界(world)的 DrawDebugData()方法:

world.DrawDebugData();

2. 一旦我们告知世界在每次遍历之后显示调试绘图(debug draw),我们需要通过调试绘图(debug draw)定义视觉设置。如下添加代码到你的main函数内:

var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(worldScale);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);

3.这里有很多代码,所以让我们来解释一下发生了什么。你已经知道 DrawDebugData()方法代表什么,所以我们将解释其它行代码代表的意思:

var debugDraw = new b2DebugDraw();

b2DebugDraw是一个类,它支持调试绘图(debug draw)出你的游戏中的物理实体。

 var debugSprite:Sprite = new Sprite();

debugSprite被添加到显示列表(Display List),准备显示在canvas上。

debugDraw.SetSprite(debugSprite);

SetSprite()方法告知debugSprite将要被用来显示调试绘图 (debug draw)。

debugDraw.SetDrawScale(worldScale);

因为我们要将米(meters)转变为像素(pixels),我们需要通知调试绘图(debug draw)我们使用的换算比例。 debugDraw.SetFlags(b2DebugDraw.e_shapeBit);

SetFlag()方法允许我们决定我们将在调试绘图(debug draw)中描绘的物理实体的类型。此刻,我们只需要绘制形状。

补充说明：

setFlag()方法选择性的绘制Box2D对象的内容。这样可以节省CPU开支。setFlag()方法有一个16进制的参数，这参数的取值只能是b2DebugDraw中定义的下面几个常量

另外，我们还可以用”或”运算符，同时使用多个Flag

debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);

debugDraw.SetFillAlpha(0.5);

SetFillAlpha()方法是为了便于观看而设置的。形状的轮廓是不透明的,填充的颜色是半透明的。这将使得调试绘图输出更加易于理解。

world.SetDebugDraw(debugDraw);

最后，我们将指派调试绘图(Debug draw)到我们刚刚创建的世界（world）

4.现在是时候来测试一下你影片了,然后你应该会看到下图所示的样子:

技术分享

就这样!你设法看到了你放置在Box2D世界中的刚体。

目前,球体还无法在重力的作用下下落,但是不要担心,我们将在稍后修改它。

现在,让我们来创建一些可以作为地面的东西,例如一个放置在舞台底部边缘的大矩

形。从现在开始一切将更加简单,作为新的刚体将会很快的自动显示在它所添加的世界中。

完整源码在demo2-1.html中查看

创建矩形形状

让我执行下面的步骤:

　　1.首先,刚体和夹具的定义可以重指定到我们定义的新的刚体上。这样,我们无需再去定义bodyDef变量,但是我们要改变原先在创建球时使用的坐标:?

bodyDef.position.Set(320/worldScale,470/worldScale);

　　2.我们将用b2PolygonShape类创建一个多边形：　　

var polygonShape = new b2PolygonShape();

　　这样，我们以之前创建圆形形状时，相同的方法创建了一个多边形形状。

　　3.多边形形状必须遵守一些限制,但是目前,因为我们只需要一个轴对称的矩形,SetAsBox()方法便能满足我们的需要: ?　

polygonShape.SetAsBox(320/worldScale,10/worldScale);

　　这个方法需要两个参数:矩形的半宽长和半高长。最后,我们的新多边形形状的中心在像素(320,470),它的宽度为640像素和高度为20像素——这是我们刚刚创建的地面的尺寸。 ?

　　4.现在,我们改变定义的夹具的shape属性,附加新的多边形形状:　

fixtureDef.shape = polygonShape;

　　5.最后,我们可以创建刚体并将夹具附加上去,就像我们在球形上做的那样。

var theFloor = world.CreateBody(bodyDef); 
theFloor.CreateFixture(fixtureDef);

　　6.你的main方法应该向下面这样:

function main(){
               world = new b2World(new b2Vec2(0, 9.81), true);
               var bodyDef = new b2BodyDef(); 
               bodyDef.position.Set(320/worldScale,30/worldScale);
               var circleShape = new b2CircleShape(25/worldScale);
               var fixtureDef = new b2FixtureDef();
               fixtureDef.shape = circleShape;
               fixtureDef.density = 1;
               fixtureDef.restitution = .6;
               fixtureDef.friction = .1;
               var theBall = world.CreateBody(bodyDef);
               theBall.CreateFixture(fixtureDef);

               // 定义矩形地面
               bodyDef.position.Set(320/worldScale, 470/worldScale); 
               bodyDef.type = b2Body.b2_staticBody;
               var polygonShape = new b2PolygonShape();
               polygonShape.SetAsBox(320/worldScale, 10/worldScale);
               fixtureDef.shape = polygonShape; // 复用夹具

               var theFloor = world.CreateBody(bodyDef);
               theFloor.CreateFixture(fixtureDef);

                //setup debug draw
               var debugDraw = new b2DebugDraw();
               debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
               debugDraw.SetDrawScale(worldScale);
               debugDraw.SetFillAlpha(0.5);
               debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
               world.SetDebugDraw(debugDraw);

               setInterval(updateWorld, 1000 / 60);
            }

　　7.测试影片,你将会看到地面:

　　技术分享

完整源码在demo2-2.html中查看

你看是不是很简单?我们花了将近一章半去防止我们的第一个刚体,然后只花了很

少的几行代码添加另一个刚体。

不同的刚体类型——static,dynamic和 kinematic

有三种Box2D刚体的类型:staitc,dynamic和kinematic。

一个static类型的刚体不受任何力,冲量或撞击的影响并且不会移动。它只能通过用户手动移动。默认情况下,所有的Box2D刚体都是static类型的刚体,这就是为什么球不移动的原因。一个static类型的刚体不会和别的static或kinematic类型的刚体发生碰撞。

一个dynamic类型的刚体受力,冲量,撞击以及任何世界事件的影响。它可以通过手动移动,虽然我建议让它们通过世界的重力,和任何类型刚体的碰撞来移动。

一个kinematic类型的刚体是一个介于static和dynamic刚体之间的混合刚体。它不受理的影响,但是可以通过手动和设置它们的速率来移动。它不能和static和 kinematic类型的刚体碰撞。

现在回到我们的模拟钟来。那种类型是我们要指派给球和地面的呢？

地面是static类型的刚体,它无需移动,然而通过世界重力球要移动,所以是 dynamic类型的刚体。

你只需要设置刚体定义的type属性就能告知Box2D每一个刚体的类型,属性值可以是

b2Body.b2_staticBody, b2Body.b2_dynamicBody或b2Body.b2_kinematicBody分别对应 static,dynamic或kinematic刚体。

为球添加上bodyDef.type=b2Body.b2_dynamicBody;?

为地面添加上bodyDef.type=b2Body.b2_staticBody;?

你的新main方法向下面这样:

function main(){
               world = new b2World(new b2Vec2(0, 9.81), true);
               var bodyDef = new b2BodyDef(); 
               bodyDef.position.Set(320/worldScale,30/worldScale);
               bodyDef.type = b2Body.b2_dynamicBody;
               var circleShape = new b2CircleShape(25/worldScale);
               var fixtureDef = new b2FixtureDef();
               fixtureDef.shape = circleShape;
               var theBall = world.CreateBody(bodyDef);
               theBall.CreateFixture(fixtureDef);

               // 定义矩形地面
               bodyDef.position.Set(320/worldScale, 470/worldScale); // 复用定义刚体
               bodyDef.type = b2Body.b2_staticBody;
               var polygonShape = new b2PolygonShape();
               polygonShape.SetAsBox(320/worldScale, 10/worldScale);
               fixtureDef.shape = polygonShape; // 复用夹具

               var theFloor = world.CreateBody(bodyDef);
               theFloor.CreateFixture(fixtureDef);

                //setup debug draw
               var debugDraw = new b2DebugDraw();
               debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
               debugDraw.SetDrawScale(worldScale);
               debugDraw.SetFillAlpha(0.5);
               debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
               world.SetDebugDraw(debugDraw);

               setInterval(updateWorld, 1000 / 60);
}

技术分享

在恭喜你运行成功你的第一个模拟之前,让我们花点时间来说一下关于当使用调试绘图(debug draw)时的不同颜色。

static类型的刚体将会绘制成绿色。dynamic类型的刚体,当它们没有在睡眠状态时将会绘制成红色,在睡眠状态时将会绘制成灰色。

kinematic类型的刚体,在之前的屏幕截图中没有显示,它将会被显示为蓝色。

现在,我们知道当刚体进入睡眠状态并节约CPU资源这个概念。正如你所见, 当球撞击地面,没有别的里影响它时,所以求可以进入睡眠状态,知道有什么发生为止。

现在,有一个新的问题。球在落地后没有弹起。如果我们想要运行一个完美的模

拟,我们需要给我们的刚体一些更多的属性。

密度,摩擦和恢复

正如你已经知道怎样向世界添加刚体,那么我想向你介绍三种将会改变刚体行为

的属性:密度,摩擦和恢复。

密度(density)用来设置刚体的质量,按照公斤没平方米。越高的密度意味着越重的刚体,并且该值不能为负。

摩擦(friction)在两个刚体在彼此的表面上移动时产生,它是通过一个系数来定义的,通常它的范围在0(没有摩擦)-1(最大摩擦)之间。它不能为负数。

恢复(restitution)决定刚体在发生碰撞时反弹的程度。与密度(density)和摩擦 (friction)一样,它不能为负数并且它是一个介于0-1的系数来定义的。

一个小球在恢复为0时落向地面,不发生反弹(无弹性碰撞),反之恢复为1时小球将会以此刻撞击时相同的速率弹起(完全弹性碰撞)。

密度(density),摩擦(friction)和恢复(restitution)必须添加到夹具上,所以在main方法中添加以下几行代码:?

fixtureDef.density=1;?

fixtureDef.restitution=0.6;?

fixtureDef.friction=0.1;?

现在你的main函数内看起来应该是这样的

function main(){
               world = new b2World(new b2Vec2(0, 9.81), true);
               var bodyDef = new b2BodyDef(); 
               bodyDef.position.Set(320/worldScale,30/worldScale);
               bodyDef.type = b2Body.b2_dynamicBody;
               var circleShape = new b2CircleShape(25/worldScale);
               var fixtureDef = new b2FixtureDef();
               fixtureDef.shape = circleShape;
               fixtureDef.density = 1;
               fixtureDef.restitution = .6;
               fixtureDef.friction = .1;
               var theBall = world.CreateBody(bodyDef);
               theBall.CreateFixture(fixtureDef);

               // 定义矩形地面
               bodyDef.position.Set(320/worldScale, 470/worldScale); // 复用定义刚体
               bodyDef.type = b2Body.b2_staticBody;
               var polygonShape = new b2PolygonShape();
               polygonShape.SetAsBox(320/worldScale, 10/worldScale);
               fixtureDef.shape = polygonShape; // 复用夹具

               var theFloor = world.CreateBody(bodyDef);
               theFloor.CreateFixture(fixtureDef);

                //setup debug draw
               var debugDraw = new b2DebugDraw();
               debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
               debugDraw.SetDrawScale(worldScale);
               debugDraw.SetFillAlpha(0.5);
               debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
               world.SetDebugDraw(debugDraw);

               setInterval(updateWorld, 1000 / 60);
            }

我向夹具指派一次属性,而所有的刚体都将使用这个相同的夹具。在本书的整个

讲解过程中,我们将要处理很多夹具的属性,但是目前让我们只需要设置小球弹跳即可。

测试demo2-3.html，你就会发现小球在弹跳

技术分享

祝贺你!你刚刚完成了你的第一个真实的Box2D项目,那么现在你有能力去创建基础的形状和为它们分配特性和属性。

接下去让我开始来创建一个准游戏吧…

注：转载请注明出处博客园：sheldon-二狗-偷饭猫(willian12345@126.com)

https://github.com/willian12345

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

标签：

原文地址：http://www.cnblogs.com/willian/p/5478539.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

向世界添加刚体

你的第一个模拟—一个球落地

创建一个圆形形状

创建夹具

创建矩形形状

不同的刚体类型——static,dynamic和 kinematic

密度,摩擦和恢复

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