extend Phaser.Text overwrite "text" property

[Yehuda Katz]

Hello,

How can one overwrite property of object, what's the syntax?

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();
            }
        }

    }

});

I would like to extend Phaser.Text, so I need to handle the moment when text is changed. Of course I can overwrite setText() method but what if by mistake in future I will access .text property?

Thanks in advance

[samme]

That would be it, but it has no effect since the existing property is marked nonconfigurable.

You might overwrite the Text#updateText method instead. Or you can extend the whole Phaser.Text class with your own and add your own get/set.

[Yehuda Katz]

That's way strange but seems like if you try to overwrite property then you should do both getter and setter... here is working solution:

export default class MyTextClass extends Phaser.Text {
  get text() {
    return super.text;
  }

  set text(value) {
    super.text = value;
  }
}

@samme I was trying to do only setter and I was getting unclear error message, so finding this solution is pure luck. BTW updateText() method is awesome solution too, as it's called every time text is changed, thanks! =)

[Yehuda Katz]

@samme have you any clue is that possible to overwrite setter of object instead of class? To keep file list relatively small and do not call my own doAfterTextUpdate() method every time I change text value

p.s. I am very tired or Phaser works very weird. When I call alingIn outside of the class everything works fine, but when I call it within class, it no longer calculates alignIn according to game.world but instead regarding object itself.

[Yehuda Katz]

Found the problem. If you want to work with Text.Canvas then you should update text via setText() method but even more important to provide true as second parameter. Otherwise text will be marked as dirty and will be updated with next tick (which is not what you want, if you just changed it). Also, if you change font or any property of style then you should call updateText() method, otherwise text will never be redrawn.