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

♀尐吖头ヾ 提交于 2019-12-22 03:17:19

问题


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

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?

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


回答1:


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 example




回答2:


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.

Sorry for my english :)




回答3:


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:

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



来源:https://stackoverflow.com/questions/25685947/how-can-i-scale-the-size-of-a-sprite-in-phaser-pixijs-without-changing-its-posit

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!