Strange rendering issues

[vladilen11]

version: ^3.87.0

Description

I set a text in the page with no background, but it's inexplicably has a black background.

this is my code:

    // render out the player health bar
    const playerHealthBar = new HealthBar(this, 34, 34);
    const playerMonsterName = this.add.text(30, 20, MONSTER_ASSET_KEYS.IGUANIGNITE, {
      color: '#7E3D3F',
      fontSize: '32px',
    });
    this.add.container(556, 318, [
      this.add.image(0, 0, BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND).setOrigin(0),
      playerMonsterName,
      playerHealthBar.container,
      this.add.text(playerMonsterName.width + 35, 23, 'L5', { // this line
        color: '#ED474B',
        fontSize: '28px',
      }),
      this.add.text(30, 55, 'HP', {
        color: '#FF6505',
        fontSize: '24px',
        fontStyle: 'italic',
      }),
      this.add
        .text(443, 80, '25/25', {
          color: '#7E3D3F',
          fontSize: '16px',
        })
        .setOrigin(1, 0),
    ]);

You can see in the image above that L5 appears to have an inexplicable black background. And when I do replace the code for HP and L5, the black background appears for HP and not for L5. Why is this? I've tried many things and can't find the problem.

    // render out the player health bar
    const playerHealthBar = new HealthBar(this, 34, 34);
    const playerMonsterName = this.add.text(30, 20, MONSTER_ASSET_KEYS.IGUANIGNITE, {
      color: '#7E3D3F',
      fontSize: '32px',
    });
    this.add.container(556, 318, [
      this.add.image(0, 0, BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND).setOrigin(0),
      playerMonsterName,
      playerHealthBar.container,
      this.add.text(30, 55, 'HP', { // this line
        color: '#FF6505',
        fontSize: '24px',
        fontStyle: 'italic',
      }),
      this.add.text(playerMonsterName.width + 35, 23, 'L5', {
        color: '#ED474B',
        fontSize: '28px',
      }),
      this.add
        .text(443, 80, '25/25', {
          color: '#7E3D3F',
          fontSize: '16px',
        })
        .setOrigin(1, 0),
    ]);

this is my code: https://github.com/vladilen11/monster-demo/blob/main/apps/web/game/scenes/battle-scene.ts#L44-L68
you can test it with this repo.

[Stever1388]

@vladilen11 your link doesn't work!

[vladilen11]

@vladilen11 your link doesn't work!

Sorry, pls try again. https://github.com/vladilen11/monster-demo/blob/main/apps/web/game/scenes/battle-scene.ts#L44-L68

pnpm i && pnpm run dev

visit http://localhost:3000/game

[kpotschi]

not able to get it running @vladilen11 . if it's still an issue, maybe provide a slim version of the issue.

[vladilen11]

@kpotschi I'm trying ts template to run the project, I think the current version is already minimalist in ts project. Could you try going into apps/web and running pnpm i && pnpm run dev, that way you can skip the environment requirements for turbo.

[Stever1388]

I couldn't get the original code base running, probably because I don't have pnpm installed. I tried stripping out the HealthBar code and the code in battle-scene.ts into a test Phaser project with the needed assets, and I'm not seeing the issue.

I do question how the fonts are being set though - you aren't passing them in via the this.add.text constructor, so I'm not 100% sure what they default to. Mine seems to default to "Courier". I don't think these text objects would be affected by CSS, but looking at your pictures the fonts seem more bold than mine are.

If you change your battle-scene code to something like this:

this.add.container(0, 0, [
    this.add.image(0, 0, BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND).setOrigin(0),
    playerMonsterName,
    playerHealthBar.container,
    this.l5 = this.add.text(playerMonsterName.width + 35, 23, 'L5', {
        color: '#ED474B',
        fontSize: '28px',
    }),
    this.add.text(30, 55, 'HP', {
        color: '#FF6505',
        fontSize: '24px',
        fontStyle: 'italic',
    }),
    this.add
        .text(443, 80, '25/25', {
            color: '#7E3D3F',
            fontSize: '16px',
        })
        .setOrigin(1, 0),
]);
console.log(this.l5.style.backgroundColor, this.l5.style.fontFamily)

what does it print out? Does it print out null for the background color, and what does it print out for the font family?

Also, does it fix the issue if you add backgroundColor:null to the problematic text object? Or try doing backgroundColor: "#ffffff00" which adds a white background with 0 alpha so it's transparent anyway - does that work?

Without simplified code that is easier to run that replicates the issue, it's a bit hard to narrow down the culprit.

[vladilen11]

@Stever1388 You can try downloading pnpm with this command: npm install -g pnpm

I tried the way you provided and it prints null 'Courier'.

I tried setting the backgroundColor, but I still have this problem.

[scottwestover]

@vladilen11 For the issue you are seeing, I believe this is a React issue and is tied to how the game is getting re-rendered. In your code here:

https://github.com/vladilen11/monster-demo/blob/main/apps/web/game/phaser-game.tsx#L19

    if (ref.current === null) {
      const game = StartGame('game-container');
      ref.current = { game: game, scene: null };
    }

if you replace this with:

    if (ref.current === null) {
      const game = StartGame('game-container');
      // ref.current = { game: game, scene: null };
      if (typeof ref === 'function')
      {
          ref({ game: game.current, scene: null });
      } else if (ref)
      {
          ref.current = { game: game.current, scene: null };
      }
    }

The issue goes away for me when I run the app locally.

test.mov

I wish I could provide more context on why this fixes the issue, but I have limited experience with React. For the code, I used the Phaser Next.js template as reference: https://github.com/phaserjs/template-nextjs/blob/main/src/game/PhaserGame.tsx#L25, and this fixed the issue for me.

[vladilen11]

@scottwestover Thank you for your reply, and also a special thanks for the excellent instructional video you produced.

[vladilen11]

@scottwestover But there should still be a problem with this, This code doesn't actually set the correct game object under ref.current.

This is my debug log:

because my code game is a Pharse.Game instance. I think it's need to change it to that as well:

    if (ref.current === null) {
      const game = StartGame('game-container');
      // ref.current = { game: game, scene: null };
      if (typeof ref === 'function')
      {
          ref({ game: game, scene: null });
      } else if (ref)
      {
          ref.current = { game: game, scene: null };
      }
    }

But if we change it to this, it will still have this rendering problem.

Also, I've tried replacing it with the contents of the official PhaserGame.ts, but I still have this problem.

[scottwestover]

Got it. As I mentioned, I have limited experience with React, but if I get some time, I will try to take a look at the issue.

If you haven't yet, it might be worth asking about this issue on the Phaser Discord, and on the Phaser Forums for more visibility.