为什么我的 javascript 游戏中角色的像素模糊？

Question

我没有使用浮点值。我调整了放大以向您展示我的意思。起初我以为这是因为我没有使用绝对值，或者在调整精灵大小时没有将宽度和高度乘以 2 的倍数，但即使我这样做了，像素也会模糊。它们在调整大小之前甚至是模糊的，你只需要放大很多就可以看到。请看一看。谢谢

https://tannerchrishop.github.io/metergame/.

https://github.com/TannerChrishop/metergame

Answer 1

这是从抗锯齿中获得的。您可以使用：canvasContext.imageSmoothingEnabled = false; 停止模糊。

在函数中添加这一行doStuff()

function doStuff() {
    canvasContext.drawImage(backgroundImage, 0, 0);

    canvasContext.imageSmoothingEnabled = false; // <--- ADD THIS LINE

    canvasContext.drawImage(zurg, frame1x, frame1y, 32, 64, (zurgx - (16 * (zurgSize - 1))), (zurgy - (32 * (zurgSize - 1))), 32 * zurgSize, 64 * zurgSize);
    animate();

    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 40) holdingDown = true;
        if (e.keyCode == 39) holdingRight = true;
        if (e.keyCode == 38) holdingUp = true;
        if (e.keyCode == 37) holdingLeft = true;
    });
    document.addEventListener('keyup', function (e) {
        if (e.keyCode == 40) holdingDown = false;
        if (e.keyCode == 39) holdingRight = false;
        if (e.keyCode == 38) holdingUp = false;
        if (e.keyCode == 37) holdingLeft = false;
    });
}

为什么我的 javascript 游戏中角色的像素模糊？

Why are my character's pixels blurry in my javascript game?

javascript

pixel

2d-games