`Phaser.Display.Align.In.Center` 適用於我的文本的第一行，但不能使我的第二行居中。 我如何解決它？

Question

我正在嘗試制作某種通知/消息框，為玩家提供推進游戲玩法的提示，這是代碼

 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只對齊單個游戲對象。 兩行文本都在同一個noti_txt中。

如果你想對齊兩個文本行，你可以在創建它時使用文本 GameObject 的align屬性。 { align: 'center' }
（或者在使用屬性setStyle在這里創建一行文檔之后）

這里改編的代碼：

 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>

替代/額外：
我只推薦它，如果您正在重用文本塊（或戲劇效果） ，您可以將文本拆分為 GameObjects。

但要使其正常工作，您還可以使用 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/phaser@3.55.2/dist/phaser.js"></script>