This forum is read only and just serves as an archive. If you have any questions, please post them on

1 decade ago by Envoy

Hey all,

Was just curious to know if anyone had successfully ported any of the Box2d top-down car examples out there?

Having a witch of time doing the conversion myself.


1 decade ago by trigoletto

I was part successfully on emanuele example:

/><br />
<br />
1. It seems that somehow a force is been applied to the car, it keeps rotating on his own axis. <br />
<br />
2. Idk why this blue box and the car are separeted, they are the same entity, created in the same function.<br />
<br />
3.  The steering just works after I hit the blue box off the screen (I know, wtf).<br />
<br />
Hope it helps, toughts are welcome<br />
<br />
<pre class= ig.module( '' ) .requires ( 'impact.entity', 'plugins.box2d.entity' ) .defines(function(){ const MAX_STEER_ANGLE = Math.PI/3; const STEER_SPEED = 1.5; const SIDEWAYS_FRICTION_FORCE = 0; const HORSEPOWERS = 400 const CAR_STARTING_POS = new b2.Vec2(5,5); const leftRearWheelPosition = new b2.Vec2(-1.5,1.90); const rightRearWheelPosition = new b2.Vec2(1.5,1.9); const leftFrontWheelPosition = new b2.Vec2(-1.5,-1.9); const rightFrontWheelPosition = new b2.Vec2(1.5,-1.9); //var engineSpeed; //var steeringAngle; // //var carBody; //var leftRearWheel; //var rightRearWheel; //var leftWheel; //var rightWheel; //var leftJoint; //var rightJoint; EntityCars = ig.Box2DEntity.extend({ //march: 0, //maxVelPerMarch: [0,50,80,110,140,200], //size: {x:96, y:96}, checkAgainst: ig.Entity.TYPE.NONE, collides:ig.Entity.COLLIDES.NEVER, //animSheet: new ig.AnimationSheet('media/playercar.png',96,96), createBody: function(x,y,settings) { this.parent(x,y,settings); this.gravityFactor=0; //this.addAnim( 'car', 1, [0]); this.engineSpeed=0; this.steeringAngle=0; // define our body var carBodyDef = new b2.BodyDef(); carBodyDef.linearDamping = 1; carBodyDef.angularDamping = 1; carBodyDef.position = CAR_STARTING_POS.Copy() this.carBody =; this.carBody.SetMassFromShapes(); var leftWheelDef = new b2.BodyDef(); leftWheelDef.position = CAR_STARTING_POS.Copy(); leftWheelDef.position.Add(leftFrontWheelPosition); this.leftWheel =; var rightWheelDef = new b2.BodyDef(); rightWheelDef.position = CAR_STARTING_POS.Copy(); rightWheelDef.position.Add(rightFrontWheelPosition); this.rightWheel =; var leftRearWheelDef = new b2.BodyDef(); leftRearWheelDef.position = CAR_STARTING_POS.Copy(); leftRearWheelDef.position.Add(leftRearWheelPosition); this.leftRearWheel =; var rightRearWheelDef = new b2.BodyDef(); rightRearWheelDef.position = CAR_STARTING_POS.Copy(); rightRearWheelDef.position.Add(rightRearWheelPosition); this.rightRearWheel =; // define our shapes var boxDef = new b2.PolygonDef(); boxDef.SetAsBox(1.5,2.5); boxDef.density = 1; this.carBody.CreateShape(boxDef); //Left Wheel shape var leftWheelShapeDef = new b2.PolygonDef(); leftWheelShapeDef.SetAsBox(0.2,0.5); leftWheelShapeDef.density = 1; this.leftWheel.CreateShape(leftWheelShapeDef); //Right Wheel shape var rightWheelShapeDef = new b2.PolygonDef(); rightWheelShapeDef.SetAsBox(0.2,0.5); rightWheelShapeDef.density = 1; this.rightWheel.CreateShape(rightWheelShapeDef); //Left Wheel shape var leftRearWheelShapeDef = new b2.PolygonDef(); leftRearWheelShapeDef.SetAsBox(0.2,0.5); leftRearWheelShapeDef.density = 1; this.leftRearWheel.CreateShape(leftRearWheelShapeDef); //Right Wheel shape var rightRearWheelShapeDef = new b2.PolygonDef(); rightRearWheelShapeDef.SetAsBox(0.2,0.5); rightRearWheelShapeDef.density = 1; this.rightRearWheel.CreateShape(rightRearWheelShapeDef); this.carBody.SetMassFromShapes(); this.leftWheel.SetMassFromShapes(); this.rightWheel.SetMassFromShapes(); this.leftRearWheel.SetMassFromShapes(); this.rightRearWheel.SetMassFromShapes(); // Joints var leftJointDef = new b2.RevoluteJointDef(); leftJointDef.Initialize(this.carBody, this.leftWheel, this.leftWheel.GetWorldCenter()); leftJointDef.enableMotor = true; leftJointDef.maxMotorTorque = 100; var rightJointDef = new b2.RevoluteJointDef(); rightJointDef.Initialize(this.carBody, this.rightWheel, this.rightWheel.GetWorldCenter()); rightJointDef.enableMotor = true; rightJointDef.maxMotorTorque = 100; this.leftJoint =; this.rightJoint=; var leftRearJointDef = new b2.PrismaticJointDef(); leftRearJointDef.Initialize(this.carBody, this.leftRearWheel, this.leftRearWheel.GetWorldCenter(), new b2.Vec2(1,0)); leftRearJointDef.enableLimit = true; leftRearJointDef.lowerTranslation = leftRearJointDef.upperTranslation = 0; var rightRearJointDef = new b2.PrismaticJointDef(); rightRearJointDef.Initialize(this.carBody, this.rightRearWheel, this.rightRearWheel.GetWorldCenter(), new b2.Vec2(1,0)); rightRearJointDef.enableLimit = true; rightRearJointDef.lowerTranslation = rightRearJointDef.upperTranslation = 0;;; console.log(this); }, update: function() {, 8); this.killOrthogonalVelocity(this.leftWheel); this.killOrthogonalVelocity(this.rightWheel); this.killOrthogonalVelocity(this.leftRearWheel); this.killOrthogonalVelocity(this.rightRearWheel); // Key pressed if( ig.input.pressed('accelerate') ) { this.carBody.WakeUp(); this.engineSpeed = -HORSEPOWERS; console.log('enginespeed:'+this.engineSpeed); } if( ig.input.pressed('brake') ) { this.engineSpeed = HORSEPOWERS; } if( ig.input.pressed('turnleft') ) { this.steeringAngle = -MAX_STEER_ANGLE; console.log('steeringangle:'+this.steeringAngle); } if( ig.input.pressed('turnright') ) { this.steeringAngle = +MAX_STEER_ANGLE; console.log('steeringangle:'+this.steeringAngle); } // Key released if(( ig.input.released('accelerate') ) || (ig.input.released('brake'))) { this.engineSpeed = 0; console.log('enginespeed:'+this.engineSpeed); } if(( ig.input.released('turnleft') ) || (ig.input.released('turnright'))) { this.steeringAngle = 0; console.log('steeringangle:'+this.steeringAngle); } var ldirection = this.leftWheel.GetXForm().R.col2.Copy(); var rdirection = this.rightWheel.GetXForm().R.col2.Copy() ldirection.Multiply(this.engineSpeed); rdirection.Multiply(this.engineSpeed); this.leftWheel.ApplyForce(ldirection, this.leftWheel.GetPosition()); this.rightWheel.ApplyForce(rdirection, this.rightWheel.GetPosition()); //Steering var mspeed; mspeed = this.steeringAngle - this.leftJoint.GetJointAngle(); this.leftJoint.SetMotorSpeed(mspeed * STEER_SPEED); mspeed = this.steeringAngle - this.rightJoint.GetJointAngle(); this.rightJoint.SetMotorSpeed(mspeed * STEER_SPEED); this.parent(); }, killOrthogonalVelocity: function(targetBody) { var localPoint = new b2.Vec2(0,0); //console.log(targetBody); var velocity = targetBody.GetLinearVelocityFromLocalPoint(localPoint); var sidewaysAxis = targetBody.GetXForm().R.col2.Copy(); sidewaysAxis.Multiply(b2.Math.Dot(velocity,sidewaysAxis)) targetBody.SetLinearVelocity(sidewaysAxis);//targetBody.GetWorldPoint(localPoint)); } }); });

1 decade ago by trigoletto

Apparently steering was not working because the wheels were touching the car's body. Just changed the positions and it worked fine!

const leftRearWheelPosition = new b2.Vec2(-1.9,1.90);
const rightRearWheelPosition = new b2.Vec2(1.9,1.9);
const leftFrontWheelPosition = new b2.Vec2(-1.9,-1.9);
const rightFrontWheelPosition = new b2.Vec2(1.9,-1.9);

1 decade ago by bitmapshades

Thanks for posting this. Can you post a working example at all?

1 decade ago by BennyT


What is the value in defining variables as const - I have not really seen anyone do this in impact or javascript for that matter before.

Performance gains possibly?

1 decade ago by mrfox

There is a const keyword in Javascript but I think it has spotty browser support, not sure how up to date that info is though:

1 decade ago by mrfox

I worked on this for a day or so, and found some information which may be helpful for anyone coming across this looking to get emanuele's code working in Impact.

Here is my player entity which defines the vehicle.

Make sure you enable debug drawing in the game class by including &039;plugins.box2d.debug' and the code #this.debugDrawer.draw(); in your draw function.

I made a few changes from Trigoletto's code.
- I removed his call to in the update of my player because that is handled already in the game class.
- I renamed his body definition to bodyDef so it would overwrite the box2dEntity class this is extended from. You still get this second box drawing because the parent class is also receiving a createBody call, you can comment it out of your parent class or leave it in and not draw it, up to you.

I also found a post in the box2d forums which indicates that there is a bug in the box2d source:

In a separate post this bug is blamed for the strange acceleration when turning that the original code experiences in impact's implementation of box2d. I tried manually hunting down the bug as recommended in the forum post and found it on line 211 of box2d's lib.js file. Fixing it seems to have repaired a lot of the strange handling issues though from here I will be tinkering with the values a lot - if you're going to use the code I posted it's definitely just a starting point.
Page 1 of 1
« first « previous next › last »