Phaser 3文本背景无法设置为透明的问题求助

我在场景中添加了两个Text对象，但其中一个无法将背景颜色设置为透明，恳请大家帮忙解决。

以下是截图：

已尝试的方法 #

我希望Text对象的背景是透明的，尝试通过设置backgroundColor属性实现：

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

但该方法无效。

源码对比 #

• selected-tile-display.ts：这个Text对象背景透明显示正常

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：这个Text对象显示异常，背景为黑色

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

最小复现示例 #

我制作了最小复现示例，发现new PhaserGame中的type: CANVAS配置和this.load.image操作会影响该问题。注释掉这些代码后文本背景可变为透明，但我需要加载图片且修改type: CANVAS会引发其他错误，因此无法采用此方案。

目录结构：

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

• _components/game/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;

• _components/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`,
    });
  }
}

克隆指定分支并运行npm run dev即可复现。

环境差异 #

该问题仅在Chrome浏览器中复现：

• 可复现环境
  • MacOS (14.5) 下的 Chrome (126.0.6478.183)
• 不可复现环境
  • MacOS (14.5) 下的 Safari (17.5)
  • iOS (17.5.1) 下的 Chrome (127.0.6533.56)
  • iOS (17.5.1) 下的 Safari

内容的提问来源于stack exchange，提问作者a10adotapp