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);

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。

对不起我的英文：）

Answer 3

关于Phaser，我想在你自己创建的weapon.bullets或其他组的特定情况下补充一下，你将不得不这样做：

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

我陷入了困境，并最终进入了这个线程，这个线程已关闭但在我的情况下并不是我需要的。其他人希望能有一些用处：）

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

3 个答案: