Update text in a Sprite

[julacariote]

Hello,

I have a text which is added to a sprite. If I call setText on this text to update it, it won't work because if I understand well, a sprite doesn't call update on its children: https://github.com/photonstorm/phaser/issues/1066:

Quote

Not really a bug, just the way Phaser and PIXI operate together, basically update is a Phaser.Text method and if a Sprite is used as a parent if won't call update on its children, I would just advise you to use Phaser.Group when you want to add a text to a parent.

I need this text to be inside a sprite and to be updated on user input. How could I achieve that? I naively tried to manually set the dirty attribute to false on the text and calls its update method but it doesn't work...

[Tom Atom]

Hi, your link is to very old post.

Presently, when you use "text" property, updateText is called automatically. All you need to do is call myText.text = "Some text". You do not need to update it feach frame, only when text is changed. From source:

/**
* @name Phaser.BitmapText#text
* @property {string} text - The text to be displayed by this BitmapText object.
*/
Object.defineProperty(Phaser.BitmapText.prototype, 'text', {

    get: function() {
        return this._text;
    },

    set: function(value) {

        if (value !== this._text)
        {
            this._text = value.toString() || '';
            this.updateText();
        }

    }

});

btw, setText does only call to text:

/**
* The text to be displayed by this BitmapText object.
* 
* It's faster to use `BitmapText.text = string`, but this is kept for backwards compatibility.
*
* @method Phaser.BitmapText.prototype.setText
* @param {string} text - The text to be displayed by this BitmapText object.
*/
Phaser.BitmapText.prototype.setText = function (text) {

    this.text = text;

};

 

[julacariote]

Yes, indeed but the code you posted is from the BitmapText class. I just use the Phaser.Text class and setting a new text by doing text.text = "new text" does not work...

/**
* The text to be displayed by this Text object.
* Use a \n to insert a carriage return and split the text.
* The text will be rendered with any style currently set.
*
* @name Phaser.Text#text
* @property {string} text
*/
Object.defineProperty(Phaser.Text.prototype, 'text', {

    get: function() {
        return this._text;
    },

    set: function(value) {

        if (value !== this._text)
        {
            this._text = value.toString() || '';
            this.dirty = true;

            if (this.parent)
            {
                this.updateTransform();
            }
        }

    }

});

It seems to me that the updateTransform method is a Pixi function for position/rotation computations only.

[Tom Atom]

Oh, sorry. But anyway, for text when you set it, it is marked dirty. It is marked dirty if you change its shadow also or style.

It is then matter of renderer to check if dirty and if yes to update text. So, there is no need to relay on update method of sprite or group - updating text is part of rendering. See this part of source:

/**
* Renders the object using the WebGL renderer
*
* @method Phaser.Text#_renderWebGL
* @private
* @param {RenderSession} renderSession - The Render Session to render the Text on.
*/
Phaser.Text.prototype._renderWebGL = function (renderSession) {

    if (this.dirty)
    {
        this.updateText();
        this.dirty = false;
    }

    PIXI.Sprite.prototype._renderWebGL.call(this, renderSession);

};

 This is minimal example I just made - whenever I click mouse button I see updated text:

            var dummySprite = this.add.sprite(0, 350, "Atlas", "SomeSprite");
            var txt = this.add.text(0, 0, 'Hi!', { font: "30pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
            dummySprite.addChild(txt);
            this.game.input.onDown.add(function () {
                txt.text = "Hi! " + this.game.rnd.integerInRange(0, 999);
            }, this);

 

[julacariote]

You're right, it works. Something is wrong in my code then... Sorry for that. Thanks!