Vignarg Posted November 2, 2015 Share Posted November 2, 2015 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. Link to comment Share on other sites More sharing options...
chg Posted November 2, 2015 Share Posted November 2, 2015 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.) Link to comment Share on other sites More sharing options...
Vignarg Posted November 2, 2015 Author Share Posted November 2, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts