Как я могу масштабировать размер спрайта в Phaser/PixiJS, не меняя его положения?

Я делаю игру в 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, так что это, вероятно, не имеет значения)


javascript pixi.js phaser-framework
person Migwell    schedule 05.09.2014    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Установите для Sprite.anchor значение 0,5, чтобы физическое тело располагалось по центру спрайта, масштабируйте изображение спрайта, не влияя на его расположение.

this.image.anchor.setTo(0.5, 0.5);
person tomcask    schedule 08.09.2014

arrow_upward
7
arrow_downward

Вы можете масштабировать свой спрайт следующим образом:

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.

person Koks_rs    schedule 27.12.2014

arrow_upward
1
arrow_downward

Что касается Phaser, я хотел бы добавить, что в конкретном случае с weapon.bullets или другими группами, которые вы создаете сами, вам придется делать это следующим образом:

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

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

person Dirk    schedule 25.04.2017