How to set color to text?

Phaser 3
1

In the sample code below I was able to set text, position, fize and alpha. I tried a few possibilities but couldn’t change color. Any idea?

class Foo extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.bitmapFont('myfont', 'fonts/myfont.png', 'fonts/myfont.xml');
    }

    create ()
    {
        this.mytext = this.add.bitmapText(100, 500, 'myfont', 'foo', 42);
    }

    update ()
    {
        this.mytext.text = 'My text';
        this.mytext.x = 100;
        this.mytext.fontSize = 100;
        this.mytext.alpha = .5;
    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: [ Foo ]
};

const game = new Phaser.Game(config);
2

The same way you change any texture color. Tint, blend, or pixel manipulation.

3

Would you give me an example?

I tried:

this.mytext.setTint(0xff0000);

But it didn’t work.

4

My whole code:

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.bitmapFont('futura', 'assets/fonts/bitmap/futura.png', 'assets/fonts/bitmap/futura.xml');
    }

    create ()
    {
        this.mytext = this.add.bitmapText(0, 0, 'futura', 'hello world', 60);
    }

    update ()
    {
        this.mytext.text = 'Boo';
        this.mytext.setTint(0xff0000);
    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: [ Example ]
};

const game = new Phaser.Game(config);
5

I think it’s WebGL only.

1 Like
6

Cool! Thanks!

Question - what’s the practical difference between use WebBL or Canvas?

7

You need some workarounds for Canvas, for example in case of tinting.
Obviously WebGL is much faster, but if for some reason you need to program for devices without a (decent) GPU…
I usually prefer Canvas if I don’t need the speed, I feel it’s slightly smoother, and the GPU fan doesn’t start, so it’s quieter :slight_smile:

8

I am starting this project that supposed to run on computers but also in mobiles. So if I got it right then it would be better to target it to WebGL? :thinking:

9

Yes. But have a look at this thread for instance. Or google what other people think.

10

Thank you for this. As per what I read it seems that there is not a consensus (I found mixed opinions). I am not that concerned about my project because it’s not CPU starving so I think I won’t have any issue. But it’s important to keep an eye on it.

Thanks again!