Estoy tratando de centrar un círculo en un rectángulo dado. Uno de los enfoques para hacer el trabajo podría ser que graphics funcionen con Phaser.Display.Align.In.Center y tengo problemas para hacerlo. Aquí está el código.
class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } create() { let btn = this.add.rectangle(800, 600, 200, 150, '#000').setOrigin(1); let txt = this.add.text(0, 0, 'click'); Phaser.Display.Align.In.Center(txt, btn, ); let graphics = this.add.graphics({ x: 750, y: 550 }); var shape = new Phaser.Geom.Circle(0, 0, 24); graphics.fillStyle(0xff0000, 1); graphics.fillCircleShape(shape); //Phaser.Display.Align.In.Center(graphics, btn); } } var config = { width: 800, height: 600, backgroundColor: '#555', scene: [BootScene] } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script> Hay 3 partes visuales en el código anterior: el rectángulo btn , el texto txt y los graphics .
Phaser.Display.Align.In.Center funciona bien con btn y txt .
graphics funcionan bien con btn usando
this.add.graphics({ x: 750, y: 550 });Sin embargo, si elimino el comentario de la siguiente línea a continuación
Phaser.Display.Align.In.Center(graphics, btn); los graphics se han ido, no importa si establecí la configuración como { x: 750, y: 550 } o { x: 0, y: 0 } .
¿Qué me estoy perdiendo?
Sé que podría usar algo como
let circle2 = this.add.circle(0, 0, 32, 0xf00000); Phaser.Display.Align.In.Center(btn_circle, circle2); Me gustaría saber por qué no funciona cuando combino graphics y Phaser.Display.Align.In.Center juntos.
Actualización: parece ser un error de Phaser (o un error en la documentación) , ya que después de llamar a
Phaser.Display.Align.In.Centeren el objeto de gráficos, las propiedadesxeyse establecen enNaN, y según la documentaciónAligndebería aceptar un GameObject, que es el objetoGraphics.
Aquí hay una posible solución:
graphics , con la función generateTexture textura en el objeto de graphicsbtnsetDepth al objeto txt , para que sea visible class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } create() { let btn = this.add.rectangle(300, 175, 200, 150, '#000').setOrigin(1); let txt = this.add.text(0, 0, 'click'); Phaser.Display.Align.In.Center(txt, btn ); let graphics = this.make.graphics({ x: 24, y: 24, }); var shape = new Phaser.Geom.Circle(24, 24, 24); graphics.fillStyle(0xff0000, 1); graphics.fillCircleShape(shape); graphics.generateTexture('gCircle', 48, 48); let image = this.add.image(200, 200, 'gCircle'); Phaser.Display.Align.In.Center(image, btn); // only to make the Button visible txt.setDepth(2); } } var config = { width: 400, height: 200, backgroundColor: '#555', scene: [BootScene] } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>