javascript - Phaser 3 调整大小后图像质量低

Question

Phaser 3(版本。3.20.1)我找不到在调整图像大小时不损失质量的方法。 我尝试了不同的变体:在图像上 setDisplaySize 或 setScale 以及在相机上 setZoom，但图像看起来仍然像素化。

在游戏配置中，我将“类型”更改为 WebGl/Canvas，设置为渲染对象参数:抗锯齿、pixelArt、roundPixels。

我的游戏配置:

{
    type: Phaser.AUTO,
    disableContextMenu: true,
    banner: false,
    scale: {
        height,
        width,
        parent: 'canvas',
        mode: Phaser.Scale.NONE,
        autoRound: true,
    },
    render: {
        roundPixels: true,
    },
}

Example

1. 调整 html 中图像的大小
2. 通过setScale调整图像大小
3. 在相机上设置缩放

谢谢:)

Answer 1

我找到了另一种解决方案，对于移动设备，我调整 Canvas 大小而不是更改相机变焦:

this.scene.scale.parent.width = Math.round(width);
this.scene.scale.parent.height = Math.round(height);

this.scene.scale.canvas.style.width = Math.round(width) + 'px';
this.scene.scale.canvas.style.height = Math.round(height) + 'px';
game.canvas.style.width = width + 'px';
game.canvas.style.height = height + 'px';

我花了将近一周的时间来解决这个问题，希望有人能帮忙