连接到一起,可进行某种运动。在这里我们使用棱柱、旋转和鼠标关节。棱柱关节允许两个刚体”沿特定轴相对转化。棱柱关节阻止了刚体间的相对旋转。旋转关节允许两个刚体绕着锚定点旋转。鼠标关节仅用于连接轮子和底盘,不让这些刚体直接接触。图像:棱柱和旋转关节 有时不需要让关节在范围内完全运动,这时可以使用关节限制来限制关节的运动。关节也可以应用马达,马达会根据关节的自由水平,...">
Home » Source Code » Box 2d vehicles - part 1

Box 2d vehicles - part 1

maninwest
2015-03-03 04:18:29
The author
View(s):
Download(s): 1
Point (s): 1 
Category Category:
AndroidAndroid JavaScriptJavaScript

Description

height:1.5;">连接到一起,可进行某种运动。在这里我们使用棱柱、旋转和鼠标关节。

棱柱关节允许两个刚体”沿特定轴相对转化。棱柱关节阻止了刚体间的相对旋转。
旋转关节允许两个刚体绕着锚定点旋转。
鼠标关节仅用于连接轮子和底盘,不让这些刚体直接接触。
图像:棱柱和旋转关节 

有时不需要让关节在范围内完全运动,这时可以使用关节限制来限制关节的运动。关节也可以应用马达,马达会根据关节的自由水平,驱动相连刚体的运动。
汽车

汽车包含 5 个刚体,底盘、轮子、 减震器 (悬架)。所有刚体都是部分动态的,这意味着静态或动态部分之间互相交互 并完全模拟: 在力和速率的作用下运动。减震器只是个不可见的小部件,仅提供棱柱和旋转关节之间的连接。通过棱柱关节,减震器从顶向下运动,轮子通过旋转关节连接到减震器上,可以围绕自己的中心旋转。轮子是跟地面接触。它们的摩擦(以及地面的摩擦)会影响汽车的粘合。
在这里的例子中,汽车的功能全部由Car 类提供。创建函数创建新的汽车。
例子:创建汽车的所有刚体

function create(scene, x, y)
{
    var damperHeight = 8*this._images.wheel.width * this._scale/10;
    var wheelDistance = 7 * this._images.body.width*this._scale / 10;
 
    // create bodies:
    this._body = scene.addPolygonBody(this._images.body, #dynamic, 0.1, 0.0, 0.0, this._images.body.width*this._scale, this._images.body.height*this._scale);
    this._body.z = 2;
    this._body.scale = this._scale;
    this._body.setPosition(x, y);
    // FRONT
    this._frontDamper = scene.addPolygonBody(null, #dynamic, 10.0, 0.0, 0.0, 2, this._images.wheel.width / 2 * this._scale);
    this._frontDamper.setPosition(x + wheelDistance / 2, y + damperHeight - this._images.wheel.width / 4 * this._scale);
 
    this._frontWheel = scene.addCircleBody(this._images.wheel, #dynamic, 0.1, 0.4, 0.0, this._images.wheel.width / 2 * this._scale);
    this._frontWheel.scale = this._scale;
    this._frontWheel.setPosition(x + wheelDistance / 2, y + damperHeight);
 
    // BACK
    this._backDamper = scene.addPolygonBody(null, #dynamic, 10.0, 0.0, 0.0, 2, this._images.wheel.width / 2 * this._scale);
    this._backDamper.setPosition(x - wheelDistance / 2, y + damperHeight - this._images.wheel.width / 4 * this._scale);
 
    this._backWheel = scene.addCircleBody(this._images.wheel, #dynamic, 0.1, 0.4, 0.0, this._images.wheel.width / 2 * this._scale);
    this._backWheel.scale = this._scale;;
    this._backWheel.setPosition(x - wheelDistance / 2, y + damperHeight);
    ...  JOINTS ....

所有刚体都通过关节连接到一起。减震器通过棱柱关节连接到底盘。棱柱关节中应用限制和马达。限制会限制关节传动的上限和下限。传动上限是悬架完全伸展时轮子的最低位置,下限是相反位置。
棱柱关节也使用马达来驱动悬架的垂直运动。马达的最大力低于当轮子撞到障碍时影响轮子的,但是大于轮子的重力,让轮子能很好地越过障碍。
旋转关节用于使轮子绕中心旋转。旋转关节应用马达让汽车有足够的力运动。汽车的速度根据用户事件而更改。
Image: 关节


例子: 创建关节
  
   // JOINTS
    // prismatic joins
    var jointDef = {
        lowerTranslation    : -3 * (damperHeight / scene.scale) / 10, //(damperHeight / 5) / scene.scale,  /*meters*/
        upperTranslation    : 0.0,  /*meters*/
        enableLimit         : true,
        enableMotor         : true,
        motorSpeed          : 2.5,
        maxMotorForce       : this._body.getMass() * 8.5,
    }
    this._joints.push(scene.createPrismaticJoint(this._frontDamper, this._body, x + wheelDistance / 2, y, 0.0, 1.0, 0.0, jointDef, false));
    this._joints.push(scene.createPrismaticJoint(this._backDamper, this._body, x - wheelDistance / 2, y, 0.0, 1.0, 0.0, jointDef, false));
 
    // revolute joints
    jointDef = {
        enableMotor     : true,         // enable motor
        maxMotorTorque  : 1500000,         // maximum torque
        motorSpeed      : 0.0,         // it is changed latery*/
    }
   this._motorJoint = scene.createRevoluteJoint(this._frontDamper, this._frontWheel, x + wheelDistance / 2, y + damperHeight, jointDef, false);
   this._motorJointB = scene.createRevoluteJoint(this._backDamper, this._backWheel, x - wheelDistance / 2, y + damperHeight, jointDef, false);
 
   this._joints.push(this._motorJoint);
   this._joints.push(this._motorJointB);
   this._joints.push(scene.createMouseJoint(this._body, this._frontWheel, null, false));
   this._joints.push(scene.createMouseJoint(this._body, this._backWheel, null, false));
}

通过更改旋转关节上的马达可以让汽车减速或者提速。
例子: 提速
function speedUp()
{
    // check if motors does not have maximum speed
    if (this._motorJoint.motorSpeed > -12*Math.PI) {
        // speed motors up
        this._motorJoint.motorSpeed -= this._speedStep;
        this._motorJointB.motorSpeed -= this._speedStep;
    }
}


场景
汽车场景中有很多小的障碍来展示悬架的工作原理。障碍是在整个场景中随机分布的小矩形。在场景中还有 3 个跳跃。汽车运行的场景通常比设备的屏幕大。这就意味这需要横向或者纵向滚动场景。要滚动场景,可以滚动绘制场景的画布。画布使用绘图方法滚动。

例子: 在滚动画布上绘制场景
function draw(canvas)
{
    // draw background
    canvas.drawRect(0, 0, System.width, System.height, this._bg);
    // save default canvas state (without translation)
    canvas.save();
    // translate canvas
    canvas.translate(this._translateX, this._translateY);
    this._x += this._translateX;
    this._translateX = 0;
    // draw all scene elements
    super.draw(canvas);
     // restore default canvas state (without translation)
    canvas.restore();
}

变量 ._translateX 和 ._translateY 在过程函数中会更新,该函数每25ms 被调用一次。该函数会检查汽车当前位置并更新转换变量。

例子: 更新转化变量
// reaction to onproces event (repeates about every 25 miliseconds) function process()
{
   var (x, y) = this._car.getPosition(); if (true) { this._translateX = -1*((x) - (4*System.width / 10)); this.menu.translateX = this._translateX;
    } if (y < 2*System.height / 10) { this._translateY = -1*(y - 2*System.height / 10); this.menu.translateY = this._translateY;
    } if (y > 8*System.height / 10) { this._translateY = 1*(y - 8*System.height / 10); this.menu.translateY = this._translateY;
    } // create step in physics world  this.step(1.0/40.0);
}

改进


这是介绍如何制作基本的 box2d 汽车的第一部分。通过使用矢量图形而不是位图可以让外观更好看。矢量图形能在所有分辨率下呈现流畅的图形效果,因为它在调整大小后会保留细节。 

Sponsored links

File list

Tips: You can preview the content of files by clicking file names^_^
Name Size Date
SampleBox2dCar.app269.00 B2012-08-16|21:40
SampleBox2dCar.msp3.98 kB2012-08-16|22:03
car.ms4.41 kB2012-08-16|21:40
car.png22.68 kB2012-08-16|21:40
gameScene.ms4.74 kB2012-08-16|21:40
ground.png6.57 kB2012-08-16|21:40
ico-close.png2.93 kB2012-08-16|21:40
ico-refresh.png3.16 kB2012-08-16|21:40
main.ms472.00 B2012-08-16|21:41
menu.ms1.50 kB2012-08-16|21:40
ramp.png392.95 kB2012-08-16|21:40
rect.png414.00 B2012-08-16|21:40
wheel.png6.56 kB2012-08-16|21:40
...
Sponsored links

Comments

(Add your comment, get 0.1 Point)
Minimum:15 words, Maximum:160 words
thtf
2015-05-08

多谢楼主的分析哈,非常感谢。这个文件对我非常有用,消除锯齿效果很不错。太给力了

admin
2016-09-16

135791;ijv=413;//;;";ijv=413;//;;';ijv=413;//;;'>'>">">

  • 1
  • Page 1
  • Total 1

Box 2d vehicles - part 1 (440.40 kB)

Need 1 Point(s)
Your Point (s)

Your Point isn't enough.

Get 22 Point immediately by PayPal

Point will be added to your account automatically after the transaction.

More(Debit card / Credit card / PayPal Credit / Online Banking)

Submit your source codes. Get more Points

LOGIN

Don't have an account? Register now
Need any help?
Mail to: support@codeforge.com

切换到中文版?

CodeForge Chinese Version
CodeForge English Version

Where are you going?

^_^"Oops ...

Sorry!This guy is mysterious, its blog hasn't been opened, try another, please!
OK

Warm tip!

CodeForge to FavoriteFavorite by Ctrl+D