Three of four texts disappear

[Vignarg]

Basically I have the game window divided into four "rectangles" (squares) and centered in each rectangle should be my text. The top left quadrant (fire) works - just like the example says it should. The other three don't work regardless of how I try to trick them in.Most are half off the screen in some fashion or another. You'll see I do some of them slightly different - that's just me trying different things. But they all fail when I mimic the top left (fire). 

 

I suspect it has something to do with starting them at 0, 0? If start Fire outside its eventual text bounds, it also goes bonkers and disappears. But starting the others at the edge, center, or anywhere inside their eventual text bounds doesn't address the issue either. 

 

I just want the text centered inside each rectangle. I'd also really be interested in why the text is disappearing if anyone can explain that. 

 

module EleKnights {    export class WorldMap extends Phaser.State {        fireDomain: Phaser.Rectangle;        earthDomain: Phaser.Rectangle;        waterDomain: Phaser.Rectangle;        windDomain: Phaser.Rectangle;        graphics: Phaser.Graphics;        fireText: Phaser.Text;        earthText: Phaser.Text;        waterText: Phaser.Text;        windText: Phaser.Text;         create() {            // Reusable            this.graphics = this.game.add.graphics(0, 0);            var style = { font: '50px Prociono', fill: '#003300', boundsAlignH: 'center', boundsAlignV: 'middle' };            // Set bounds for regions            this.fireDomain = new Phaser.Rectangle(0, 0, this.world.centerX, this.world.centerY);                        this.earthDomain = new Phaser.Rectangle(this.world.centerX, 0, this.world.width, this.world.centerY);            this.windDomain = new Phaser.Rectangle(this.world.x, this.world.centerY, this.world.centerX, this.world.height)            this.waterDomain = new Phaser.Rectangle(this.world.centerX, this.world.centerY, this.world.width, this.world.height);                        // Fire                        this.graphics.beginFill(0xA31919);            this.graphics.drawRect(this.fireDomain.x, this.fireDomain.y, this.fireDomain.width, this.fireDomain.height);            this.fireText = this.add.text(0, 0, 'Fire', style);            this.fireText.setTextBounds(this.fireDomain.x, this.fireDomain.y, this.fireDomain.width, this.fireDomain.height);                        // Earth            this.graphics.beginFill(0x8A5C2E);            this.graphics.drawRect(this.earthDomain.x, this.earthDomain.y, this.earthDomain.width, this.earthDomain.height);            this.earthText = this.add.text(0, 0, 'Earth', style);            this.earthText.setTextBounds(this.earthDomain.x, this.earthDomain.y, this.earthDomain.width, this.earthDomain.height);                     // Wind            this.graphics.beginFill(0xCCCCFF);            this.graphics.drawRect(this.windDomain.x, this.windDomain.y, this.windDomain.width, this.windDomain.height);            this.windText = this.add.text(this.windDomain.centerX, this.windDomain.centerY, 'Wind', style);            this.windText.setTextBounds(this.windDomain.x, this.windDomain.y, this.windDomain.width, this.windDomain.height);            // Water            this.graphics.beginFill(0x0099FF);            this.graphics.drawRect(this.waterDomain.x, this.waterDomain.y, this.waterDomain.width, this.waterDomain.height);            this.waterText = this.add.text(this.waterDomain.centerX, this.waterDomain.centerY, 'Water', style);            this.waterText.setTextBounds(this.waterDomain.x, this.waterDomain.y, this.waterDomain.width, this.waterDomain.height);                    }    }}

Thanks in advance for any assistance provided. 

[chg]

Basically I have the game window divided into four "rectangles" (squares) and centered in each rectangle should be my text. The top left quadrant (fire) works - just like the example says it should. The other three don't work regardless of how I try to trick them in.Most are half off the screen in some fashion or another...

 

this.earthDomain = new Phaser.Rectangle(this.world.centerX, 0, this.world.width, this.world.centerY);...this.earthText.setTextBounds(this.earthDomain.x, this.earthDomain.y, this.earthDomain.width, this.earthDomain.height);

Thanks in advance for any assistance provided.

Looks like you are setting the earthDomain rectangle to be the full world/screen width, and offsetting it by half the width, hence why it is half off-screen I suspect (ie. the 3rd and 4th params of the Rectangle constructor and the setTextBounds() method are width and height respectively, not the x and y coords of the bottom right corner of the rect. / bounding rect.)

[Vignarg]

I had to read that a couple times to realize what you're saying. You're completely right. I thought the third and fourth params were the coords! Thanks for much for taking the time to look. This has vexed me terribly lol.