Jump to content

Using Box2D with PIXI.js


caymanbruce
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...