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

Question

I'm trying to make some kind of a notification/message box giving players hints to advance the gameplay, here is the code

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/[email protected]/dist/phaser.js"></script>

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?

Answer 1

Phaser.Display.Align.In.Center just aligns single GameObjects. Both lines of text are in the same GameObject noti_txt.

If you want to align both textlines, you could use the align property of the text GameObject, on creating it. { align: 'center' }
(Or after creation with the property setStyle here a link to the documentation)

Here the adapted Code:

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/[email protected]/dist/phaser.js"></script>

Alternatively / Extra:
I would only recommended it, if you are reusing text blocks (or dramatic effect), you could split the text, into two GameObjects.

But for that to work you would also have use the function 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/[email protected]/dist/phaser.js"></script>