Jump to content

Group aligment


vLight
 Share

Recommended Posts

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}` 

image.thumb.png.7ae13ef2423196148f23d4ea88d4b445.png

I was expecting something like this (photoshoped)

expected_menu.thumb.png.ced81b7023188266b1436063367d28ed.png

 

Do I miss something ?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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