Как я могу масштабировать размер спрайта в 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, чтобы физическое тело находилось в центре спрайта, масштабируйте изображение спрайта, не влияя на его местоположение.

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.setAll('scale.x', 0.5);
weapon.bullets.setAll('scale.y', 0.5);

Я застрял на этом и оказался в этой теме, которая закрыта, но в моем случае просто не то, что мне было нужно. Остальным, надеюсь, будет что-то из этого пригодиться:)