Producing Games - Building JavaScript Games for Phones, Tablets, and Desktop - page 368

This section doesn't cover the design process itself; rather, it mainly discusses how programming
web-based applications in JavaScript affects game design. The preceding quote is an example
of this approach: because you want your games to play well on a variety of devices, you need to
design games that allow for efficient implementation.
Mark: “Many devices do not have a keyboard, so your game needs to allow control
by touch input. For some games, keyboard control is more natural. A challenge
then is to ensure that the game is not much easier to play using a keyboard than
using touch input. If you develop a game where people play against each other
online, or a game that uses an online high-score list, watch out that you're not
giving one group of users a large advantage over the others because they use a
specific input method.”
Peter: “One of the secrets of the success of Angry Birds is that it was one of the first
games that was designed with touch devices in mind. When you design a game for a
touch device, typically it will be different from a game designed for a console with a
controller. Always develop the best possible experience for the platform in question.
Playing on a PlayStation 4 versus playing on an iPad is a very different experience
because the situation and the context are very different. In one case you can sit for
hours on your couch playing a game on a console, whereas on a phone a game
session may take only a few minutes. Both can be great experiences, but in a very
different way, and the design should take this into account.”
In many JavaScript games, sprites are scaled up or down depending on the device. You've seen
how to do this in the games developed in this topic. One thing the topic doesn't consider is that
aspect ratios are radically different between devices. For instance, the iPad has a relatively square
screen, unlike the iPhone 6, which has a much more rectangular screen.
In the current implementation of your games, a different aspect ratio means there is white (or black)
space surrounding the game screen. If you display a game designed for the aspect ratio of the iPad
on the iPhone 5, almost a third of the screen is empty space! While designing a game, it makes
sense to try to adapt the design of the user interface, the playing field, that location of overlays,
and so on, to the aspect ratio of the device. Ideally, the game should automatically adapt its overall
layout to the size and aspect ratio of each device.
Mark: “In addition to aspect ratio, there is also the choice between portrait and
landscape mode. On phones you generally want to use portrait mode, but on a
desktop PC or on a television, landscape mode makes more sense. Your mode
choice also depends on the type of game, whether you want to use portrait or
landscape mode, or whether you wish to allow both.
In our games, the positioning of game elements is dependent on the aspect ratio.
For example, a user interface is placed at the top of the screen, and below it is the
game playing field. The game playing field is moved down if there is space available,
so that the layout of the elements on the screen looks better. The location of buttons
changes depending on the aspect ratio of the screen. Be careful, however, that you
also adapt the interactions (finger positions) accordingly. As a result, you can't always
use a device's full screen. Furthermore, if you want to place advertisement banners,