0
227
Views`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. How do I fix it?
1 answers
Answer question0
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/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 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/phaser@3.55.2/dist/phaser.js"></script>