Libgdx Box2D body and Sprite alignment issue

Question

I have a problem with Libgdx framework. I tried to create a class extends Sprite, but when I render it I realize that body doesn't align with the sprite texture.

Here is an image showing the problem:

You can see the code below:

public class GamePlay implements Screen {

private GameMain game;
private OrthographicCamera mainCamera;
private Viewport viewport;

private OrthographicCamera b2dcam;
private Box2DDebugRenderer debugRenderer;
private World world;

private Texture background;

private Brick brick;
float timer = 0;


public GamePlay(GameMain game)
{
    this.game = game;

    mainCamera = new OrthographicCamera(GameInfo.WIDTH, GameInfo.HEIGHT);
    mainCamera.position.set(GameInfo.WIDTH/2, GameInfo.HEIGHT/2,0);

    viewport = new FitViewport(GameInfo.WIDTH, GameInfo.HEIGHT, mainCamera);

    b2dcam = new OrthographicCamera();
    b2dcam.setToOrtho(false, GameInfo.WIDTH/GameInfo.PPM, GameInfo.HEIGHT / GameInfo.PPM);
    b2dcam.position.set(GameInfo.WIDTH/2f, GameInfo.HEIGHT/2f, 0);

    debugRenderer = new Box2DDebugRenderer();
    world = new World(new Vector2(0,0), true);

    background = new Texture("BGS/GameBG.png");

    brick = new Brick(world, "my brick");
    brick.setBricksPosition(cgp(20), cgp(20));


}

//region Screen Methods
@Override
public void show() {

}

@Override
public void render(float delta) {
    Gdx.gl.glClearColor(0,0,0,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    game.getBatch().begin();
    game.getBatch().draw(background,0,0);
    brick.draw(game.getBatch());
    game.getBatch().end();

    debugRenderer.render(world, b2dcam.combined);

    world.step(Gdx.graphics.getDeltaTime(), 6,2);
}

@Override
public void resize(int width, int height) {

}

@Override
public void pause() {

}

@Override
public void resume() {

}

@Override
public void hide() {

}

@Override
public void dispose() {
    background.dispose();

}
//endregion


private float cgp(int gridPos)
{
    return gridPos * GameInfo.gridSize;
}}



public class Brick extends Sprite {

private World world;
private Body body;
private String name;
private Fixture fixture;

public  Brick(World world, String name)
{
    super(new Texture("Bricks/brick.png"));
    this.world = world;
    this.name = name;


}

void createBody()
{
    BodyDef bodyDef = new BodyDef();
    bodyDef.type = BodyDef.BodyType.DynamicBody;

    bodyDef.position.set((getX() - getWidth())/ GameInfo.PPM, (getY() + getHeight()/2)/ GameInfo.PPM);

    body = world.createBody(bodyDef);

    PolygonShape shape = new PolygonShape();

    shape.setAsBox((getWidth()/2)/GameInfo.PPM, (getHeight()/2)/GameInfo.PPM);

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

    fixture = body.createFixture(fixtureDef);

    shape.dispose();

}

public void setBricksPosition(float x, float y)
{
    setPosition(x,y);
    createBody();
}

public void draw(SpriteBatch batch)
{
    batch.draw(this, getX(), getY());
}}

Answer 1

The box2d debug render (shows the actual position of the body) and your sprite are "pretty close", so I'm guessing you're not far off and the problem is likely in your calculation/translation of box2d position vs. screen position vs. pixels vs. meters.

You do PPM conversions, so that's good. I didn't have time to look through all your code, but as the 2 items are very close, check your calculations again. This line:

bodyDef.position.set((getX() - getWidth())/ GameInfo.PPM, (getY() + getHeight()/2)/ GameInfo.PPM);

caught my eye. Render debug and sprite are correct as far as y is concerned, but off on x. Your height uses getHeight()/2, but getWidth does not divide by 2. Perhaps that's all your missing (divide Width by 2 as well)?

Answer 2

Finally I find the solution. The problem happens because of my PPM value. I set it to 100 and when you divide it to screen size it doesnt make a whole number. so I changed it to 160 which can be divided both 800 and 480 and the problem was solved.