Как сделать цвет фона прозрачным с помощью Phaser 3

Беда

Я добавил в сцену два текстовых объекта. Но для последнего я не смог установить прозрачный цвет фона.

Может кто-нибудь мне помочь?

Вот скриншот.

Что я пробовал

Я хочу, чтобы текстовые объекты имели прозрачный фон.

Я попытался установить backgroundColor например:

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

но это не работает.

Исходный код

• selected-tile-display.ts

Этот текстовый объект выглядит хорошо. Он имеет прозрачный фон.

    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 = (() => {
      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;
    })();

Минимальный воспроизводимый пример

Я создал минимальный воспроизводимый пример.

Я обнаружил, что опция type: CANVAS в new PhaserGame и this.load.image что-то делает. Я мог бы сделать фон текста прозрачным, когда закомментировал эти строки. Но я не хочу этого делать, потому что мне нужно загружать изображения, и если я изменю параметр type: CANVAS, возникнут другие ошибки.

+ app/
  + _components/
  |  + game/
  |     + scenes/
  |     |   + main-scene/
  |     |       + index.ts
  |     |
  |     + index.tsx
  |
  + globals.css
  + layout.tsx
  + page.tsx

• _компоненты/игра/index.tsx

"use client";

import { CANVAS, Game as PhaserGame, Scale } from "phaser";
import { useEffect, useRef } from "react";
import { MainScene } from "./scenes/main-scene";

export function Game() {
  const game = useRef<Phaser.Game | null>(null);

  useEffect(() => {
    if (game.current === null) {
      game.current = new PhaserGame({
        parent: "game-container",
        // If AUTO, it doesn't work on smartphone browser
        type: CANVAS,
        width: 100,
        height: 100,
        scale: {
          mode: Scale.ScaleModes.FIT,
        },
        backgroundColor: "#028af8",
        scene: [
          MainScene,
        ],
      });
    }

    return () => {
      if (game.current) {
        game.current.destroy(true);
        
        if (game.current !== null) {
          game.current = null;
        }
      }
    }
  }, []);

  return (
    <div id = "game-container"></div>
  );
}

export default Game;

• _comComponents/game/scenes/main-scene/index.ts

import { Scene } from "phaser";

export class MainScene extends Scene {
  constructor () {
    super("MainScene");
  }

  preload() {
    this.load.image("tiles", "assets/tiles.1.png");
  }

  create () {
    this.add.text(0, 0, "Text 1", {
      fontSize: `10px`,
    });

    this.add.text(0, 20, "Text 2", {
      fontSize: `10px`,
    });
  }
}

GitHub

(клонируйте stackoverflow/questions/78791454 ветку и запустите npm run dev для воспроизведения)

Это зависит от окружающей среды

Я обнаружил, что это происходит только в браузере Chrome.

• Воспроизводимый
  • Chrome (126.0.6478.183) в MacOS (14.5)
• Не воспроизводимо
  • Safari (17.5) в MacOS (14.5)
  • Chrome (127.0.6533.56) в iOS (17.5.1)
  • Сафари в iOS (17.5.1)