CODEWITHSUNDEEP
javascriptwindowswindows-store-appswinjs
Fourjays
Fourjays

Reputation: 537

How to handle resolutions in a Windows 8 WinJS game?

I am creating a game for Windows 8 using HTML5, canvas and WinJS. The game is nearly complete and everything is working. However, I am going on to the graphics and have started to become concerned about the way I have implemented support for different resolutions. At the time I started this project I had been reading a lot of information of how to handle resolutions, although little relating to canvas. I ended up implementing something like this:

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;

The basic idea behind it is that it finds the best-fit size for the canvas on a given resolution (with letter-boxing where screen ratio is different). The assetScale is then applied to all images in the manifest for PreloadJS to load the correctly sized bitmaps (e.g. images/1080/myimage.png), and pixelScale is used for scaling coordinates from the working resolution of 1366x768 to the operating one (so things are positioned correctly on other resolutions).

However, I am no longer sure if this really is the best/correct way to handle it and whether I may even be over-complicating it. Having added a class to the body element to help with scaling of menu elements, I suddenly noticed in Blend for VS2012 that high-DPI devices (i.e. 1920x1080 @ 140%) pick out the resolution as 768 rather than 1080. Won't this lead to degraded visuals for high-DPI devices? Do I need to take account of this separately and if so, how? Or is it something I just ignore?

Other methods I came across involved rendering the whole canvas element at a high resolution, then scaling the whole canvas element down (degraded visuals again?) and letting WinJS pick images out automatically by appending files with "-100", "-140" and "-180" (seems this will only work with inline/css images rather than canvas/PreloadJS).

Can somebody please point me in the right direction of how to handle this? There seems to be a lot of misinformation about. In the end I just want to make sure all users get the best quality images served to them for their computer's/device's resolution. Many thanks

Upvotes: 2

Views: 1299

Answers (2)

Jeremy Foster
Jeremy Foster

Reputation: 4763

The ViewBox control is going to scale the canvas up to the devices resolution and that may or may not be what you want. Scaling a canvas full of pixels makes for bigger pixels. It won't result in higher quality images like you're after.

If you want a truly adaptive and performant game, then you're going to need to dynamically render your canvas objects according to the resolution. If the device is 1366x768 then the canvas should be 1366x768 and some sprite should be, say, 100x100 pixels. If the device is 1600x900 then the canvas should be 1600x900 and that same sprite should be 140x140. It will take some logic in your code.

First, you would set the size of your canvas as you are in your original post, and then every visual asset would need to have it's size defined relative to that canvas size. It would be best to write some code to abstract the task.

Upvotes: 0

devhammer
devhammer

Reputation: 1384

The control that will help a bunch here is the ViewBox control, found in the WinJS.UI namespace.

The ViewBox control automatically scales the UI elements contained within it, so you don't have to worry about manually figuring out how to fit your UI to the current resolution.

Check out the Fixed Layout App template in Visual Studio for a quick way to get started with the ViewBox control. You can read more about the app templates, including the Fixed Layout App template, on the Windows Dev Center.

And also be sure to check out the guidelines for scaling to screens.

For more info on Windows Store app development, register for Generation App.

Upvotes: 1

Related Questions