web-dev-qa-db-ja.com

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であるため、おそらく無関係だと思います）

javascriptphaser-frameworkpixi.js
12
Migwell

Sprite.anchorを0.5に設定して、物理ボディがスプライトの中心にくるようにし、位置に影響を与えずにスプライト画像を拡大縮小します。

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

たとえば、スプライトを次のようにスケーリングすると、次のようになります。

  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が自動的に乗算されることです。

私の英語でごめんなさい:)

5
Koks_rs

Phaserに関しては、weapon.bulletsまたは自分で作成した他のグループの特定のケースでは、代わりに次のようにする必要があることを追加したいと思います。

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

私はこれに行き詰まり、このスレッドに行き着きました。このスレッドは閉じられていますが、私の場合は必要なものではありません。他の人はうまくいけばこれを利用するでしょう:)

1
Dirk