Trouble

I added two Text objects to a scene.
But for the latter one, I couldn’t set background color to transparent.

Can anyone help me?

Here is the screenshot.

Screenshot

What I tried

I want the Text objects to have transparent background.

I have tried to set backgroundColor like:

this.scene.add.text(0, 0, "hoge", {
  backgroundColor: "rgb(255 255 255 / 0.5)",
});

but it doesn’t work.

Screenshot

Source Code

• selected-tile-display.ts

This Text object looks good. It has transparent background.

    this.text = (() => {
      const text = this.scene.add.text(0, 0, "x: -, y: -", {
        padding: {
          y: 50 / this.scene.cameras.main.zoom,
        },
        align: "center",
        fixedWidth: containerWidth,
        fixedHeight: containerHeight,
        fontSize: `${100 / this.scene.cameras.main.zoom}px`,
        lineSpacing: 0,
      });

      return text;
    })();

• selected-character-display.ts

This Text looks bad. It has black background.

    this.text = (() => {
      const text = this.scene.add.text(0, 0, [
        "a10a",
        "VIT: 0",
      ], {
        fixedWidth: containerWidth,
        fixedHeight: containerHeight,
        fontSize: `${100 / this.scene.cameras.main.zoom}px`,
      });

      return text;
    })();