javascript - 如何处理 Windows 8 WinJS 游戏中的分辨率？

Question

我正在使用 HTML5、 Canvas 和 WinJS 创建适用于 Windows 8 的游戏。游戏接近完成，一切正常。但是，我将继续处理图形并开始关注我实现对不同分辨率的支持的方式。在我开始这个项目时，我已经阅读了很多关于如何处理分辨率的信息，尽管与 Canvas 相关的信息很少。我最终实现了这样的事情:

if (window.innerWidth >= 2560 && window.innerHeight >= 1440) {           //Full 2560x1440(16:9) / Letterbox 2560x1600(16:10)
    canvas.width = 2560;
    canvas.height = 1440;
} else if (window.innerWidth >= 1920 && window.innerHeight >= 1080) {    //Full 1920x1080(16:9) / Letterbox 1920x1200(16:10)
    canvas.width = 1920;
    canvas.height = 1080;
} else if (window.innerWidth >= 1600 && window.innerHeight >= 900) {     //Full 1600x900(16:9) / Border 1680x1050(16:10)
    canvas.width = 1600;
    canvas.height = 900;
} else if (window.innerWidth >= 1360 && window.innerHeight >= 768) {     //Full 1366x768(16:9) / Border 1440x900 (16:10) / Cut 1360x768(<16:9)
    canvas.width = 1366;
    canvas.height = 768;
} else if (window.innerWidth >= 1280 && window.innerHeight >= 720) {     //Full 1280x720(16:9) / Letterbox 1280x768(<16:9) / Letterbox 1280x800(16:10) / Letterbox 1280x1024(5:4)
    canvas.width = 1280;
    canvas.height = 720;
} else {                                                                 //Letterbox 1024x768(4:3)
    canvas.width = 1024;
    canvas.height = 575;
}

pixelScale = canvas.height / 768;
assetScale = canvas.height;

它背后的基本思想是它在给定的分辨率下找到最适合 Canvas 的尺寸(在屏幕比例不同的情况下使用信箱)。然后将 assetScale 应用于 list 中的所有图像，以便 PreloadJS 加载正确大小的位图(例如 images/1080/myimage.png)，pixelScale 用于将坐标从 1366x768 的工作分辨率缩放到操作分辨率(所以事情在其他分辨率上正确定位)。

但是，我不再确定这是否真的是处理它的最佳/正确方法，也不确定我是否可能将其过度复杂化。在 body 元素中添加了一个类以帮助缩放菜单元素后，我突然注意到在 VS2012 的 Blend 中高 DPI 设备(即 1920x1080 @ 140%)将分辨率选为 768 而不是 1080。这不会导致降低高 DPI 设备的视觉效果？我是否需要单独考虑这一点，如果需要，如何考虑？或者它是我忽略的东西？

我遇到的其他方法包括以高分辨率渲染整个 Canvas 元素，然后缩小整个 Canvas 元素(再次降低视觉效果？)并让 WinJS 通过在文件中附加“-100”、“-”自动挑选图像140"和 "-180"(似乎这只适用于内联/css 图像而不适用于 canvas/PreloadJS)。

有人可以指出我如何处理这个问题的正确方向吗？似乎有很多错误信息。最后，我只想确保所有用户都能获得为他们的计算机/设备分辨率提供的最佳质量图像。非常感谢

Answer 1

对这里有帮助的控件是 ViewBox control。 ，在 WinJS.UI 命名空间中找到。

ViewBox 控件会自动缩放其中包含的 UI 元素，因此您不必担心手动确定如何使 UI 适合当前分辨率。

查看 Visual Studio 中的固定布局应用程序模板，以快速开始使用 ViewBox 控件。您可以在 Windows 开发人员中心阅读有关应用模板(包括固定布局应用模板)的更多信息。

并且一定要查看 guidelines for scaling to screens .

有关 Windows 应用商店应用程序开发的更多信息，请注册 Generation App .