Game Development Reference
In-Depth Information
For example, we can define a CSS stylesheet for the case when the screen is wider
than it is taller (which, by definition, would make it a landscape viewport) and have
a second style sheet designed for the case when the screen is taller than it is wider
(making it a portrait view). Media queries would allow us to automatically and dynam-
ically load one of these two stylesheets based on the current screen state. That is, if
the user was to manually resize the browser window, the style sheet would trigger in
real time.
As for screen orientation changes, DOM-based web applications have it easier, be-
cause the browser itself if able to rotate everything, so it faces the right direction.
On a canvas-based application (either 2D canvas or WebGL), a screen rotation also
rotates the browser's coordinate system, but not the canvas'. Thus, if you want a
particular game to play horizontally on a landscape view, and vertically on a portrait
view, you'll need to manage the rotation of the canvas' coordinate system by hand.
Most importantly, however, is the fact that when designing a mobile-friendly, or a mo-
bile version of a game, the screen size will be significantly smaller. That means that
fewer elements can be crammed into a particular view. Less information needs to be
presented, since less information can be conveyed at once.
The two common solutions to this problem are to develop one application with two
separate presentation layers (or two separate views or templates), only serving the
view that's appropriate to the device requesting it (serving the mobile template when
a template accesses the application and the full template when a desktop browser
requests the application) and developing a single application with a single template,
but making this template responsive, as described previously. The less popular al-
ternative is to develop two separate applications altogether, where each application
focuses on a given paradigm (mobile and desktop).
Normally, the mobile template is a shrunk down version of the full template where not
all elements are necessarily displayed, as represented by the following illustration:
