javascript - 正确缩放 Javascript Canvas 游戏

Question

我正在尝试根据屏幕尺寸动态缩放我的 Canvas 游戏。我了解如何根据屏幕大小调整 Canvas 大小，但我也想调整内容的大小。基本上我希望游戏在每台设备上看起来都一样。我目前遇到的问题是，当使用 4k 屏幕的人玩游戏时，他们可以很容易地看到整个 map 。当某人的屏幕非常小时，他们几乎看不到任何东西。有没有一种简单有效的方法来做到这一点？我已尝试执行以下操作:

var maxWidth = 1920;
var maxHeight = 1080;

...

function resize() {
    c.width = screenWidth = window.innerWidth;
    c.height = screenHeight = window.innerHeight;
    widthToHeight = screenWidth / screenHeight; // ASPECT RATIO

    var scalerAmnt = (maxWidth + maxHeight )
            / (screenWidth + screenHeight);
    context.scale(scalerAmnt, scalerAmnt); 
}

如果我像这样缩放 Canvas ，它会产生不良结果。它偏离中心，而且太大了。如您所见，我设置了最大宽度和高度。基本上，我试图让游戏在每台设备上看起来都与在具有该分辨率的机器上看起来一样。

现场演示:www.vertix.io

更新:这是它当前的样子的图像:

Answer 1

你会遇到一些问题。

如果不设置 ctx.imageSmoothingEnabled = false，高分辨率显示器将显示模糊；如果不设置 ctx.imageSmoothingEnabled = true，低分辨率显示器将显示锯齿效果>.

最好不要超过最大分辨率。这是任意的，我的选择是使用大多数人使用的屏幕分辨率。 Screen stats 的例子有许多网站提供此信息。选择最接近您的人口统计目标的一个。

对于更大的显示器，不要增加分辨率，只需增加 DOM 元素的大小即可。

canvas.width 和 canvas.height 设置 Canvas 的大小。 canvas.style.width 和 canvas.style.height 设置分辨率。

对于分辨率较低的显示器，降低 Canvas 分辨率以适应屏幕分辨率。没有必要为设备提供额外的像素来渲染那些看不见的像素。我亲自重新渲染所有图形以在加载图像时为较低分辨率的显示器校正分辨率。同样，这是为了阻止设备渲染比需要更多的像素(移动设备不能处理太多)，而且平滑方法还有很多不足之处(即它是完全错误的)看到这个视频解释为什么 Computer colour is broken

小心降低分辨率。如果你有一张 100×100 像素的图像，需要将其缩小到 93×93，它看起来一点都不好。为每个渲染元素仔细选择图形尺寸，以尽可能减少到您将在其中显示的最常见分辨率集。

还允许在运动场尺寸上有一些回旋余地，它们不必都完全相同。

更好的方法是将图形存储为基于矢量的图像(例如 SVG 或用于直接将矢量渲染到 Canvas 的自定义格式)，然后在加载时在设备上以正确的分辨率渲染图像。

这样你就剩下了这个方面。您对此无能为力，有些屏幕会比其他屏幕显示更多的游戏 field 。您必须决定在宽度和高度上都可以玩的最小运动场尺寸是多少，并确保它不会低于该尺寸。

但是说了这么多，大部分工作都完成了，你不能回去重做所有的工作，所以这里有一个简单的解决方案。

var nativeWidth = 1024;  // the resolution the games is designed to look best in
var nativeHeight = 768;

// the resolution of the device that is being used to play
var deviceWidth = window.innerWidth;  // please check for browser compatibility
var deviceHeight = window.innerHeight;

您有两个缩放选项。缩放以适合，或缩放以填充。

// A: This will ensure that the scale fills the device but will crop
// some of the top and bottom, or left and right of the play field.
// use the max scale.
var scaleFillNative = Math.max(deviceWidth / nativeWidth, deviceHeight / nativeHeight);

// B: this will ensure that all screens will see all of the native playscreen size
// but some displays will have extra playfield on the sides or top and bottom.
// use the min scale
var scaleFitNative = Math.min(deviceWidth / nativeWidth, deviceHeight / nativeHeight);

将 Canvas 分辨率和大小设置为

canvas.style.width = deviceWidth + "px";
canvas.style.height = deviceHeight + "px";
canvas.width = deviceWidth;
canvas.height = deviceHeight;

现在需要设置渲染比例

// ctx is the canvas 2d context 
ctx.setTransform(
    scaleFitNative,0, // or use scaleFillNative 
    0,scaleFitNative,
    Math.floor(deviceWidth/2),
    Math.floor(deviceHeight/2)
);

这已将屏幕中心设置为原点。

更新

我原来的回答有误。

要获取到左上角的原始资源的偏移量是

var offSetToNativeTop = -nativeHeight/2; // incorrect
var offSetToNativeleft = -nativeWidth/2; // incorrect

应该是……

var offSetToNativeTop = (-nativeHeight/2)*scaleFitNative; // correct
var offSetToNativeleft = (-nativeWidth/2)*scaleFitNative; // correct

或

var offSetToNativeTop = (-nativeHeight/2)*scaleFillNative; // correct
var offSetToNativeleft = (-nativeWidth/2)*scaleFillNative; // correct

对于由此造成的任何不便，我们深表歉意。

获取设备左上角的偏移量

var offsetDeviceTop = -(deviceHeight/scaleFitNative)/2;
var offsetDeviceLeft = -(deviceWidth/scaleFitNative)/2;

获取设备playfield显示大小

var deviceDisplayWidth = deviceWidth/scaleFitNative;
var deviceDisplayHeight = deviceHeight/scaleFitNative;

不要忘记平滑。

if(scaleFitNative < 1){
    ctx.imageSmoothingEnabled = true; // turn it on for low res screens
}else{
    ctx.imageSmoothingEnabled = false; // turn it off for high res screens.
}

您也可以在单个渲染项目上执行此操作，具体取决于比例和您对它们看起来如何平滑和缩小以及平滑扩展或不平滑大小的个人偏好。

这应该为您提供为所有设备渲染图形所需的一切