How do I draw a name above monsters head?

Question

My player HUD works perfect, but when I move, the monster name moves with me instead of getting attached to the monster.

Player has a HUD and I'm using Scene2D.ui to pull it off and works great.

I use unit scale, that's why I got 2 camera. One for UI stuff and other for game.

 public void update(float deltaTime) {
    // update creatures
    world.getPlayer().onThink(deltaTime);
    for (Monster monster : world.getMonsters()) {
        monster.onThink(deltaTime);
    }

    // update camera to the player
    camera.position.set(world.getPlayer().getPosition(), 0);
    camera.update();
}

@Override
public void render(float deltaTime) {
    // clear screen
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    // seprate update logic
    update(deltaTime);

    // set camera to what we see
    worldRenderer.renderer.setView(camera);
    worldRenderer.renderer.render();

    // draw world
    game.spriteBatch.setProjectionMatrix(camera.combined);
    worldRenderer.render();

    // monster UI
    game.spriteBatch.setProjectionMatrix(uiCam.combined);
    for (Monster monster : world.getMonsters()) {
        uiCam.project(uiPosition.set(monster.getPosition().x, monster.getPosition().y, 0));
    }

    game.spriteBatch.begin();
    Assets.font.draw(game.spriteBatch, "Firefox", uiPosition.x / 2, uiPosition.y / 2);
    game.spriteBatch.end();

    // Player Hud
    game.spriteBatch.setProjectionMatrix(hud.stage.getCamera().combined);
    hud.stage.draw();
}

I'll appricate all kind of suggestions! If i could use Scene2D.ui for monsters aswell, would be great.

Cheers.

Answer 1

If you want the text to show up above the monster's head, you'll have to add at least the monster's sprite's height to the base Y of the font, something like:

Assets.font.draw(spriteBatch, "Monster", position.x, position.y + getFrame().getHeight());

Secondly, if you put the font rendering code before the sprite/texture rendering code, the font will be overlapped by the sprite, so I'd consider changing the order of the render lines to something like:

public void render(SpriteBatch spriteBatch) {
    spriteBatch.draw(getFrame(), position.x, position.y, width * world.unitScale, height * world.unitScale);
    Assets.font.draw(spriteBatch, "Monster", position.x, position.y);
    Assets.font.getData().setScale(1 * world.unitScale, 1 * world.unitScale);
}

This will make the font overlap the sprite, though I'd consider putting the name rendering code in a separate loop all together, otherwise monster sprites standing above your sprite but "under" the name tag will sometimes overlap it, but this is a design decision.