Add support for HTML text outside of the game canvas

[jedeen]

Context

It would be very helpful (for development, and accessibility) to be able to synchronize DOM-based text with the game canvas. This could be used for dialogue, subtitles, and more.

Proposal

Add the ability to render HTML-based text alongside the canvas.

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.

[ufukbakan]

Why you don't just query select your html element then set its inner html?

Do you need to reflect same text both in excalibur canvas and in HTML DOM? If yes, then

You already can do this, all you need to sync your html elements inner text with your canvas text.
You can do that by implementing your own label class:

import { ActorArgs, Engine, Label, LabelOptions } from "excalibur";

export default class SyncedLabel extends Label{

    target: HTMLElement;

    constructor(options: LabelOptions & ActorArgs, target: HTMLElement){
        super(options);
        this.target = target;
    }

    _postupdate(engine: Engine, delta: number): void {
        super._postupdate(engine, delta);
        this.target.innerHTML = this.text;
    }
}

then create your synced label:

    const mySyncedLabel = new SyncedLabel({
        text: "Hello world",
        pos: new Vector(game.halfDrawWidth, game.halfDrawHeight),
        anchor: new Vector(0.5, 0.5),
        font: new Font({
            family: "Calibri",
            size: 24,
            color: Color.White
        })
    }, document.querySelector("#sync-text")!)

    game.add(mySyncedLabel);
    setTimeout(() => {     mySyncedLabel.text = "I'm updated by excalibur!" }, 1000);

[eonarheim]

@ufukbakan Excellent, that's a good way to do it.

I'd support a PR to the UI section of the docs for HTML https://github.com/excaliburjs/excaliburjs.github.io/blob/site/docs/12-ui.mdx#L60!

[github-actions]

This issue hasn't had any recent activity lately and is being marked as stale automatically.