Phaser 3：相对于高度改变精灵的宽度

Question

我希望能够更改我的 sprite 的高度以适合菜单，但是当我使用 sprite.displayHeight = menu.height 更改高度时，它的宽度不会随比例缩放，而是 stretched/squashed.

有没有办法相对于高度缩放宽度，以保持精灵的原始比例？

Answer 1

我不知道有什么特殊函数可以做到这一点out-of-the-box，但是你可以实现这个，用只有一个额外的 行代码。 不需要额外的计算。
（这也适用于 displayHeight）

先设置图片的宽度：img.displayWidth = 100;
然后设置Y轴的scale（因为X-axis是通过displayWidth设置的）：img.scaleY = img.scaleX;

Here the documentation, that points this out:

"...The displayed width of this Game Object.
This value takes into account the scale factor.
Setting this value will adjust the Game Object's scale property..."

这是一个工作演示：

// Minor formating for Whosebug
document.body.style = "display: flex;flex-direction: column;";    

function preload ()
{
    this.load.image('img', 'https://labs.phaser.io/assets/pics/contra3.png');
}

function create ()
{
    let imgOrig = this.add.image(100,100, 'img');
    let img = this.add.image(320, 100, 'img');
    img.displayWidth = 100;

    // extra line to scale the image proportional
    img.scaleY = img.scaleX;
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 160,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Phaser 3：相对于高度改变精灵的宽度

Phaser 3: Change width of sprite relative to height

javascript

phaser-framework