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

Question

我希望能够更改精灵的高度以适应菜单，但是当我使用 sprite.displayHeight = menu.height 更改高度时，它的宽度不会随之缩放它会被拉伸/压扁。

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

Answer 1

我不知道任何特殊函数可以开箱即用，但是您只需额外一行代码即可实现此目的. 无需额外计算。
（这也适用于 displayHeight）

1. 首先设置图像的宽度：img.displayWidth = 100;
2. 然后设置Y轴的比例（因为X轴是通过设置displayWidth来设置的）：img.scaleY = img.scaleX;

这里文档，指出了这一点输出：

“...此游戏对象的显示宽度。
该值考虑了比例因子。
设置此值将调整游戏对象的缩放属性...”

这里是一个工作演示：

// Minor formating for stackoverflow
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/[email protected]/dist/phaser.js"></script>