如何在不改变位置的情况下缩放Phaser/PixiJS中精灵的大小？

Question

我正在使用一些我希望在实际游戏中缩小的大图像在Phaser中制作游戏:

create() {
    //Create the sprite group and scale it down to 30%
    this.pieces = this.add.group(undefined, "pieces", true);
    this.pieces.scale.x = 0.3;
    this.pieces.scale.y = 0.3;

    //Add the players to the middle of the stage and add them to the 'pieces' group
    var middle = new Phaser.Point( game.stage.width/2, game.stage.height/2);
    var player_two = this.add.sprite(middle.x - 50, middle.y, 'image1', undefined, this.pieces);
    var player_one = this.add.sprite(middle.x, middle.y-50, 'image2', undefined, this.pieces);
}

然而,因为精灵的大小是缩放的,它们的起始位置也是缩放的,所以相反出现在舞台的中间,它们只出现到中间距离的30%.

如何缩放精灵图像而不影响它们的位置？

(代码偶然出现在Typescript中,但我认为这个特定的示例也是javascript,因此可能无关紧要)

Answer 1

将Sprite.anchor设置为0.5,以便物理主体以Sprite为中心,缩放精灵图像,而不影响它们的位置.

this.image.anchor.setTo(0.5, 0.5);

• Doc Phaser.Image

• 锚示例

Answer 2

如果我像这样缩放精灵:

  var scaleX = 2;
  var scaleY = 2;    
  sprite.scale.set(scaleX , scaleY );

然后我需要这个比例因子来计算精灵的位置:

 var positionX = 100;
 var positionY = 100;

 sprite.x = positionX / scaleX;
 sprite.y = positionY / scaleY;

像这样,你的精灵将处于位置(100,100).问题是sprite.x自动乘以scaleX.

对不起我的英语不好 :)