如何在不改变位置的情况下缩放Phaser / PixiJS中精灵的大小？ [英] How can I scale the size of a sprite in Phaser/PixiJS without changing its position?

问题描述

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

I'm making a game in Phaser using some large images that I want to scale down in the actual game:

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

However because the sprites are scaled in size, their starting location is also scaled, so instead appearing in the middle of the stage, they appear only 30% of the distance to the middle.

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

How do I scale the sprite image without it affecting their location?

（代码偶然出现在Typescript中，但我认为这个特定的样本也是javascript所以可能不相关）

(The code is incidentally in Typescript but I think this particular sample is also javascript so that's probably irrelevant)

推荐答案

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

Set Sprite.anchor to 0.5 so the physics body is centered on the Sprite, scale the sprite image without it affecting their location.

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

• Doc Phaser.Image

  Anchor示例

  这篇关于如何在不改变位置的情况下缩放Phaser / PixiJS中精灵的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！