[英]`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?
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/phaser@3.55.2/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. Phaser.Display.Align.In.Center
适用于我的文本的第一行,但不能使我的第二行居中。 How do I fix it?我如何解决它?
Phaser.Display.Align.In.Center
just aligns single GameObjects. Phaser.Display.Align.In.Center
只对齐单个游戏对象。 Both lines of text are in the same GameObject noti_txt
.两行文本都在同一个
noti_txt
中。
If you want to align both textlines, you could use the align
property of the text GameObject, on creating it.如果你想对齐两个文本行,你可以在创建它时使用文本 GameObject 的
align
属性。 { align: 'center' }
(Or after creation with the property setStyle
here a line to the documentation ) (或者在使用属性
setStyle
在这里创建一行文档之后)
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/phaser@3.55.2/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 to GameObjects.我只推荐它,如果您正在重用文本块(或戏剧效果) ,您可以将文本拆分为 GameObjects。
But for that to work you would also have use the function Phaser.Display.Align.To.BottomCenter
:但要使其正常工作,您还可以使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.