Estoy confundido sobre el caso de uso de Phaser.Display.Align.In.Center , el siguiente código está adaptado de un ejemplo oficial
class Example extends Phaser.Scene { constructor () { super(); } preload() { this.load.path = 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/'; this.load.image('pic', 'pics/barbarian-loading.png'); } create () { const pic = this.add.image(400, 300, 'pic'); //Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600)); } } var config = { width: 800, height: 600, backgroundColor: '#666', //0xf3f3f3 scene: [Example] } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>donde he comentado esta línea
//Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));No importa si uso esta línea, obtengo exactamente el mismo resultado, una imagen centrada.
Teniendo en cuenta que ya tenemos setOrigin , ¿para qué se usa "Phaser.Display.Align.In.Center"?
Phaser.Display.Align se utiliza para colocar objetos en relación con otros objetos. setOrigin solo se usa para definir desde dónde se deben calcular las coordenadas del objeto.
En este ejemplo, puede ver cómo puede colocar un objeto en relación con otro (con Phaser.Display.Align ), pero sin saber/establecer las coordenadas para él.
Es bueno/usado para colocar imágenes una encima de la otra, como ropa, armas, texto en artículos , ...
En cada clic, el rectángulo verde se reposicionará, con Phaser.Display.Align .
(Estoy usando Phaser.Display.Align.In y Phaser.Display.Align.To para ilustrar la diferencia) .
function create () { this.add.text(10,10, 'Click red Cube', '#ffffff') rect1 = this.add.rectangle(200, 100, 50, 50, 0xff0000); rect2 = this.add.rectangle(-50, -50, 30, 30, 0x00ff00); Phaser.Display.Align.To.TopCenter(rect2, rect1); rect1.setInteractive(); rect1.on('pointerdown', alignObject) } function alignObject(){ switch(alignObjPoistion){ case 0: Phaser.Display.Align.In.TopCenter(rect2, rect1); break; case 1: Phaser.Display.Align.In.Center(rect2, rect1); break; case 2: Phaser.Display.Align.In.BottomCenter(rect2, rect1); break; case 3: Phaser.Display.Align.To.BottomCenter(rect2, rect1); break; case 4: Phaser.Display.Align.To.TopCenter(rect2, rect1); alignObjPoistion = -1; } alignObjPoistion++; } var alignObjPoistion = 0; var rect1; var rect2; var config = { width: 400, height: 200, scene: { create } } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>