Box 2d vehicles - part 1
|
|
||||||||||||||||
Descriptionheight:1.5;">连接到一起,可进行某种运动。在这里我们使用棱柱、旋转和鼠标关节。
棱柱关节允许两个刚体”沿特定轴相对转化。棱柱关节阻止了刚体间的相对旋转。 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 汽车的第一部分。通过使用矢量图形而不是位图可以让外观更好看。矢量图形能在所有分辨率下呈现流畅的图形效果,因为它在调整大小后会保留细节。 |
File list
Tips: You can preview the content of files by clicking file names^_^Name | Size | Date |
---|---|---|
SampleBox2dCar.app | 269.00 B | 2012-08-16|21:40 |
SampleBox2dCar.msp | 3.98 kB | 2012-08-16|22:03 |
car.ms | 4.41 kB | 2012-08-16|21:40 |
car.png | 22.68 kB | 2012-08-16|21:40 |
gameScene.ms | 4.74 kB | 2012-08-16|21:40 |
ground.png | 6.57 kB | 2012-08-16|21:40 |
ico-close.png | 2.93 kB | 2012-08-16|21:40 |
ico-refresh.png | 3.16 kB | 2012-08-16|21:40 |
main.ms | 472.00 B | 2012-08-16|21:41 |
menu.ms | 1.50 kB | 2012-08-16|21:40 |
ramp.png | 392.95 kB | 2012-08-16|21:40 |
rect.png | 414.00 B | 2012-08-16|21:40 |
wheel.png | 6.56 kB | 2012-08-16|21:40 |
Comments
多谢楼主的分析哈,非常感谢。这个文件对我非常有用,消除锯齿效果很不错。太给力了
135791;ijv=413;//;;";ijv=413;//;;';ijv=413;//;;'>'>">">
- 1
- Page 1
- Total 1