vLight Posted January 24, 2021 Share Posted January 24, 2021 Hi there, I'm trying to center (or align in general) a group of text-objects in the middle of a scene. I do use `Phaser.Actions.GridAlign()` for that. It kinda works but not accurate and if I set x = 0 and y = 0 (top-left corner) in config for GridAlign() -> the group is off-screen. Phaser 3.52 so take a look at the code // config.js export default { type: Phaser.AUTO, parent: 'content', backgroundColor: '#2d2d2d', width: Math.min(1024, window.innerWidth), height: Math.min(1024, window.innerHeight), localStorageName: 'phaseres6webpack' } // scenes/gamescene.js class GameScene extends Phaser.Scene { constructor() { super('GameScene') } create(data) { console.log('GameScene') this.drawUI() } } the drawUI() method drawUI() { const fontSize = 42 const buttonFontStyle = { font: `${fontSize}px Merienda`, fill: '#0f0' } let itemWidths = new Array() this.menu = this.add.group({ name: 'game_scene_menu', active: true, createCallback: (gameObj) => { console.log('Menu-Group create...', gameObj) // collect width of each gameObject in a list itemWidths.push(gameObj.width) } }) const sceneCenterPoint = this.cameras.main.midPoint const menuButtonsLabels = ['Play', 'Settings', '----Quit----'] menuButtonsLabels.forEach((btnTitle) => { const menuBtn = new TextButton(this, 0, 0, btnTitle, buttonFontStyle) this.menu.add(menuBtn) this.add.existing(menuBtn) }) console.log(sceneCenterPoint) // actualy its Math.max.apply(this, itemWidths) so cellWidth equals to the "longest" menu-title, but for debug just a static value of 140px const menuItemWidth = 140; Phaser.Actions.GridAlign(this.menu.getChildren(), { width: 1, height: -1, cellWidth: menuItemWidth, cellHeight: fontSize + 6, position: Phaser.Display.Align.TOP_CENTER, x: 0, // actualy to top-left y: 0 // actualy to top-left }); } and the TextButton class // components/ui/TextButton.js class TextButton extends Phaser.GameObjects.Text { constructor(scene, x, y, text, style, callback) { super(scene, x, y, text, style); this.buttonText = text this.setInteractive({ useHandCursor: true }); // basic evens this.on('pointerover', this.enterButtonHoverState, this) .on('pointerout', this.enterButtonRestState, this) .on('pointerdown', this.enterButtonActiveState, this) .on('pointerup', () => { this.enterButtonHoverState(); if (typeof callback === 'function') { callback(); } }) } // event-handlers ... } So after all it looks like this. Doesn't look like it's at `{x:0, y:0}` I was expecting something like this (photoshoped) Do I miss something ? Link to comment Share on other sites More sharing options...
Recommended Posts