Làm thế nào tôi có thể mở rộng kích thước của một sprite trong Phaser/PixiJS mà không thay đổi vị trí của nó?

Question

Tôi đang thực hiện một trò chơi trong Phaser sử dụng một số hình ảnh lớn mà tôi muốn mở rộng xuống trong trò chơi thực tế:

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

Tuy nhiên vì sprites được thu nhỏ về kích thước, vị trí khởi đầu của họ cũng có quy mô, vì vậy thay vào đó xuất hiện ở giữa sân khấu, chúng chỉ xuất hiện 30% khoảng cách đến giữa.

Làm cách nào để chia tỷ lệ hình ảnh sprite mà không ảnh hưởng đến vị trí của chúng?

(mã là tình cờ trong nguyên cảo nhưng tôi nghĩ rằng mẫu đặc biệt này cũng là javascript để có thể là không thích hợp)

Answer 1

Set Sprite.anchor đến 0,5 để cơ thể vật lý được tập trung vào các Sprite, chia tỷ lệ ảnh sprite mà không nó ảnh hưởng đến vị trí của họ.

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

• Doc Phaser.Image

• Anchor example

Answer 2

Nếu tôi mở rộng sprite ví dụ như thế này:

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

sau đó tôi cần yếu tố quy mô này để tính toán po stion of sprite:

var positionX = 100; 
var positionY = 100; 

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

Như thế này bạn sẽ ở vị trí (100.100). Vấn đề là sprite.x sẽ tự động nhân với scaleX của bạn.

Xin lỗi vì tiếng anh của tôi :)

Answer 3

Về Phaser, tôi muốn thêm rằng trong trường hợp cụ thể của weapon.bullets hoặc các nhóm khác mà bạn tạo cho mình bạn sẽ phải làm điều đó theo cách này thay vì :

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

Tôi gặp vấn đề này và kết thúc trong chuỗi này, đã bị đóng nhưng trong trường hợp của tôi không phải là những gì tôi cần. Những người khác hy vọng sẽ có một số sử dụng trong số này :)