Rendering box2d in libgdx

Question

I have a game world of size 800x480 using a FitViewport and was initally rendering box2d bodies + fixtures using pixels so all the physics appeared floating and slow. Looking at the documentation I realised box2d uses metrics units so I went through and converted the box2d positions and sizes by a factor of 32 so I end up with a box2d world of 25x15 metres.

The issue I'm having is that now box2d objects are rendered incredibly small. How can I scale them back so they appear regular size on screen?

So ? Any update on your problem ? Did you try my answer ? Did that solve your problem ? If that didn't solve it, what do you observe ? — vdlmrc

vdlmrc vdlmrc · Accepted Answer · 2015-03-16T05:50:52

You need to use conversions factor between world and box2.

In your create() you'll have :

private OrthographicCamera camera;
private BodyDef bodyDef;
private Body body;
private PolygonShape box;
static float WORLD_TO_BOX, BOX_TO_WORLD, bodyWidth, bodyHieght;

public Create(){
    //Conversion factors
    WORLD_TO_BOX = 1/32f;  
    BOX_TO_WORLD = 1/WORLD_TO_BOX;

    //Creation of the camera with your factor 32
    camera = new OrthographicCamera();
    camera.viewportHeight = Gdx.graphics.getHeight() * WORLD_TO_BOX;  
    camera.viewportWidth = Gdx.graphics.getWidth() * WORLD_TO_BOX;  
    camera.position.set(camera.viewportWidth/2, camera.viewportHeight/2, 0f);  
    camera.update();  

    //Let's say you want to create a body in the center of your screen
    BodyDef = new BodyDef();  
    BodyDef.position.set(new Vector2(camera.viewportWidth/2, -camera.viewportHeight/2));  
    body = world.createBody(BodyDef);  
    box = new PolygonShape();  
    //Let's say you want your body to have the shape of a square which sides size is one fifth of your camera width
    bodyWidth = camera.viewportWidth/10;
    bodyHeight = camera.viewportWidth/10;
    box.setAsBox(bodyWidth, bodyHeight);
    body.createFixture(box, 0.0f);
}

For now you only used the conversion factor WORLD_TO_BOX, to create your camera. But if you want to draw some sprites on your body, you'll use the BOX_TO_WORLD factor, in the render(). For example you want to use a spritebatch to draw a sprite on your square, with the exact size and position, in the render() you'll have :

private Texture texture;

public void render(){
    game.batch.begin();
    game.batch.setColor(1,1,1,1);
//In Box2D, the orgin of a body is the center of the body, 
//while in your world the orgin of a sprite is the bottom left corner
//I Box2D the width and the height of a body will be twice the values you entered,
//while in your world the width and the height of a sprite are the exact values you entered.
//Taking all this into account, to draw a sprite above a body you need to :
//1 - center the sprite above the body. Ex : (body.getPosition().x - bodyWidth) for the X position
//2 - draw the sprite at the right size, taking in account the factor 2. Ex : bodyWidth * 2 for the widht of the sprite
//3 - Apply the BOX_TO_WORLD factor to all every sizes and distances
    game.batch.draw(texture,
                    BOX_TO_WORLD * (body.getPosition().x - bodyWidth),
                    BOX_TO_WORLD * (body.getPosition().y - bodyHeight),
                    BOX_TO_WORLD * bodyWidth * 2,
                    BOX_TO_WORLD * bodyHeight * 2);
     game.batch.end();
}

Hope it answers your question.

Rendering box2d in libgdx

1 Answers