LibGDX camera.project() is not working properly

Question

I use Box2D to manage my game world. I want to display text above the body. I plan to do this by setting the Label appropriately. The problem is that the body is in the game world and the Label is in the Stage (UI). So I tried to use the camera.project() method to convert world coordinates to screen coordinates. Unfortunately, for some reason I couldn't do it - the Label is displayed in a different place than it should be - it is shifted down and to the left relative to the target position. When resizing the window, this position also changes, but also incorrectly. I will add that otherwise I use the camera.unproject() method in the same way and I have no problems here - everything works fine. I don't know why it's different the other way around.

this.camera = new OrthographicCamera(ScreenManager.WIDTH * SCALE, ScreenManager.HEIGHT * SCALE);
this.viewport = new FitViewport(ScreenManager.WIDTH, ScreenManager.HEIGHT);
this.stage = new Stage(viewport, batch);
this.world = new World(Vector2.Zero, true);

// ...

Vector3 worldPosition = new Vector3(x, y, 0);
Vector3 screenPosition = camera.project(worldPosition,
    viewport.getScreenX(), viewport.getScreenY(),
    viewport.getScreenWidth(), viewport.getScreenHeight());

label.setPosition(screenPosition.x, screenPosition.y);

And my resize method:

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

Of course I call act() and draw() for Stage in the render method. What am I doing wrong?

Answer 1

In order to translate from World-coordinates to Stage-coordinates you need to first project the World position onto screen-space, and then unproject it back into Stage-space.

Vector2 worldPosition = body.getPosition();
Vector3 screenPosition = worldCamera.project(new Vector3(worldPosition.x, worldPosition.y, 1.0f));
Vector3 stagePosition = stage.getCamera().unproject(screenPosition);

label.setPosition(stagePosition.x, stage.getHeight() - stagePosition.y)); // stage.getHeight() - because UP is flipped.

That process will allow you to track a Box2D Body and set a Labels position to match it:

Full source for the example above is included below, it uses the default font from the libGDX tests (font and the font image).

package com.bornander.sandbox;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.math.Vector3;
import com.badlogic.gdx.physics.box2d.*;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.utils.ScreenUtils;
import com.badlogic.gdx.utils.viewport.ScreenViewport;

public class MyGdxSandbox extends ApplicationAdapter {
    World world;
    OrthographicCamera worldCamera;
    Box2DDebugRenderer box2DDebugRenderer;

    Body ballBody;
    Stage stage;
    Label label;
    
    @Override
    public void create () {
        world = new World(new Vector2(0.0f, -10.0f), false);
        float aspectRatio = (float)Gdx.graphics.getWidth() / Gdx.graphics.getHeight();
        float worldCameraViewportWidth = 100.0f;
        worldCamera = new OrthographicCamera(worldCameraViewportWidth, worldCameraViewportWidth / aspectRatio);
        worldCamera.position.set(worldCamera.viewportWidth / 2.0f, worldCamera.viewportHeight / 2.0f, 1.0f);
        box2DDebugRenderer = new Box2DDebugRenderer();

        CircleShape ballShape = new CircleShape();
        ballShape.setRadius(4.0f);

        FixtureDef ballFixtureDef = new FixtureDef();
        ballFixtureDef.shape = ballShape;
        ballFixtureDef.friction = 0.2f;
        ballFixtureDef.density = 1.0f;
        ballFixtureDef.restitution = 0.65f;

        BodyDef ballBodyDef = new BodyDef();
        ballBodyDef.type = BodyDef.BodyType.DynamicBody;

        ballBody = world.createBody(ballBodyDef);
        ballBody.createFixture(ballFixtureDef);
        ballBody.setTransform(25, 50, 0);
        ballBody.applyLinearImpulse(200, 0, ballBody.getPosition().x, ballBody.getPosition().y, true);

        PolygonShape groundShape = new PolygonShape();
        groundShape.setAsBox(25, 2);

        FixtureDef groundFixtureDef = new FixtureDef();
        groundFixtureDef.shape = groundShape;
        groundFixtureDef.friction = 0.2f;
        groundFixtureDef.density = 1.0f;
        groundFixtureDef.restitution = 0.2f;

        BodyDef groundBodyDef = new BodyDef();
        groundBodyDef.type = BodyDef.BodyType.StaticBody;

        Body ground = world.createBody(groundBodyDef);
        ground.createFixture(groundFixtureDef);
        ground.setTransform(50, 20, 0);


        stage = new Stage(new ScreenViewport());
        stage.setDebugAll(true);
        label = new Label("TEXT", new Label.LabelStyle(new BitmapFont(Gdx.files.internal("default.fnt")), Color.WHITE));
        label.setPosition(10, 10);
        stage.addActor(label);
    }

    @Override
    public void render () {
        ScreenUtils.clear(0, 0, 0, 1);
        float delta = Gdx.graphics.getDeltaTime();
        worldCamera.update();
        world.step(delta, 8, 8);
        Vector2 ballPositionWorld = ballBody.getPosition();
        Vector3 ballScreenPosition = worldCamera.project(new Vector3(ballPositionWorld.x, ballPositionWorld.y, 1.0f));
        Vector3 ballStagePosition = stage.getCamera().unproject(ballScreenPosition);
        label.setText(String.format("(%.3f, %.3f)", ballPositionWorld.x, ballPositionWorld.y));
        label.pack();
        label.setPosition(ballStagePosition.x, stage.getHeight() - ballStagePosition.y);
        box2DDebugRenderer.render(world, worldCamera.combined);
        stage.act();
        stage.draw();
    }
}