如何在不改變其位置的情況下在 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);

• 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 。

Answer 3

關於 Phaser，我想補充一點，在 Weapon.bullets 或您自己創建的其他組的特定情況下，您將不得不這樣做：

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

我被困在這個問題上並最終進入了這個線程，該線程已關閉，但就我而言，這不是我所需要的。 其他人希望能有一些用處:)