Phaser 3：文本在矩形内居中

Question

我正在尝试制作一个小菜单栏，但是我很难将按钮的文本放置在按钮的矩形内居中。目前，我只是简单地为文本提供与我的矩形相同的 x 和 y 设置，但这并没有使它们居中。是否有选项可以让文本在矩形内居中？

function create()
{
   // Menu Bar
   gameState.menu.height = 80;
   gameState.menu.width = this.gameWidth;
   gameState.menu.x = gameState.gameWidth/2;
   gameState.menu.y = gameState.gameHeight - (gameState.menu.height - gameState.menu.height/2);
   gameState.menu.options = [
       "Feed", "Bathe", "Play"
   ];
   gameState.menu.items = [];

   gameState.menu.bar = this.add.rectangle(gameState.menu.x, gameState.menu.y, gameState.gameWidth, gameState.menu.height, '0x123456');
   gameState.menu.itemSize = (gameState.gameHeight/100*90) / gameState.menu.options.length;

   // Menu Items
   gameState.menu.itemSpace = (gameState.gameHeight - (gameState.menu.itemSize * gameState.menu.options.length)) / (gameState.menu.options.length + 1);

   x = gameState.menu.itemSpace + (gameState.menu.itemSize / 2);
   index = 0;
   for (o of gameState.menu.options)
   {
       gameState.menu.items.push(this.add.rectangle(x, gameState.gameHeight - (gameState.menu.height/2), gameState.menu.itemSize, gameState.menu.height - 20, '0x654321'));
       o = this.add.text(x, gameState.gameHeight - (gameState.menu.height/2), o, gameState.textStyle);
    
       index++;
       x += gameState.menu.itemSize + gameState.menu.itemSpace;
   };

}

Answer 1

如评论中所述，快速解决方案是使用Phaser.Display.Align.In.Center，详细信息请参阅()，或文档（也在初始答案中链接）。

我不确定为什么会出现评论中提到的错误。我将你的代码转换为使用 Phaser.Display.Align.In.Center 函数，这个版本应该可以工作（解决问题）。

Demo-Code:
（不得不伪造一些代码）

let Scene = {
      create(){
       // Menu Bar  
       // Faked Start data
       let gameState = {menu:{}};
       gameState.gameWidth = 400;
       gameState.gameHeight = 200;
       // Faked End data
       
       gameState.menu.height = 80;
       gameState.menu.width = this.gameWidth;
       gameState.menu.x = gameState.gameWidth/2;
       gameState.menu.y = gameState.gameHeight - (gameState.menu.height - gameState.menu.height/2);
       gameState.menu.options = [
           "Feed", "Bathe", "Play"
       ];
       gameState.menu.items = [];

       gameState.menu.bar = this.add.rectangle(gameState.menu.x, gameState.menu.y, gameState.gameWidth, gameState.menu.height, '0x123456');
       gameState.menu.itemSize = (gameState.gameHeight/100*90) / gameState.menu.options.length;

       // Menu Items
       gameState.menu.itemSpace = (gameState.gameHeight - (gameState.menu.itemSize * gameState.menu.options.length)) / (gameState.menu.options.length + 1);

       let x = gameState.menu.itemSpace + (gameState.menu.itemSize / 2);

       for (let idx = 0; idx < gameState.menu.options.length; idx++)
       {
           let optionText = gameState.menu.options[idx];
           let button  = this.add.rectangle(x, gameState.gameHeight - (gameState.menu.height/2), gameState.menu.itemSize, gameState.menu.height - 20, '0x654321');
           let text  = this.add.text(0, 0, optionText);
           gameState.menu.items.push(button);
           Phaser.Display.Align.In.Center(text, button);
           x += gameState.menu.itemSize + gameState.menu.itemSpace;
       };

      }

    }
    
    const config = {
      type: Phaser.AUTO,
      width:400,
      height:200,
      scene: [Scene],
      physics: {
          default: 'arcade',
          arcade: {
          debug: false,
          gravity: { y: 400 }
          }
      }
    }


   const game = new Phaser.Game(config)

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

p.s.: 我会尽量不要使用太多全局变量，将它们保留在本地或者可能使用属性。 会让你的生活更轻松运行.

p.p.s.: 有一个免费插件可用于在移相器中创建 UI：https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-menu/

它有点棘手（需要“一些”boilerplate-code），但这个插件有很多功能。

此处如何使用选项卡控件制作菜单：

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() { 
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });      
    }

    create() {
      
        let buttonName = ['Button 1', 'Button 2', 'Button 3'];
        let tabs = this.rexUI.add.tabs({
                x: 200,
                y: 100,

                background: this.rexUI.add.roundRectangle(0, 0, 10, 10, 0, 0x333333),
                panel: this.rexUI.add.roundRectangle(0, 0, 400, 150, 20, 0x333333),

                bottomButtons: buttonName.map(name => this.createButton(name)),

                space: {
                    left: 20,
                    right: 20,
                    top: 20,
                    bottom: 20,

                    leftButtonsOffset: 20,
                    rightButtonsOffset: 20,
                    topButtonsOffset: 20,
                    bottomButtonsOffset: 20,

                    leftButton: 10,
                    rightButton: 10,
                    topButton: 10,
                    bottomButton: 10
                }
            })
            .layout()
    }
  
  createButton(text){  
    return this.rexUI.add.label({
      background: this.rexUI.add.roundRectangle(0, 0, 100, 50, {
        bl: 0,
        br: 0
      }, 0x654321),
      text: this.add.text(0, 0, text, {
        fontSize: '12pt'
      }),
      space: {
        left: 10,
        right: 10,
        top:10,
        bottom:10
      }
    });
  }

}


const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 200,
    scene: Demo
};

const game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Phaser 3：文本在矩形内居中

Phaser 3: Text centered within Rectangle

javascript

phaser-framework