Question

我正在使用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）。

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

Answer 1

在这里帮助一堆的控件是ViewBox control，可以在WinJS.UI命名空间中找到。

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

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

另请务必查看guidelines for scaling to screens。

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

Answer 2

ViewBox控件将把画布缩放到设备分辨率，这可能是也可能不是你想要的。缩放装满像素的画布可以获得更大的像素。它不会像你追求的那样产生更高质量的图像。

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

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

如何在Windows 8 WinJS游戏中处理分辨率？

2 个答案: