Game Development Reference
In-Depth Information
▪ Maintain Aspect Ratio - While this maintains the quality of your artwork, you may end
up with black bars on the sides of your game.
This is a hard decision to make. Luckily, it's very easy for us to test both out. We'll start with
scale to fit since you can simply do this in the CSS.
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
This will work great on Windows 8, but be careful if you try this on the Web. Since most
monitors are designed to be at fixed aspect ratios, like 4:3 or 16:9, your game will always
look relatively fine. In the browser, however, the user can set the window to any arbitrary
size, and this could look horrible depending on what they set it to. That is why it is some-
times better to try and maintain the aspect ratio, which is something we can do via
JavaScript.
The basic concept of maintaining a game's aspect ratio is to figure out its ideal size and di-
vide the width by the height. From there we can attempt to fit the game into the current resol-
ution by using its height as a point of reference. This means that your game will constrain its
width to always make sure that the height of the canvas is set to 100 percent. Most likely this
will yield black bars on the right and left sides of the game canvas unless the display matches
your game's aspect ratio. On the flip side, if your width is smaller than the max height, we
will need to add black bars to the top and bottom of the game. This scenario will most likely
happen if you design your game to run at a native resolution of 1366×768 and the person
snaps another app next to your game, which will lower the resolution to 1024×768.
If you are not familiar with all of this, it may be a hard concept to wrap your head around.
Let's look at the code and add this to your own game to see how it affects the visuals at dif-
ferent resolutions. We'll start with the basic CSS.
