如何处理Windows 8 WinJS游戏的分辨率

How to handle resolutions in a Windows 8 WinJS game?

本文关键字：WinJS 游戏 分辨率 Windows 何处理 处理      更新时间：2023-09-26

我正在使用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元素添加了一个类来帮助缩放菜单元素后，我突然注意到在VS2012的Blend中，高dpi设备(即1920x1080 @ 140%)将分辨率选为768而不是1080。这不会导致高dpi设备的视觉效果下降吗?我是否需要单独考虑这一点?如果需要，如何考虑?还是我忽略了它?

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

谁能告诉我怎么处理这件事?似乎有很多关于。最后，我只是想确保所有用户都能获得符合其计算机/设备分辨率的最佳质量图像。非常感谢

在WinJS中可以找到ViewBox控件。UI名称空间。

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

查看Visual Studio中的Fixed Layout App模板，快速开始使用ViewBox控件。你可以在Windows Dev Center上阅读更多关于应用模板的信息，包括Fixed Layout app模板。

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

有关Windows Store应用程序开发的更多信息，请注册Generation app。

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

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

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

相关文章：