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

用html调整图像大小
通过setScale调整图像大小
相机上的setZoom

谢谢：）

Answer 1

可能不是最佳解决方案，因为它暗示了要回到3.15版本。

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

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

Answer 2

我找到了另一种解决方案，对于移动设备，我调整画布的大小而不是更改相机的缩放比例：

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的图像质量较低

2 个答案: