`Phaser.Display.Align.In.Center` 适用于我的文本的第一行，但不居中我的第二行。我如何解决它？

Question

我正在尝试制作某种 notification/message 盒子，为玩家提供推进游戏玩法的提示，这是代码

var game = new Phaser.Game({
  width: 320, height: 200,
  scene: {
    create: create
  }
});
function create() {
  let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
  let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec');
  Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}

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

Phaser.Display.Align.In.Center 适用于我的文本的第一行，但不居中我的第二行。我该如何解决？

Answer 1

Phaser.Display.Align.In.Center 仅对齐单个游戏对象。两行文本都在 same GameObject noti_txt.

如果你想对齐两个文本行，你可以在创建文本游戏对象时使用 align 属性。 { align: 'center' }
（或者创建后用属性 setStyle这里是link to the documentation）

此处修改代码：

var game = new Phaser.Game({
  width: 320, height: 200,
  scene: {
    create: create
  }
});
function create() {
  let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
  let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec', { align: 'center' });
  Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}

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

替代/额外:
我只推荐它，如果你要重复使用文本块（或戏剧效果），你可以将文本拆分为两个游戏对象。

但要使其工作，您还需要使用函数 Phaser.Display.Align.To.BottomCenter:

var game = new Phaser.Game({
  width: 320, height: 200,
  scene: {
    create: create
  }
});
function create() {
  let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
  let noti_txt1 = this.add.text(0, 0, 'Magic is not ready yet');
  let noti_txt2 = this.add.text(0, 0, 'wait a sec');

  // extra visual effect
  this.tweens.add({
    targets: noti_txt2 ,
    alpha: 0,
    ease: 'Power1',
    duration: 1000,
    yoyo: true,
    repeat: -1,
  });
  Phaser.Display.Align.In.Center(noti_txt1, noti_bg);
  // Just adding a minor horizontal offset
  Phaser.Display.Align.To.BottomCenter(noti_txt2, noti_txt1, 0, 10);
}

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

`Phaser.Display.Align.In.Center` 适用于我的文本的第一行，但不居中我的第二行。我如何解决它？

`Phaser.Display.Align.In.Center` works well with the first line of my text but doesn't center my 2nd line. How do I fix it?

javascript

phaser-framework