Using Box2D with PIXI.js

[caymanbruce]

I am using Box2D physics engine with PIXI.js as the renderer. But I have trouble using it correctly. Box2D is based in MKS(Meters, Kilograms and seconds) But Pixi.js renders everything in pixel. So I need to convert from MKS to pixel when I render sprites/movements.  I don't know how to do this properly.

I have seen some examples saying I just need to convert the positions using a scale factor in PIXI.js (see this https://chrisbranch.co.uk/2014/11/debugging-box2d-with-pixi-js/). But someone also recommend me to just use stage.scale so that everything in the stage will scale to the particular ratio I choose at the beginning. Anyone has similar experience before? How to render Box2D-based sprites nicely using PIXI.js?

[megmut]

Yes, I have experienced this before. The way I handled it was by adjusting the pixel to meter by a ratio of 100. So when you create your fixtures, create the sizes at pixels * 100, then on the world step, update the texture positions by a factor of 100.

There is a good example of this on this thread: however I don't know if the download link still works.

 here is an example of some of my calculations:

this.bodyDef.position.Set(9, this.game.height / 100 + 1);
this.world.CreateBody(this.bodyDef).CreateFixture(this.polyFixture);
...
this.circleFixture.shape.SetRadius(s / 2 / 100);
body.CreateFixture(this.circleFixture);
..
let position = body.GetPosition();
sprite.position.x = position.x * 100;
sprite.position.y = position.y * 100;
sprite.rotation = body.GetAngle();
..
let x = points[t * 2];
let y = points[t * 2 + 1];
vec.Set((x / 100) * 0.5, (y / 100) * 0.5);
vecs[t] = vec;

This code is taken out of context, so I don't expect anybody to understand what's going on, just an example of how I convert physics positions, to texture positions.

Hope this helps!

[caymanbruce]

19 minutes ago, megmut said:

Yes, I have experienced this before. The way I handled it was by adjusting the pixel to meter by a ratio of 100. So when you create your fixtures, create the sizes at pixels * 100, then on the world step, update the texture positions by a factor of 100.

There is a good example of this on this thread: however I don't know if the download link still works.

 here is an example of some of my calculations:

this.bodyDef.position.Set(9, this.game.height / 100 + 1);
this.world.CreateBody(this.bodyDef).CreateFixture(this.polyFixture);
...
this.circleFixture.shape.SetRadius(s / 2 / 100);
body.CreateFixture(this.circleFixture);
..
let position = body.GetPosition();
sprite.position.x = position.x * 100;
sprite.position.y = position.y * 100;
sprite.rotation = body.GetAngle();
..
let x = points[t * 2];
let y = points[t * 2 + 1];
vec.Set((x / 100) * 0.5, (y / 100) * 0.5);
vecs[t] = vec;

This code is taken out of context, so I don't expect anybody to understand what's going on, just an example of how I convert physics positions, to texture positions.

Hope this helps!

Thank you.  That's really helpful. I will need to do everything physical in MKS unit. Then render sprites using the position of the body times scaling factor. That really works. It just requires me to be extremely careful to not break anything.