Issue
I encountered a problem when adding two Text objects to a scene. The background color of the latter one could not be set to transparent.
Is there anyone who can assist me with this?
Below is a screenshot for reference.
Attempted Solutions
I attempted to make the Text objects have a transparent background but was unsuccessful.
I tried setting the backgroundColor like so:
this.scene.add.text(0, 0, "hoge", {
backgroundColor: "rgb(255 255 255 / 0.5)",
});
However, this method did not work as expected.
Reference Source Code
The Text object displayed in the source code above has a 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;
})();
Conversely, the Text displayed in the above source code has a 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;
})();
Minimal Reproducible Example
I have created a minimal reproducible example which reveals that setting type: CANVAS in new PhaserGame and using this.load.image affects the background transparency of the text.
By commenting out those lines, I could achieve a transparent background. However, since loading images is essential and causes other issues when changing type: CANVAS, this is not a viable solution.
+ 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`,
});
}
}
(clone stackoverflow/questions/78791454 branch and run npm run dev to reproduce)
Environment Dependence
This issue seems to be specific to the Chrome browser.
- Reproducible
- Chrome (126.0.6478.183) in MacOS (14.5)
- Not Reproducible
- Safari (17.5) in MacOS (14.5)
- Chrome (127.0.6533.56) in iOS (17.5.1)
- Safari in iOS (17.5.1)