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

Question

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

在游戏配置中，我将 "type" 更改为 WebGl/Canvas，设置渲染对象参数：antialias、pixelArt、roundPixels。

我的游戏配置：

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

Example

在 html
通过 setScale 调整图像大小
在相机上设置缩放

谢谢:)

Answer 1

可能不是最好的解决方案，因为它意味着要回到 3.15 版本。

在此版本中，您可以像这样在配置中更改分辨率：

var config = {
...
resolution: 3, // the higher the better (but certainly slower)
...
}

Answer 2

我找到了另一个解决方案，对于移动设备，我调整大小 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';

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

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

Phaser 3 low image quality after resize

javascript

phaser-framework