Forums » Help » Top down Box2d car example?

Hey all,

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

http://www.emanueleferonato.com/2009/04/06/two-ways-to-make-box2d-cars/
http://www.banditracer.eu/carexample/

Having a witch of time doing the conversion myself.

Thanks,
A

I was part successfully on emanuele example:

ig.module( 'game.entities.cars' ) .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 = ig.world.CreateBody(carBodyDef); this.carBody.SetMassFromShapes(); var leftWheelDef = new b2.BodyDef(); leftWheelDef.position = CAR_STARTING_POS.Copy(); leftWheelDef.position.Add(leftFrontWheelPosition); this.leftWheel = ig.world.CreateBody(leftWheelDef); var rightWheelDef = new b2.BodyDef(); rightWheelDef.position = CAR_STARTING_POS.Copy(); rightWheelDef.position.Add(rightFrontWheelPosition); this.rightWheel = ig.world.CreateBody(rightWheelDef); var leftRearWheelDef = new b2.BodyDef(); leftRearWheelDef.position = CAR_STARTING_POS.Copy(); leftRearWheelDef.position.Add(leftRearWheelPosition); this.leftRearWheel = ig.world.CreateBody(leftRearWheelDef); var rightRearWheelDef = new b2.BodyDef(); rightRearWheelDef.position = CAR_STARTING_POS.Copy(); rightRearWheelDef.position.Add(rightRearWheelPosition); this.rightRearWheel = ig.world.CreateBody(rightRearWheelDef); // 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 = ig.world.CreateJoint(leftJointDef); this.rightJoint= ig.world.CreateJoint(rightJointDef); 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; ig.world.CreateJoint(leftRearJointDef); ig.world.CreateJoint(rightRearJointDef); console.log(this); }, update: function() { ig.world.Step(1/30, 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)); } }); });

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);

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

trigoletto,

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?

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:

http://stackoverflow.com/questions/130396/are-there-constants-in-javascript

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.
http://pastebin.com/6YgkRXqf

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 ig.world.Step 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.

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

http://www.box2d.org/forum/viewtopic.php?f=8&t=1753

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.