box2dweb基础
简介
大名鼎鼎的物理引擎box2d基本上大家都听说过,网上有两个javascript版本的box2d库,一个时box2djs,已经停止维护,一个是box2dweb。下面就来介绍一下box2dweb的基本信息。
一 包,类介绍
BOX2D.Collision>>>碰撞,冲击包; b2AABB AABB坐标 b2OBB OBB坐标 b2ContactID 接触ID b2ContactPoint 接触点 b2ManifoldPoint 繁殖点 BOX2D.Collision.Shapes>>>碰撞形状形变包; b2CircleShape 圆外形. b2EdgeChainDef边缘图形. b2MassData 质量运算器. b2PolygonShape 凸多边形. b2Shape 图形基类. BOX2D.Common >>>通用包; b2Color 调试绘图颜色. b2Settings 全局设置 BOX2D.Common.Math>>>通用数学包; b2Mat22 2*2 矩阵 b2Mat33 3*3 矩阵 b2Sweep 碰撞描述. b2Vec2 向量(x ,y). b2Vec3 向量(x, y z). b2XForm 坐标转换,平移或旋转 BOX2D.Dynamics>>>动态包; b2Body 刚体或叫物体. b2BodyDef 刚体定义. b2ContactFilter 继承这个类用来获取过滤碰撞 b2ContactListener 继承这个类用来获取碰撞结果,根据这个判断游戏逻辑或声音处理. 你也可以获取碰撞在时间步后,时间步会有一个碰撞列表.然而你也有可能漏掉一些碰撞,因为在一个时间步内有多个子步.你应该尽量提高碰撞回调方法的效率,因为在每个时间步内有诸多回调. b2FilterData 碰撞过滤数据 b2DebugDraw 调试绘图,用于调试. b2DestructionListener 关节或外形销毁时处理方法 b2FixtureDef 材质定义类 b2Fixture材质类 b2World 物理世界 Box2D.Dynamics.Contacts>>>碰撞管理包 b2Contact 管理两个外形接触. b2ContactEdge 接触边用来连接多个物体和接触到一个接触表(物体是一个节点而接触相当于一个接触边) b2ContactResult 记录接触结果 BOX2D.Dynamics.Joints>>>动态关节包; b2DistanceJoint 距离连接 b2DistanceJointDef 距离连接定义. b2GearJoint 齿轮连接. b2GearJointDef 齿轮连接定义. b2Joint 连接基类. b2JointDef 连接定义基类. b2JointEdge 用于组合刚体或连接到一起.刚体相当于节点,而连接相当于边 b2MouseJoint 鼠标连接. b2MouseJointDef 鼠标连接定义. b2PrismaticJoint 移动连接. b2PrismaticJointDef 移动连接定义. b2PulleyJoint 滑轮连接. b2PulleyJointDef 滑轮连接定义. b2RevoluteJoint 旋转连接. b2RevoluteJointDef 旋转连接定义.
二 创建世界
var world = new b2World( gravity, doSleep);
上面这段代码就创建了一个box2d的世界(Box2D.Dynamics.b2World),所有的box2d中的物体都依托于这个世界存在。下面详细介绍:
gravity 定义了世界的重力 也是一个2d向量(Box2D.Common.Math.b2Vec2(x,y)),其中x是水平方向重力,正为右,负为左;y是垂直方向重力,正为下,负为上。
var gravity=new b2Vec2(0,300);
doSleep 一个布尔值变量,设定了当物体停止移动时是否允许物体休眠。一个休眠中的物体不需要任何模拟。
常用的方法:
CreateBody(b2BodyDef);//*所有世界中的物体都必须由本方法创建
DestoryBody(b2Body);
ClearForces();
GetBodyList();
GetBodyCount();
GetJointCount();
GetJointList();
IsLocked();
SetDebugDraw(b2DebugDraw);
Step(dt, velocityIterations, positionIterations);
上面我们就创建了一个box2d的世界。下面让我们来看如何向这个世界中添加物体。
三 创建物体、刚体
1 首先要创建一个物体定义
var bodydef=new b2BodyDef(); // 物体类型定义,基本上常用的有两种定义:b2_staticBody 静态物体; .b2_dynimacBod动态物体 bodydef.type= b2Body.b2_staticBody; //定义物体位置。也可以这样 bodydef.position.x=10; bodydef.position.y=10; bodydef.position.Set(x,y); //定义用户自己的数据 bodydef.userData=*;
2 其次要定义一个材质定义
var fixDef = new b2FixtureDef(); fixDef.density = 1.0; // desity 密度,如果密度为0或者null,该物体则为一个静止对象 fixDef.friction = 0.5; //摩擦力(0~1) fixDef.restitution = 0.2;// 弹性(0~1)
3 为材质定义添加一个形状
b2PolygonShape多边形;b2CircleSharp圆形设置该材质形状的大小;b2PolygonShape对应着SetAsBox(halfWidth,halfHeight)方法设置半长半宽,值//得注意的是Box2d中的单位//是米,一米是30像素,如果自定义多边形可以使用一个SetAsArray(vertexArray,vertexCount),其中vertexArray为顶点矢量(b2Vec2)数组,vertexCount为顶点数,最多8个。b2CircleSharp对应的设置属性为SetRadius(radius);
fixDef.sharp=new b2PolygonShape(); fixDef.sharp.SetAsBox(100/30,20/30); fixDef.sharp=new b2CircleShape(60/30); fixDef.sharp=new b2CircleShape(); fixDef.sharp.SetRadius(100/30); fixDef.shape.SetAsArray([new b2Vec2(0,0), new b2Vec2(2,0), new b2Vec2(3,1.5), new b2Vec2(2,3), new b2Vec2(0,3), new b2Vec2(-1,1.5)],6);
4 根据物体定义,材质定义创建物体
var body=world.CreateBody(bodydef); body.CreateFixture(fixDef);
其他一些属性
body.ApplyForce(force, point); //添加一个外力,force一个b2Vec2的向量代表外力,point一个b2Vec2的向量代表物体的着力点。
body.SetMassFromShapes();//根据形状计算质量
四 调试
实现一个基于html5的canvas对象的2d上下文的调试实例,并利用SetDebugDraw方法将其赋予一个世界。
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);
五 世界更新
一切都准备好了,我们要让所有对象模拟运动。其实他也是通过侦听帧频率而不断刷新实现的,把上面那两个参数传入世界对象的Step方法中即可,
同时我们需要遍历世界中的一切对象,并对每个对象的坐标和角度进行更新。
function update() { world.Step( 1/60//帧率 ,10//速率 , 10//position iterations ); world.DrawDebugData();//绘制调试数据 world.ClearForces();//绘制完毕后清除外力 }; //循环更新和绘制世界 setInteval(update,1000 / 60);