Forums » Code » "Box2D Made Easy" Plugin

Summary:

Using the official plugin to make my first Box2D game, I found that things were way more complicated that they needed to be. This plugin aims to fix that as well as address several shortcomings.

Plugin and documentation available here.


Functionality that didn't work, that does now:

.pos when updated changes the entity position within the Box2D world.*
.vel is not ignored anymore and can be used to move entities.*
.maxVel can be used to limit velocities.*
.touches now tells you if two entities are touching.
.standing works.
.type, checkAgainst, .check and .collideWith work just like before.
.gravityFactor can be set so gravity affects a given entity more or less.
.last contains accurate values.
.bounciness works exactly how you'd expect.
.friction is honored.

Entities feel and act like they did before.
Slope support has been added too.


Usage Example:

Official Box2D Plugin:

entity.pos.y = 100;
var oldPos = entity.body.GetPosition();
var yScaled = entity.pos.y * Box2D.SCALE;
var newPos = new Box2D.Common.Math.b2Vec2(oldPos.x, yScaled);
entity.body.SetPosition(newPos);

This Plugin:

entity.pos.y = 100;

Thanks collinhover, quidmonkey, dominic, Xatruch, pixelpusher, and various others, whose posts and code has helped probably more than they realize.

*: converting from pixels into Box2D scale is handled automatically.

Very cool, glad to help.

Why do you define getters and setters in the entity init as opposed to for the entity prototype? Does this version of box2d pool vectors, or is a new one being created every time the pos x or y is set?

Why do you define getters and setters in the entity init as opposed to for the entity prototype?

The initial values of properties such as isBullet are applied during init to the Box2D body before the property is overloaded with a getter and setter.

This allows you to define entities like this:

EntityExample = ig.Entity.extend({
    isBullet: true,
    ...
});

Does this version of box2d pool vectors, or is a new one being created every time the pos x or y is set?

If there is pooling going on, it would be at the Box2DWeb level, not my own doing.

Some time ago while I was contributing to threeJS, Object.defineProperty came up and it was mentioned that generally it is avoided because it is rather slow. Have you had a chance to test its performance hit?

I asked about pooling because it appears that every time pos x/y is set, you're creating a new vector. Perhaps the box2d you're using pools internally, but box2d is known for just the opposite and that creates a huge amount of garbage. Garbage isn't as big a deal these days, but creating a new vector for every time x/y is set seems like it could add up?

Quote from collinhover
Some time ago while I was contributing to threeJS, Object.defineProperty came up and it was mentioned that generally it is avoided because it is rather slow. Have you had a chance to test its performance hit?

Yes, I&039;ve heard that as well. So far my games have been running at a steady 60 frames per second. And when I made the switch from native-methods to using #defineProperty, the latency in debug did not really change. It's possible I'm not pushing the library hard enough though?

Garbage isn't as big a deal these days, but creating a new vector for every time x/y is set seems like it could add up?

I was told recently, I just forget where I heard it, that it is better practice to create a new vector when setting the position than to modify the existing one. I couldn't tell you why, but I see your point and am certainly open to optimization especially if there is a noticeable hit on performance.

Link to jsperf of object.defineProperty.

Looks like defineProperty is getting faster in very recent Chrome builds but across almost every other browser (and other Chrome builds) using a "normal" style (obj.catpants = 'thing') is more performant.

Which is too bad.

I cannot get any of the collision part of this plugin to work at all. touches, check, and collideWith just don't return anything when a collision happens. Is this just something I'm doing wrong or is someone else having issues too?

Quote from JamieRushworth
I cannot get any of the collision part of this plugin to work at all. touches, check, and collideWith just don't return anything when a collision happens. Is this just something I'm doing wrong or is someone else having issues too?

It should all just work after you require the plugin. Mind sharing your main.js and the code of one of your entities?

Sure, this is my main.js http://pastebin.com/1ZsZJ2BZ

laser.js http://pastebin.com/UzmbkRUz

paddle.js http://pastebin.com/Zfbw2bPb

I've tried turning them both into sensors and just the one into a sensor but still nothing. I'm pretty sure the code works in standard Impact too when you take all the box2d stuff out. Of course it's very likely that I'm missing something obvious.

Quote from JamieRushworth
Sure, this is my main.js http://pastebin.com/1ZsZJ2BZ

laser.js http://pastebin.com/UzmbkRUz

paddle.js http://pastebin.com/Zfbw2bPb

I&039;ve tried turning them both into sensors and just the one into a sensor but still nothing. I'm pretty sure the code works in standard Impact too when you take all the box2d stuff out. Of course it's very likely that I'm missing something obvious.

1. In #init of game.js there is no need to define gravity as a vector. Just set .gravity like you would for any other Impact game. I usually use 100. You can change gravity for entities individually using .gravityFactor.

2. Also in init, there is no need to create the world. This is also done for you when you call .loadLevel. Is there any reason why you won't be loading a level?

Addressing these two things will fix your issue. The reason it doesn&039;t work now is because the collision contact listeners are not set until the level (and new world) is created. You could call #ig.game.setupContactListener(); and skip loading a level if you really wanted.

Ah okay, that has sorted it now, thank you very much for your time.

Hi, Joncom!

I have one problem with capsule.js in your plugin . EntityCapsule appears in weltmeister but when i launch my game i get an error Uncaught Assertion Failed lib.js:156 .

Thanks!

@AzZzOne: Make sure that the entity width and height are not equal.

I changed it and it's working now thank you! But it seems like the friction doesn't affect the capsule..What should i do to make it work ?

EDIT:

@AzZzOne: Make sure you're using the latest entity.js and capsule.js because I just pushed some changes related to friction.

You can define friction like this:

ExampleEntity = ig.Entity.extend({

    friction: { x: 1, y: 1 },

    init: function(x, y, settings) {
        this.parent(x, y, settings);
        // ...
    }

});

You could change the friction value on the entity at any time like this:

entity.friction.x = newValue;

Note: Box2D does not distinguish between X and Y frictions. There is only one friction value, so you can set the friction with the line above, or like this:

entity.friction.y = newValue;

Both will do the same thing, and only one is necessary.

Thanks for your reply! I did exactly what you said but it didn't help. I searched the forums and it turned out that Box2d does not support rolling resistance.

I suggest following:

1) if you are trying to create a player entity in the shape of capsule you can only add this.isFixedRotation = true so the friction can affect your player properly:

ExampleEntity = ig.Entity.extend({

 

    init: function(x, y, settings) {
        this.parent(x, y, settings);
        this.isFixedRotation = true;
    }

});

2) if you are trying to make friction affects your other circle objects you can add the counterForce in your update function:

update: function(){
			var frictionFactor = 0.1;
			 
		 if(this.vel.x!=0){ 
		 var counterForce = -this.vel.x*frictionFactor ;
	 
      this.body.ApplyForce(new Box2D.Common.Math.b2Vec2(counterForce,0), this.body.GetPosition() )
			 }
			 this.parent();
		}

So the frictionFactor is your friction now.

@AzZzOne: Sounds like you found your own solution. Cool! However I'm a little confused why you would need a counter-force in the first place. In my Box2D game, I can throw a "ball" with high friction which when it hits the ground stops moving quickly. I can throw another "ball" with low friction which when it hits the ground keeps moving for much longer.

Do you mean why i'm using counterForce with player? I'm trying to say that we can use only this.isFixedRotation = true; when we are trying make friction affects capsule ( in the case when capsule is our player's shape ) And we don't use counterForce in this case. We only use it when we create something with e.g. circle.js in your plugin so we can make circle actually roll and get more accurate physics ( here we set this.isFixedRotation = false; )

In your example ( with this.isFixedRotation = true i guess) you will get the ball that won't actually spin. It will be "dragged" along the ground.. Sorry if it was confusing)

@AzZzOne: So to get friction to work properly...

A capsule entity with:
- isFixedRotation == true needs a counter-force or no?
- isFixedRotation == false needs a counter-force or no?

A circle entity with:
- isFixedRotation == true needs a counter-force or no?
- isFixedRotation == false needs a counter-force or no?

A capsule entity:
- isFixedRotation == true

Does not need a counter-force

A circle entity:
- isFixedRotation == false

Needs a counter-force

-----------------------------------------------------------------------

Of course you can use isFixedRotation == true without counter-force in both cases and you get a friction but for the circle entity i recommend use counter-force

@AzZzOne: Interesting. Thanks for sharing.

Hi, Joncom!

Can i somehow detect when entity touches collision map with your plugin?

Depends what you mean...

Do you want to check if the entity is standing on something solid?

Do you want to check if the player is touching a specific body?

Do you want to check if the player is touching any non-entity body?

I mean check if the player is touching any non-entity body

Joncom,

I'm building a top down racer but so far havent been able to get the drift of the car right.

I came across this topic..

http://impactjs.com/forums/help/top-down-box2d-car-example

Would you be able to give me some clues on how to implement this with your plugin?

Hey Rungo73. I responded to your thread.

Hello, I'm trying to combine this amazing plugin with impact-crater to run box2d on the server. And I'm getting this: /var/www/game/lib/plugins/joncom/box2d/separator.js:20
var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;

Why lib.js is not loaded correctly.

@jumper: Are you sure that's what the "error" says? I see a file path, and a line of code, but what about them? I suspect there's more information being reported by your browser. How, for example, do you know that lib.js is part of the problem?

also getting an error using this plugin:

uncaught exception: Unresolved (or circular?) dependencies. Most likely there's a name/path mismatch for one of the listed modules or a previous syntax error prevents a module from loading:
game.main (requires: game.levels.level1, plugins.joncom.box2d.game)
plugins.joncom.box2d.game (requires: plugins.joncom.box2d.lib, plugins.joncom.box2d.separator)
game.levels.level1 (requires: game.entities.player)
plugins.joncom.box2d.separator (requires: plugins.joncom.box2d.lib)
game.entities.player (requires: plugins.joncom.box2d.entity)
plugins.joncom.box2d.entity (requires: plugins.joncom.box2d.game)

is there another problem that's causing this or am I missing something staring me in the face?

edit:
another error I missed stating that a reference to global is undefined in lib.js:467.

@dlkulp: I suspect there is an issue with level1, but would you mind sharing your game code, except for the Impact library, so I could take a look?