Change text colour dynamically

[gwinnell]

Hi all,

 

Is this possible? e.g. 

// Create textvar t = this.game.add.text(10, 10, "Hello World", { font: "16pt Arial", fill: "#FFFFFF", align: "center" });// Ideally not this because it uses internal values, and actually doesn't update the text displayed. t._style['fill'] = "#FF0000";// Perhaps something like this...!t.updateCSS({ font: "16pt Arial", fill: "#FF0000", align: "center" });

Thanks!

[driver.by]

Hello, try 

var f = t.font;f.fill = '#FF0000';t.font = f;

[gwinnell]

Hi there! 

 

Hello, try 

var f = t.font;f.fill = '#FF0000';t.font = f;

 

I can see all the internal values changing, but the displayed text doesn't change colour. Tried with both Canvas and WebGL renderers.

[driver.by]

Hmm, and what about 

var f = t.font;f.fill = '#FF0000';t.setStyle(f);

If not, try to dig into http://www.goodboydigital.com/pixijs/docs/files/src_pixi_text_Text.js.html - this is prototype for Phaser.Text;

[gwinnell]

setStyle() works. It doesn't seem to be in the docs though! Thanks.

 

var f = t.font;f.fill = '#FF0000';t.setStyle(f);

If not, try to dig into http://www.goodboydigital.com/pixijs/docs/files/src_pixi_text_Text.js.html - this is prototype for Phaser.Text;

[XekeDeath]

setStyle() is inherited from PIXI.Font, so it is found in the PIXI docs, not the Phaser docs.
What you find in the Phaser docs is the Text.font property:

/*** The font the text will be rendered in.* @name Phaser.Text#font* @property {string} font - The font the text will be rendered in.*/Object.defineProperty(Phaser.Text.prototype, 'font', {    get: function() {        return this._style;    },    set: function(value) {        //  Let's not update unless needed, this way we can safely update the text in a core loop without constant re-draws        if (value !== this._style)        {            this._style = value;            this.setStyle(value);        }    }});

[Softmixt]

t.addColor('#FF0000', 0) ;