Game Development Reference
In-Depth Information
canvas.style.top = (window.innerHeight - height) / 2 + "px";
canvas.style.left = (window.innerWidth - width) / 2 + "px"; }
</script>
This also assumes that you have the following setup in your index.html or default.html with
the canvas inside a div with an ID called game.
<body>
<canvas id="canvas"></canvas>
</body>
What's great about this code is that it will work well on the Web as well as on the desktop, so
you can consolidate your game's scaling to a single function. Also, you can call win-
dow.resizeGame() whenever you need to manually correct the scaling, such as when the
game is finished initializing.
Hopefully, after running the two different examples on your game at different resolutions,
you can pick the best one for your use case. No matter which one you chose, the benefits you
will get at higher resolutions will be monumental. Rescaling the game on larger monitors
with higher resolutions will still yield fast, fluid, responsive playback.
Understanding Snap View
Your game will not be approved for the Window Store unless you fully support snap view.
This can be something as simple as throwing up a graphic telling the player they are in snap
view and can't continue playing, or doing something even more elaborate. Just keep in mind
that making use of the snap view will not only encourage players to keep the game open
while they check their email or do other things, but it will also get more attention by the cur-
ators of the Windows Store who look to feature developers who are making the best use of
Windows 8's new features and capabilities.
There are two basic ways we can handle snap view: using CSS meta tags or managing it via
code with JavaScript. Both options allow you to mix and match HTML and Canvas ele-
ments, so it's really about finding the right solution for the way your game is already created.
Here are two examples to review in order to give you a better idea of how you want to imple-
ment it yourself.
