Box2d libgdx, a bit confused about the pixels to meters stuff

Question

So I understand the concept. The idea is that box2d more or less works in meters, so you need to do a conversion from pixels to it. Makes sense. I was following the tutorial/intro to box2d here. It mentions to do the conversion and gives you some example amounts to use. Now, that's all well and good, but I find when I'm using such techniques, the debugger box doesn't seem to render where they should. The collision does work as expected however.

In my GameScreen class, here's how I initialize the ground:

ground = new BodyDef();
// set the position half way up the ground
ground.position.set(0,16 * GameScreen.WORLD_TO_BOX);
groundBody = world.createBody(ground);
groundShape = new PolygonShape();
// make the height 16px so it doubles to 32
groundShape.setAsBox(Gdx.graphics.getWidth() * GameScreen.WORLD_TO_BOX, 16.0f * GameScreen.WORLD_TO_BOX);
groundBody.createFixture(groundShape, 0.0f);

My render method in that screen is like so:

public void render(float delta) {
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
    camera.update();
    stateTime += Gdx.graphics.getDeltaTime();

    batch.begin();
    batch.draw(background, 0, Gdx.graphics.getHeight() - 512, 512, 512);
    batch.draw(trailingBackground, 512, Gdx.graphics.getHeight() - 512);
    int heightToCover = Gdx.graphics.getHeight() - 512;
    int widthToCover = Gdx.graphics.getWidth();
    for(int w = 0; w < widthToCover; w += 32) {
        for(int h = 0; h < heightToCover; h += 32) {
            batch.draw(lightBackgroundTile, w, h, 32, 32);
        }
    }
    player.update();
    player.render(stateTime, batch);
    batch.end();
    levels.get(currentLevel).render(camera);

    // physics updates
    world.step(1/60f, 6, 2);
    debugRenderer.render(world, camera.combined);
}

Here's the constructor of the player class, so you can see how im setting up its collision box2d objects. I also pasted the update method which is called in the above render loop to adjust the sprites position.

public Player(int x, int y, World world) {
    super();
    playerTexture = new Texture(Gdx.files.internal("assets/hero.png"));
    init(x, y, 128, 128, playerTexture, false, world);

    bodyDef = new BodyDef();
    bodyDef.type = BodyType.DynamicBody;
    bodyDef.position.set(x * GameScreen.WORLD_TO_BOX, y * GameScreen.WORLD_TO_BOX);
    body = getWorld().createBody(bodyDef);
    collisionBox = new PolygonShape();
    collisionBox.setAsBox(32 * GameScreen.WORLD_TO_BOX, 64 * GameScreen.WORLD_TO_BOX, new Vector2(64 * GameScreen.WORLD_TO_BOX, 64 * GameScreen.WORLD_TO_BOX), 0.0f);

    FixtureDef fixtureDef = new FixtureDef();
    fixtureDef.shape = collisionBox;
    fixtureDef.density = 10f; 
    fixtureDef.friction = 0.4f;
    fixtureDef.restitution = 0f;

    body.createFixture(fixtureDef);
    collisionBox.dispose();

    addFrame(0, 0, 128, 128);
}

public void update() {
    this.setX((int) ((body.getPosition().x) * GameScreen.BOX_TO_WORLD));
    this.setY((int) ((body.getPosition().y) * GameScreen.BOX_TO_WORLD));
}

Now, when I remove the multiplication of those static floats in the various calculations, sizes, etc, the collision remains correct and the debugger box shows up. However passing the raw pixels to box2d feels wrong. Is there something I'm missing here as to why the debugging boxes don't show up as is?

I remember having a heck of a time with this. If you keep your game physics running in meter scale to be true to box2d, I think you only need to use this to scale down your sprites to match the body's size and compensate with the camera. It becomes really difficult when trying to use the particle system or scene2d classes at that scale. — Chuck D
I see. Do you mean that you haven't modified the X & Y positioning values but just the sizes of the various box2d shapes? — agmcleod
Well, it got pretty involved but my stuff was working well. There are a bunch of issues that came up because different aspect ratios will cause visual issues (circles look oval) type stuff. It was easier to just paste some links in an answer. I had a custom class for any type of game object that involved a box2d body and sprite, using overloads for render/initphysics, etc.. could serialize entire game/scene and iterate over all objects calling render in update loop. The pastebin link might be helpful as to how i was doing it. — Chuck D

Chuck D Chuck D · Accepted Answer · 2013-01-08T22:43:19

I do like you are doing but might be a little different.

Might be a little overkill but here's my jucl port

jucl/Android - pastebin

Then I just have utility classes ie:

public class Pixel {

    public static float toMeter(float pixels) {
        return (float)LengthConversions.Pixel2SIf(pixels);
    }

    public static Vector2 toMeter(Vector2 vecPixel) {
        return new Vector2(Pixel.toMeter(vecPixel.x), Pixel.toMeter(vecPixel.y));
    }
}

public class Meter {

    public static final float METERS_PER_PIXEL = (float) LengthConversions.SI_PIXEL;

    public static float toPixel(float meter) {
        return (float)LengthConversions.SI2Pixelf(meter);
    }
}

In my initialize:

int graphicsWidth = Gdx.graphics.getWidth();
int graphicsHeight = Gdx.graphics.getHeight();

CAMERA_WIDTH_METERS = Pixel.toMeter(graphicsWidth);
CAMERA_HEIGHT_METERS = Pixel.toMeter(graphicsHeight);

Then in my game classes (like your Player class). In my case it was a pinball game so i have Flipper, Ball, Bumper, etc. I have a @Override render() method where I sync up the sprite with the physics body.

Here's an example file..sry it's messy but might be helpful.

Pinball Engine Class file

Box2d libgdx, a bit confused about the pixels to meters stuff

1 Answers