Backgrounds are the essential part of every game without reference to their genres. In order to express game elements in the best possible way, they should have a graphic background. There are two types of backgrounds: static and dynamic. The first ones have a fixed position at the screen, being changeless. The second ones consist of several separate image layers, being mobile to each other. This helps to create various effects; foremost is the illusion of parallax. In this case, each image layer has its own horizontal speed depending upon its imaginary z axis position. Such a type of background is usually used in games with dynamic gameplay: platform games, arcades, actions, racing, and so on. The following is a chart showing screen resolutions of the iPhone/iPad family:

The main difficulty with the backgrounds is their dependence on the screen resolution. There is a wide range of screen dimensions in iOS devices, starting with the legacy of the first generations of the iPhone and finishing with the iPad featuring Retina display. Your game should try to take into consideration all of them (this will be much more problematic if you would want to make an Android port of your game because there are many types of resolutions).

As an option, you can try to prepare all the backgrounds you need in advance, letting the game check the current device and choose the proper image file. This is very simple from the programming point of view because the portion of code working with the background is not complicated; it is only needed to display one static image at specific screen coordinates. But that can be a real challenge from the graphic design point of view because a dozen versions of each background should be prepared. Having made minor changes in the backgrounds, you're required to re-export all the versions again. Such an approach also needs some additional disk space for all the backgrounds (however, this is not so problematic; iOS games now can be pretty big). The source file for a background used in the Blueprint 3D game is very wide; it includes extra parts to cover all possible widescreen ratios. The following screenshot shows the background used in Blueprint 3D:

However, if you choose this type of background for your game, try to optimize the process as much as possible. First of all, try to design the background with some reserve. Its canvas can be a little bit larger than the actual screen resolution; it is good to mark it like a 16:9 (or even 21:9) frame, which will save you from all possible shocks the new generation of devices will bring. All the types of backgrounds can be stored in one AI file with several artboards. The first artboard serves iPad; it has resolution of 1024 x 768 pixels (in this example, the landscape orientation of the canvas is used). Being exported in double resolution, this artboard will provide the background for a Retina-based iPad (2048 x 1536 pixels).

The second artboard is placed at exactly the same position at which the first one has but features another height: it is not 768 pixels, but 683 pixels. Are you confused a little bit? You are right: there is no such screen size in the specifications. The secret is simple: this is a graphic billet for the iPhone with screen ratio 3:2 (first four generations of the device). You should export the background by navigating to File | Save for web and entering the correct dimensions—960 x 640 (or 480x320 for pre-Retina models)—in the Image size tab; in other words, 960 x 640 pixels is 93.75 percent of 1024 x 683 pixels. Voilà! An export process becomes a bit easier because you need nearly one illustration to create a background both for iPad and classic iPhone. Starting with iPhone 5, the new type of resolution is used: 1136 x 640 with a rare aspect ratio 71:40. You can try to use the same width of the artboard, introducing the billet with the size 1024 x 577, but such canvas is too narrow, and large parts of the background illustration will be truncated. It is better to create a new artboard with a height equal to 683 pixels but with a larger width equal to 1212 pixels. The exporting routine is still the same: in the Image size tab, the correct dimensions should be specified: 1136 x 640. And don't forget about the potential reserve: a 16:9 screen ratio. I would suggest something like 1360 x 768 or 1366 x 768; the exact accuracy is not important yet. The image would have gigantic width, but it could have a practical purpose too: various promo materials, for example, website promotional blocks often require a wide background. The following screenshot shows the artboard scheme for solid backgrounds:

There is another way to operate the backgrounds, much more flexible and resolution independent. In this case, the background is not a solid image but a collage made from several graphic elements. The game itself manages their position and behavior. Some elements are tiles and let you cover some space with specific texture (the tiles can be real big, about 512 x 512 pixels to fill large rooms without noticeable repetition). A few elements are created to be stretched at the screen; for example, some gradients to create a sky. There are sprites with various props too; each of them has a position proportional to the screen's height and width. Overall, each element has its specific rule to calculate its x and y coordinate. This approach is a little bit harder than the static backgrounds, but it gets rid of bulky and clumsy background files and lets you to implement some dynamic mechanics to the backgrounds and even to make them a little bit interactive.

From an illustration perspective, there should be several varied backgrounds in the game: one for the main menu, special backgrounds for options and about the screen, and so on. But the most important of course are the images for game levels. Try to add a personal touch to each of them. The background should be contrasting enough to make the details on the foreground well marked; the background helps to express all the game elements in an appropriate way. Its color and texture must not dominate because it is only a scene, not a character; the viewer's visual comfort is a primary goal. Try to use decorations and props that are related to the game's plot. This is an additional way to include some narrative in the images. They may not translate direct messages but create some specific mood. Moreover, it is easier to come up with some idea of ornamentation by looking back at the story. What should I put there: a unicorn or a barrel with oil remembering that the game is about robots? Of course the unicorn is perfect! Some sense of irony is always good too.