Doing a HUD in a Tiled project with a camera

[depsypher]

Currently struggling with getting an absolute-positioned hud onscreen in a project using the tiled plugin. No matter what I try, the hud moves with the background as it scrolls around.

The clearest way seems to be using ScreenElement as described here:
https://excaliburjs.com/docs/ui/

I can get something sort of working by passing the camera into the screenElement and positioning contents relative to that, but it still shifts around slightly and just seems hacky. Is there a better way?

[eonarheim]

Hi @depsypher great question! There are a couple strategies here:

1. If you're trying to define hud elements in Tiled you could decorated them with a specific name and then access them to change their TransformComponent to screen coordinates. (You'll need to manage scale manually since switching to the screen coordinates takes the camera transform out of account). This might be wonky to work with since the position in Tiled will no longer match up to the screen in the game.

const HUDEntities = game.currentScene.world.entityManager.getByName("HUD");
      for (let entity of HUDEntities) {
         const tx = entity.get(ex.TransformComponent);
         if (tx) {
            tx.coordPlane = ex.CoordPlane.Screen;
         }
      }

2. Define the HUD elements outside of Tiled in your game code using ScreenElement's

// Add tiled map objects to the scene
map.addTiledMapToScene(game.currentScene);

// Manage UI
const screenElement = new ex.ScreenElement({
   pos: ex.vec(10, 10),
   width: 600,
   height: 20,
   color: ex.Color.Green,
   z: 100
});
game.currentScene.add(screenElement);

3. If you're UI is going to be complicated both from a visual and interaction perspective, it might be best to use HTML/CSS and position it on top of the game canvas. HTML is really good at building UIs so it might be suitable for your needs.

[depsypher]

Awesome, thanks for the nudge in the right direction!

I got what I was looking for using a mix of 1) and 2) above. The piece I was missing was setting coordPlane on the screen element contents:

export class Debug extends ex.ScreenElement {
    private camera: ex.Camera;
    private player: Player;
    private label: ex.Label;

    constructor(camera: ex.Camera, player: Player) {
        super({
            x: 10,
            y: 30,
        })
        this.camera = camera;
        this.label = new ex.Label({
            coordPlane: ex.CoordPlane.Screen, // <----- need this or label will scroll with map!
            font: new ex.Font({
                family: 'impact',
                size: 24,
                unit: ex.FontUnit.Px,
            }),
        });
        this.player = player;
    }

    onInitialize() {
        this.addChild(this.label);
    }

    onPreUpdate(_engine: Engine, _delta: number) {
        super.onPreUpdate(_engine, _delta);
        const tile = Resources.TiledMap.getTileMapLayers().find(v => v.name == "traces")?.getTileByPoint(this.player.pos);

        // @ts-ignore
//        const data = Resources.TiledMap.getTilesetForTile(1).tiles.find(v => v.id === tile.id!)
        ex.Logger.getInstance().info("log", tile);
//        if (data && data.properties) {
//            const name = data.properties.find(v => v.name === "name");
//            if (name) {
//                ex.Logger.getInstance().info("log", `${tile?.id!} ${data.properties.length}`);
  //          }
//        }
//        ex.Logger.getInstance().info("log", Resources.TiledMap.getTilesetForTile(tile!.id));
//        Resources.TiledMap.getTileMapLayers().find(v => v.name == "traces")?.tiles?.forEach(v => ex.Logger.getInstance().info("log", `${v.id} ${v.name} ${v.data.size}`));


        this.label.text = `CAM: ${this.camera.pos}\nPlayer: ${this.player.pos}\nTile: ${tile?.data.get("name")}`;
    }
}

I'm trying to detect which tile from the tileset the player is on... working through it, will start a new discussion if I get really stuck. Thanks for all the help so far.