2

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

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;

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

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

我遇到的其他方法包括以高分辨率渲染整个画布元素，然后缩小整个画布元素（再次降低视觉效果？）并让 WinJS 通过附加带有“-100”、“-140”和“-180”（似乎这只适用于内联/css图像而不是canvas/PreloadJS）。

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

4

2 回答 2

1

在这里有帮助的控件是ViewBox 控件，它位于 WinJS.UI 命名空间中。

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

查看 Visual Studio 中的 Fixed Layout App 模板，了解如何快速开始使用 ViewBox 控件。您可以在 Windows 开发中心阅读有关应用程序模板的更多信息，包括固定布局应用程序模板。

并且一定要查看缩放到屏幕的指南。

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

于 2013-03-04T14:35:14.153 回答
0

ViewBox 控件会将画布缩放到设备分辨率，这可能是也可能不是您想要的。缩放一个充满像素的画布会产生更大的像素。它不会像您所追求的那样产生更高质量的图像。

如果您想要一款真正具有自适应性和高性能的游戏，那么您将需要根据分辨率动态渲染您的画布对象。如果设备是 1366x768，那么画布应该是 1366x768，一些精灵应该是 100x100 像素。如果设备是 1600x900，那么画布应该是 1600x900，同样的精灵应该是 140x140。这将在您的代码中使用一些逻辑。

首先，您将在原始帖子中设置画布的大小，然后每个视觉资产都需要相对于该画布大小定义其大小。最好编写一些代码来抽象任务。

于 2013-03-04T19:32:37.307 回答