libGDX Box2DDebugRenderer Draw Box Too Big & Too Small

Question

So, I just want to draw Box2DDebugRenderer same with sprite size. I have use same SpriteBatch same Camera and same Viewport . It took me 8 hours, tried finding a solution around google and still not solve the problem.

Here what I got:

I just change this line:

PolygonShape shape = new PolygonShape();
shape.setAsBox(32, 32);

Some tutorial said to div by 2. I tried that I got result like 2nd picture.

Here my script

PlayScreen.java :

public class PlayScreen implements Screen {
    private SpriteBatch batch;
    private TiledMap tileMap;
    private TiledMapRenderer tiledMapRenderer;
    private OrthographicCamera cam;
    private Player player;
    private World world;
    private Box2DDebugRenderer debugRenderer;
    private FitViewport gamePort;

    public PlayScreen(HookaHookaGame game) {
        this.batch = game.getSpriteBatch();
        this.world = new World(new Vector2(0, -20), true);

        // Create cam
        cam = new OrthographicCamera();
        gamePort = new FitViewport(800, 600, cam);
        gamePort.apply(true);

        //initially set our gamcam to be centered correctly at the start of of map
        // cam.position.set(400, 300, 0);
        // cam.update();

        // Load tilemap
        tileMap = new TmxMapLoader().load("simulation01.tmx");
        tiledMapRenderer = new OrthogonalTiledMapRenderer(tileMap, batch);

        // Create box2d debug renderer
        debugRenderer = new Box2DDebugRenderer();

        // Create player sprite
        player = new Player(this.world);
    }

    @Override
    public void show() {

    }

    @Override
    public void render(float delta) {
        //cam.update();

        // Update sprite
        player.update(delta);

        //Clear the game screen with Black
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        // Draw tilemap
        tiledMapRenderer.setView(cam);
        tiledMapRenderer.render();

        // Set camera to spritebatch
        batch.setProjectionMatrix(cam.combined);
        // Draw sprite
        batch.begin();
        batch.draw(player.getKeyFrame(), 300, 300);
        player.draw(batch);
        batch.end();

        // Draw box2d debug renderer
        debugRenderer.render(world, cam.combined);
    }

    @Override
    public void resize(int width, int height) {
        gamePort.update(width, height);
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {

    }
}

Player.java , extended from Sprite Class:

public class Player extends Sprite {
    private Animation anim;
    private float stateTimer;
    private World world;
    private Body body;

    // Debug
    public Player(World world) {
        stateTimer = 0;
        this.world = world;

        loadAnim();
    }

    private void loadAnim() {
        Array<TextureRegion> temp = new Array<TextureRegion>(40);

        Texture texture = new Texture("sprite.png");
        temp.add(new TextureRegion(texture, 3*32, 3*32, 32, 32));
        temp.add(new TextureRegion(texture, 2*32, 3*32, 32, 32));
        temp.add(new TextureRegion(texture, 32, 3 * 32, 32, 32));
        temp.add(new TextureRegion(texture, 0, 3*32, 32, 32));

        anim = new Animation(0.1f, temp, Animation.PlayMode.LOOP);

        BodyDef bodyDef = new BodyDef();
        bodyDef.position.set(100, 100);
        bodyDef.type = BodyDef.BodyType.DynamicBody;
        body = world.createBody(bodyDef);

        PolygonShape shape = new PolygonShape();
        shape.setAsBox(32, 32);

        FixtureDef fixture = new FixtureDef();
        fixture.shape = shape;

        body.createFixture(fixture);

        setBounds(0, 0, 32, 32);
        setPosition(100, 100);
    }

    public void update(float delta) {
        stateTimer += delta;

        setRegion(getKeyFrame());
        setSize(32, 32);
    }

    public TextureRegion getKeyFrame() {
        return anim.getKeyFrame(stateTimer, true);
    }
}

Could you explain what happen exactly?

Answer 1

Box2d and Textures have different origins.

The origin of the body is its center.

The origin of the Texture is the bottom left corner.

As you can see, the center of the box2d object is exactly at the bottom left corner of the texture, if you draw them both at the same position.

Pseudo code:

batch.draw(texture, body.x - texture.width / 2, body.y - texture.heigth / 2);

Otherwise you could set the origin of the box2d body to "the bottom left corner", but that might give you trouble if you follow other tutorials.

Answer 2

you can also put the origin of your sprite to center by calling the function setOriginCenter() of your Sprites before drawing them

so the spritebatch will draw them from center just like your box