Appolos Posted September 12, 2018 Share Posted September 12, 2018 Hello ! I need to create a block in center of screen with text. How to set this block and text set to center of screen ?? My code: this.graphics = this.add.graphics(0, 0); // this.graphics.pivot.set(0.5,0.5) this.menuText = this.add.text(0, 0, text, textStyle); this.graphics.beginFill(0xf9cb9c); this.graphics.drawRect( this.game.world.centerX / 2, this.game.world.centerY / 2, this.game.world.width / 2, this.game.world.height / 2 ); this.menuText.setTextBounds( this.game.world.centerX / 2, this.game.world.centerY / 2, this.game.world.width / 2, this.game.world.height / 2 ); this.shareText.setTextBounds( this.game.world.centerX / 2, this.game.world.centerY / 2 + 100, this.game.world.width / 2, this.game.world.height / 2 ); this.restartGame.setTextBounds( this.game.world.centerX / 2, this.game.world.centerY / 2 + 120, this.game.world.width / 2, this.game.world.height / 2 ); this.graphics.addChild(this.shareText); this.graphics.addChild(this.restartGame); this.graphics.addChild(this.menuText); Link to comment Share on other sites More sharing options...
Yehuda Katz Posted September 14, 2018 Share Posted September 14, 2018 You should not use text bounds, they are useful if you have some kind of container within which you want align your text (especially if it's multi-line). For your case anchor is the best option: this.menuText = this.game.add.text(this.game.world.centerX, this.game.world.centerY, 'sample', {font: '60px Arial', fill: '#ffffff'}); this.menuText.anchor.set(0.5, 0.5); this.menuText = this.game.add.text(0, 0, 'sample', {font: '60px Arial', fill: '#ffffff'}); this.menuText.left = this.game.world.centerX; this.menuText.top = this.game.world.centerY; this.menuText.anchor.set(0.5, 0.5); this.menuText = this.game.add.text(this.game.world.centerX, this.game.world.centerY, "sample\nthis is a new line", {font: '60px Arial', fill: '#ffffff', align: 'center'}); this.menuText.anchor.set(0.5, 0.5); The first one is just for single line text, the second sample should help you understand what I did in first one. The third sample shows how to center multi-line text... anchor sets the center point of any object. The 0 means left or top, 1 means right or bottom... any value between those will move object's x/y coordinates within object. Link to comment Share on other sites More sharing options...
Recommended Posts