Search code examples
phaser-frameworktint

Phaser 3 BitmapText Tint suddenly not working


My code was working just fine one minute and the next it is not.

The issue relates to BitmapText tint.

I am using the CDN for Phaser 3.54.0.

Is there any reason why tint does show? I didn't touch the code relating to BitmapText variables.

This is the code...


export default class CardBase extends Phaser.GameObjects.Container {
    constructor(data) {
        let { scene, x, y, name, card, image, depth, black, green, purple, red, yellow, products, counter } = data
        let spriteCard = new Phaser.GameObjects.Sprite(scene, 0, 0, card)
        let spriteImage = new Phaser.GameObjects.Sprite(scene, 0, 20, image)
        let textBlack = new Phaser.GameObjects.BitmapText(scene, 80, -120, 'pressstart', black, 20)
        let textGreen = new Phaser.GameObjects.BitmapText(scene, 60, -50, 'pressstart', green, 20)
        let textPurple = new Phaser.GameObjects.BitmapText(scene, 60, 0, 'pressstart', purple, 20)
        let textRed = new Phaser.GameObjects.BitmapText(scene, 60, 50, 'pressstart', red, 20)
        let textYellow = new Phaser.GameObjects.BitmapText(scene, 60, 120, 'pressstart', yellow, 20)
        let textProducts = new Phaser.GameObjects.BitmapText(scene, 60, -120, 'pressstart', products, 24)
        let textCounter = new Phaser.GameObjects.BitmapText(scene, 0, -120, 'pressstart', counter, 36)
        textBlack.tint = 0
        textGreen.tint = 0
        textPurple.tint = 0
        textRed.tint = 0
        textYellow.tint = 0
        textProducts.tint = 0
        textCounter.tint = 0
        let textName = new Phaser.GameObjects.BitmapText(scene, 0, 0, 'pressstart', name, 16, Phaser.GameObjects.BitmapText.ALIGN_CENTER)
        super(scene, x, y, [spriteCard, spriteImage, textName, textBlack, textGreen, textPurple, textRed, textYellow, textProducts, textCounter])
        this.spriteCard = spriteCard
        this.spriteImage = spriteImage
        this.textName = textName
        this.cardname = name
        this.depth = depth
        this.scene = scene
        this.textBlack = textBlack
        this.textGreen = textGreen
        this.textPurple = textPurple
        this.textRed = textRed
        this.textYellow = textYellow
        this.textProducts = textProducts
        this.textCounter = textCounter
        this.black = black
        this.green = green
        this.purple = purple
        this.red = red
        this.yellow = yellow
        this.products = products
        this.counter = counter
        this.scene.add.existing(this)
    }

    set black(newBlack) {
        this._black = newBlack
        this.textBlack.text = this._black
    }
    
    get black() {
        return this._black
    }
}


Solution

  • I suspect (I could be wrong) my problem is related to my browser. I had updates due on Chrome. It turned out that Phaser.AUTO was defaulting to Canvas instead of WebGL. It seemed that WebGL was not available somehow.

    Since BitmapText Tint only works on WebGL, it was affected when WebGL became unavailable. It couldn't work.

    After I restarted my computer and the updates on Chrome took effect, everything went back to normal and Tint worked again.