How to use LibGDX cameras with Box2D Debug Renderers

Question

I am trying to use a Box2D Debug Renderer along with my LibGDX Sprites and Bodies. The problem I am having is that the Renderer draws the Box Body in the center of the screen and then the Sprite is draw at its default location of (0,0) the bottom left of the screen. When I move the Car Sprite both the Car and Debug Box move making them not overlap.

I know the problem is with the camera because I have been messing around with different camera values for a couple of days now. Some times they overlap but then the Box2D Debug Body moves faster than the Car Sprite.

Some times the Box2D body is at the same position as the Sprite but extremely small. I am using 2 cameras. One which is 720 x 480. The Debug Camera is in meters so its, 24 x 16.

Here's some code where the problem might lie (I'm using Stages and Actors) :

BattleScreen.java:

public void show() {
    battleStage = new Stage( 720, 480, false );
    // The Box2D Debug Renderer will handle rendering all physics objects for debugging
    debugRenderer = new Box2DDebugRenderer( true, true, true, true );
    debugCam = new OrthographicCamera( 24, 16 );
}
public void render() {

    // Set the Camera matrices
    battleStage.getCamera().update();       

    // Update the Physics World, use 1/45 for something around 45 Frames/Second for mobile devices
    physicsWorld.step( 1/45.0f, 8, 3 );     // 1/45 for devices 

    // Again update the Camera matrices and call the debug renderer
    //debugCam.update();
    debugRenderer.render( physicsWorld, debugCam.combined );

    // Update all Game Objects then Draw them
    battleStage.act(delta);
    battleStage.draw();
}

Car.java: (Also an Actor)

public Car(Texture texture ) {
    super( "Car" ); 

    mSprite = new Sprite( texture );
    mSprite.setSize( 54, 105 );

    mSprite.setOrigin( mSprite.getWidth()/2, mSprite.getHeight()/2);    // set the origin to be at the center of the body

    FixtureDef carFixtureDef = new FixtureDef();
    mBody = Physics.createBoxBody( BodyType.DynamicBody, carFixtureDef, mSprite );
}

public static Body createBoxBody( final BodyType pBodyType, final FixtureDef pFixtureDef, Sprite pSprite ) {

    final BodyDef boxBodyDef = new BodyDef();
    boxBodyDef.type = pBodyType;

    // Temporary Box shape of the Body
    final PolygonShape boxPoly = new PolygonShape();
    final float halfWidth = pSprite.getWidth() * 0.5f / Consts.PIXEL_METER_RATIO;
    final float halfHeight = pSprite.getHeight() * 0.5f / Consts.PIXEL_METER_RATIO;
    boxPoly.setAsBox( halfWidth, halfHeight );  // set the anchor point to be the center of the sprite
    pFixtureDef.shape = boxPoly;

    final Body boxBody = BattleScreen.getPhysicsWorld().createBody(boxBodyDef);
    boxBody.createFixture(pFixtureDef);
    boxPoly.dispose();
    return boxBody;
}

And to make things worse. It really gets complicated when I try to make the Main Camera follow the car.

Answer 1

What about battleStage.getCamera().combined ? Combined worked fine for me.