ScaleX not showing properly on reload

Phaser 3
1

I have a scene which contains 5 bars of colors that keep scaling X from 0 to 1 depending on some values.

The problem is that when I exit and re enter the same scene, the bars in the screen show up at scale 1, but when I do console.log to show those scaleX values, they are updating correctly.

Do you know why this might be happening? in the code they’re correct but in the screen don’t.

2

You may be referencing both the new and old (destroyed) game objects somehow. Or you have two scenes on top of each other. Hard to say. How are you changing scenes?

3

To enter the scene where the color bars are, I use
this.scene.start(“Hall3”);
For going back I use
this.scene.start(“Hall2”);

4

Post the scene code?

5

This is the game scene


class Hall3 extends Phaser.Scene {
    constructor() {
        super('Hall3');
    }
    initialize(){
        console.log("initialize!")
    }
    init(){
        console.log("init!")
    }
    preload(){

    }
    create() {
        let poolColors = [];
        const timerY = 380;
        //Color bars for the results
        poolColors[0] = this.add.image(93, timerY - 46, "betDataRed").setOrigin(0, 0);
        poolColors[1] = this.add.image(93, timerY - 2, "betDataBlue").setOrigin(0, 0);
        poolColors[2] = this.add.image(93, timerY + 43, "betDataGreen").setOrigin(0, 0);
        poolColors[3] = this.add.image(93, timerY + 93, "betDataRed").setOrigin(0, 0);
        poolColors[4] = this.add.image(93, timerY + 135, "betDataBlue").setOrigin(0, 0);

        //Results update
        Socket.add("CaiChi", (arg, TableNumber) => {
            if (this.scene.isActive('Hall3')) {
                    this.betDataText[0].text = number_format(arg[0][1].Banker);
                    this.betDataText[1].text = number_format(arg[0][1].Player);
                    this.betDataText[2].text = number_format(arg[0][1].Tie);
                    this.betDataText[3].text = number_format(arg[0][1].BankerPair);
                    this.betDataText[4].text = number_format(arg[0][1].PlayerPair);
                    //Stores bets
                    let betNumber = [
                        arg[0][1].Banker,
                        arg[0][1].Player,
                        arg[0][1].Tie,
                        arg[0][1].BankerPair,
                        arg[0][1].PlayerPair
                    ];
                    colorResize(betNumber);
            }
        })

        //Resizes the color bars:
        function colorResize (bets) {
            let highestBet = 0;
            for (let i = 0; i < 5; i++) {
                if (bets[i] > highestBet) {
                    highestBet = bets[i];
                }
            }
            //If highest bet is 0, turns it to 1 to avoid errors
            if (highestBet == 0) {
                highestBet = 1;
            }
            //Scale the color bars:
            for (let i = 0; i < 5; i++) {
                poolColors[i].scaleX = bets[i] / highestBet + 0.01;
            }
            console.log("Pool color sizes: ")
            for (let i = 0; i < 5; i++) {
                console.log(poolColors[i].scaleX);
            }
        }
    }

Here it is, obviously is just the related code as it’s almost a full game.

As you can see, I’m using a socket.io event to update them, this event is triggered every time the “bets” change, this event is working correctly and the “betDataText” text keeps updating correctly, and even in the “colorResize” function I have a console.log to check the current values for scales and… those values are right! The problem is that the actual images for the bars are shown at full scale, but only when I exit and enter the game screen again.

6

Also, I have this shutdown event to destroy the color bars, but it still stops working:

        this.events.on(Phaser.Scenes.Events.SHUTDOWN, () => {
            for(let i=0; i < 4; i++) {
                this.textures.removeKey('smallLudan'+ i);
                poolColors[i].destroy();
            }
        })
7

I think you’re adding one socket listener for each scene start, and each listener is referencing a different poolColors.

8

I think that’s the case, for now I just did a work around by updating the poolColors scale on the update() function, but maybe in the future I’d need to fix this (or maybe is just a bug of this current update of Phaser and could be fixed later)