0
228
Views`Phaser.Display.Align.In.Center` funciona bien con la primera línea de mi texto pero no centra mi segunda línea. ¿Cómo lo soluciono?
Estoy tratando de crear algún tipo de cuadro de notificación/mensaje que brinde a los jugadores sugerencias para avanzar en el juego, aquí está el código
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 funciona bien con la primera línea de mi texto, pero no centra la segunda línea. ¿Cómo lo soluciono?
1 answers
Answer question0
Phaser.Display.Align.In.Center solo alinea GameObjects individuales. Ambas líneas de texto están en el mismo GameObject noti_txt .
Si desea alinear ambas líneas de texto, puede usar la propiedad de align del GameObject de texto al crearlo. { align: 'center' }
(O después de la creación con la propiedad setStyle aquí un enlace a la documentación )
Aquí el Código adaptado:
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> Alternativamente / Extra :
Solo lo recomendaría, si está reutilizando bloques de texto (o efecto dramático) , podría dividir el texto en dos GameObjects.
Pero para que eso funcione, también tendría que usar la función 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>