Jump to content

Drawing rectangle underneath PIXI.Text

Alexander Farber

Recommended Posts

Good afternoon,

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

Screen Shot 2016-08-20 at 17.27.15.png

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) {

        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.text = new PIXI.Text('XXX', {font: '20px Arial', fill: 0xFFFFFF});
        this.text.x = 1;
        this.text.y = 1;

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...


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...