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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25685947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 04:51:01  来源:igfitidea点击:

How can I scale the size of a sprite in Phaser/PixiJS without changing its position?

javascriptphaser-frameworkpixi.js

提问by Migwell

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

我正在 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);
}

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.

但是因为精灵是按比例缩放的,所以它们的起始位置也被缩放了,所以出现在舞台中间,它们只出现在距离中间的 30% 处。

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

如何缩放精灵图像而不影响它们的位置?

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

(该代码偶然在 Typescript 中,但我认为这个特定示例也是 javascript,所以这可能无关紧要)

回答by tomcask

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

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

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

回答by Koks_rs

If I scale sprite for example like this:

如果我像这样缩放精灵:

  var scaleX = 2;
  var scaleY = 2;    
  sprite.scale.set(scaleX , scaleY );

then I need this scale factor to calculate postion of sprite:

那么我需要这个比例因子来计算精灵的位置:

 var positionX = 100;
 var positionY = 100;

 sprite.x = positionX / scaleX;
 sprite.y = positionY / scaleY;

Like this you sprite will be in position (100,100). The problem is that sprite.x automatically multiplied by your scaleX.

像这样,您的精灵将处于位置 (100,100)。问题是 sprite.x 自动乘以你的 scaleX。

Sorry for my english :)

对不起我的英语不好 :)

回答by Dirk

Regarding Phaser, I'd like to add that in the specific case of weapon.bullets or other groups you create yourself you're going to have to do it this way instead:

关于 Phaser,我想补充一点,在 Weapon.bullets 或您自己创建的其他组的特定情况下,您将不得不这样做:

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

I got stuck on this and ended up in this thread, which is closed but in my case just not what I needed. Others will hopefully have some use out of this :)

我被困在这个问题上并最终进入了这个线程,该线程已关闭,但就我而言,这不是我所需要的。其他人希望能有一些用处:)