Drawing rectangle underneath PIXI.Text

[Alexander Farber]

Good afternoon,

in a word game I am trying to draw score as white numbers above a blue (or red) rectangle:

In the above screenshot it is the number "13".

Here is my entire class Score.js (with currently hardcoded WIDTH and HEIGHT):
 

"use strict";

function Score(color) {
        PIXI.Container.call(this);

        this.interactive = false;
        this.buttonMode = false;
        this.visible = false;

        this.bgGraphics = new PIXI.Graphics();
        this.bgGraphics.beginFill(color, 1);
        this.bgGraphics.drawRect(0, 0, Score.WIDTH, Score.HEIGHT);
        this.bgGraphics.endFill();
        this.addChild(this.bgGraphics);

        this.text = new PIXI.Text('XXX', {font: '20px Arial', fill: 0xFFFFFF});
        this.text.x = 1;
        this.text.y = 1;
        this.addChild(this.text);
}

Score.prototype = Object.create(PIXI.Container.prototype);
Score.prototype.constructor = Score;

Score.WIDTH  = 36;
Score.HEIGHT = 24;

Score.prototype.setText = function(str) {
        this.text.text = str;
}

I wonder, how to modify my setText function, so that a new rectangle is drawn on each call - as a bounding rectangle for the str string?

I have looked at the PIXI.Text.getBounds() method, but it returns a Matrix and not a Rectangle...

Regards
Alex

[ivan.popelyshev]

docs are wrong, it returns rectangle. Also it does not accept matrix in v4.

[ivan.popelyshev]

It seems that docs arent updated to v4. Please take the latest and run "docs" or whatever target (i dont remember it) . According to https://github.com/pixijs/pixi.js/blob/dev/src/core/text/Text.js there's no special getBounds(), its taken from Sprite where its not accepting Matrix, and it returns Rectangle.