HTML and CSS Reference
In-Depth Information
Figure 13-1.
Normal vs. high-ppi screens
Typically, when creating a two-dimensional game, a developer will author sprites/images at a specific resolution
(for example, 64×64 pixels). This is because there's an expectation that the number of pixels contained in an image
will correspond to some physical dimension on the device (or, rather, there's an implicitly expected dpi value that
developers are targeting). When a game is being rendered on a HiDPI screen, however, standard resolution bitmap
images may look blocky and unpolished, as the number of pixels has increased, but the art content hasn''t. For
modern mobile developers, this is a huge problem, considering the massive variety of screen resolutions available
today; thus, in order to create the most responsive, smoothest-looking game possible, developers need to come
prepared with a few tricks up their sleeves.
It's worth noting that in HTML5, the pixels of a page are not identical to the pixels on the screen. For instance, you
may define in Cascading Style Sheets (CSS) that an object is 128 pixels wide, but that has no bearing on its physical
dimensions in the real world. On lower-dpi devices, your object will look large; on higher-dpi devices, your object
will look small. To address this, the document object model (DOM) has started exposing a window property called
devicePixelRatio
. This property defines a mapping between CSS pixels and hardware pixels, in terms of a numeric ratio.
For example, if there is a square image that is 100 pixels, and the
devicePixelRatio
is 2 (for example, -webkit-
min-device-pixel-ratio: 2), the device hardware would then have to scale up that image to 200 pixels to take up the
same amount of screen real estate. In this case,
devicePixelRatio
lets us know that two hardware pixels render as
one CSS pixel to the screen.
Thankfully, the hardware is doing the heavy lifting for developers, in that images are automatically scaled to
various resolutions for the user. Anyone who's worked with photo-editing software, however, can attest that resizing
an image is not the best way to preserve clarity and color quality. In fact, algorithms for scaling images are a large
and continual topic of research in academia, simply because there's a constant trade-off between image content,
time to encode, and perceived image quality output. In an ideal world, a developer would be able to state which type
of scaling algorithm the hardware should use for a particular image, but sadly, we''re still far from that. When the
device automatically scales the image, bilinear filtering is typically the default algorithm chosen, because of its low
performance requirements. For games, however, this is not the best upscaling algorithm to use, as it often results
in blurry images that lack crispness. To be fair, there's no single best upscaling filter; game developers may need to
experiment with muliple codecs before deciding to move away from bilinear or embracing a different codec for their
data set. Table
13-1
shows the most common tablet resolutions available today and their aspect ratios.
