如何在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编写，所以这可能并不重要）

- Migwell

Answer 1

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

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

• Phaser.Image文档

• 锚点示例

- tomcask

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。

- Koks_rs

Answer 3

关于Phaser，我想补充的是，在weapon.bullets或其他自己创建的组的特定情况下，您需要按照以下方式进行：

weapon.bullets.setAll('scale.x', 0.5);
weapon.bullets.setAll('scale.y', 0.5);

我遇到了困难，最终来到了这个帖子，但它已经关闭了，而在我的情况下并不是我需要的。希望其他人能从中受益 :)

- Dirk