考虑到我们已经有了 setOrigin，"Phaser.Display.Align.In.Center" 有什么用？

Question

我对Phaser.Display.Align.In.Center的用例感到困惑，以下代码改编自an official example

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>

我把这行注释掉的地方

//Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));

无论我是否使用这条线，我都会得到完全相同的结果，一个居中的图像。

考虑到我们已经有 setOrigin，“Phaser.Display.Align.In.Center”有什么用？

Answer 1

Phaser.Display.Align 用于相对于其他对象定位对象。 setOrigin 仅用于定义应从何处计算对象的坐标。

在此示例中，您可以看到如何相对于另一个对象定位对象（使用 Phaser.Display.Align），但是 没有 knowing/setting 坐标 给它。

It is good/used for, positioning to images on top/next of eachother like clothes, guns, text on items, ...

每次点击，绿色矩形都会重新定位，Phaser.Display.Align。
（我同时使用 Phaser.Display.Align.In 和 Phaser.Display.Align.To 来说明区别）.

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>

考虑到我们已经有了 setOrigin，"Phaser.Display.Align.In.Center" 有什么用？

Considering we already have `setOrigin`, what is "Phaser.Display.Align.In.Center" used for?

javascript

phaser-framework