Creating backgrounds for 2D games is easy. You create a bunch of bitmaps in your favorite paint program and you're done. 3D backgrounds are another matter, though. Here Gavin Bell of Wasabi Software provides a complete tutorial on creating backgrounds for 3D games using sky boxes.
Creating backgrounds for 2D games is easy. You create a bunch of bitmaps in your favorite paint program and you're done. Creating backgrounds for 3D games can be much more difficult if you don't know what you are doing. The earliest games (both 2D and 3D) were set in deep space, because drawing a few stars on a completely black background is fast, easy, and requires no artistic talent. Game players today demand more interesting graphics.
Some game developers solve the 3D background problem by sweeping it under the rug-using one of several techniques to hide the background. For example, the game's scenery completely fills the screen in top-view games like SimCity or Command and Conquer. Indoor games like Descent also fill the entire screen with game scenery. Fog is sometimes used to make distant object dissolve into a background that is just a single fog color. These techniques make the game feel either two-dimensional or claustrophobic.
Driving games can cheat and use a single bitmap that is scrolled left/right/up/down as the player drives around the track. This works pretty well, because the players are limited to driving on a pre-determined path and they never look straight up at the sky.
However, if you want to create a 3D game that allows the player unrestricted movement and makes them feel like they are in an unlimited 3D world, you need to learn to create 3D backgrounds, otherwise known as skyboxes. The rest of this article explains how to create realistic skybox backgrounds for your 3D games.
A skybox is a cube made of six images that surrounds the game player. Figure 1 shows a slightly exploded view from inside a skybox. Skyboxes are also known as environment maps. The player stands in the middle of the box, so no matter which way they turn they see some part of the box. The game engine figures out which parts of the skybox are visible and displays the proper pixels as the player moves. The player is never aware they are inside a big cube; see Figure 2 for three snapshots of what the player when turning inside the skybox of Figure 1.
Skyboxes are drawn as if they are infinitely large--no matter how far the player moves, they are still surrounded by the box. Only objects that the player can never reach will look correct, like clouds in the sky or distant mountains. If the player's movement is limited to just looking around (rotating their head) from one spot, then a skybox can be used even for nearby scenery.
Skyboxes look great, if they are created properly. They create the illusion the player is in a large, seamless world. But the illusion is quickly shattered if the borders between the skybox images don't match exactly, or if you create images with the wrong perspective. This article will give you a good understanding of skyboxes and related technologies, and will help you avoid time-wasting mistakes by describing several techniques for creating skyboxes.
Related Technologies
Skyboxes go by several other names, and have many other uses besides game backgrounds. The technical term for a skybox is cubic environment map or cubic reflection map. They were invented over 20 years ago as a fast method for calculating reflections when rendering objects, and are frequently used by high-quality rendering software such as 3DStudio MAXand RenderMan.
You may be wondering how reflections relate to game backgrounds. You can think of reflections as showing you what an object can "see" in any direction. This is the same problem we need to solve to draw the background for a 3D game-- the game engine needs to know what the player can see in any direction.
Many high-quality renderers support spherical environment maps. They are a lot like skyboxes, but are a single image mapped onto a sphere instead of six images mapped onto a cube. Figures 3, 4 and 5 show a simple background consisting of a regular on the ground and a huge dome in the sky. Figure 3 is what the game player sees. Figure 4 is the cubic projection, unwrapped and laid flat, and Figure 5 is the spherical projection. Notice that straight lines in the player's view or cubic map turn into curved lines in the spherical map, and vice versa. Spherical maps can be easier to work with because they are stored as a single image. However, interactive graphics hardware and software is designed to display flat surfaces, so cubic environment maps can be drawn quicker than spherical maps. The massive distortion of pixels near the north and south poles of a spherical map (see Figure 5) also makes them difficult to create.
Skyboxes are also closely related to immersive imaging technologies like Apple's QuickTimeVR™ or Live Picture's panorama technology. Immersive imaging products concentrate on the problem of stitching together photographs to create a 3D environment, and they map the final image to a cylinder or partial sphere instead of a cube. Often they limit the view so you cannot look straight up or straight down, although creation of full panoramas using special camera lenses or mirrors is becoming more common. Zork Nemesis™, Zork Grand Inquisitor ™ and The Journeyman Project 3™ are three games that have used panoramic technologies effectively. However, the restrictions on viewer movement, as well as the difficulty of incorporating fast cylindrical or spherical rendering into polygon-based game engines, limits their use in most games.
Now that you have some background on skyboxes and related technologies, we'll move on to the nuts and bolts of creating them.
Rendering Skyboxes
Your existing 3D modeling software is a great source of skyboxes. You can use weather, mountain, or star-field generation plugins to create most of the scenery, along with the modeling and texturing tools with which you are already familiar.
To create a skybox, render six images of the scene from a single point in space. Set the camera to create square images with a vertical and horizontal field-of-view of 90°. Then render six views, each 90° apart: forward, left, back, right, up and down.
The resulting images should fit together seamlessly when placed next to each other in Photoshop or viewed with the game engine. If they don't, you might be able to swap and rotate some of the six images to get the arrangement required by your game engine, or you might have to change the camera parameters and re-render.
Each of the six square images should be rendered at the same resolution-- for example, 256x256 pixels. Limitations of the game engine and/or hardware texture mapping will determine the maximum skybox size. Higher resolution skyboxes will look better, up to a certain point that is determined by the resolution of the screen and the game camera's field-of-view*. Popular first-person shooter games like Quake run with a fixed 90° field-of-view, which makes the calculation easy--if the resolution of each of the six skybox images is as large as the largest dimension of the screen (e.g. 640x640 if the game is running on a 640x480 screen), then the skybox pixels will not be magnified as they're projected onto the screen. If your game supports larger screen resolutions or a smaller (zoomed-in) field-of-view, you will need higher-resolution skyboxes to avoid BBS: the dreaded Blocky Background Syndrome.
Of course, larger skybox images will use more texture memory, which might slow the frame rate. Happily, AGP graphics boards (which allow regular system memory to be used as texture memory) and larger on-board texture memories are the wave of the future.
If you have the luxury of running with bilinear interpolated texturing you can use a lower-resolution skybox and get a blurry background instead of a blocky background. Clouds and mountains usually look fuzzy in the real world, so turn on bilinear filtering for your backgrounds if you can.
*Mathematically, the best skybox resolution is:
maxScreenResolution * 1/tan(fieldOfView/2)
If your calculator doesn't have a tangent button, here are some common field-of-view values :
90° : 1/tan(90/2) = 1.0
60° : 1/tan(60/2) » 1.7
45° : 1/tan(45/2) » 2.4
The next two sections give step-by-step instructions on creating skyboxes using two popular 3D packages-3DStudio MAX™ and Bryce™.
3DStudio MAX R2 environment maps
3DStudio MAX R2 includes built-in support for cubic environment maps, so creating skyboxes with 3DStudio is particularly convenient. To create a skybox once you have created the 3DStudio scene:
1. Create a small box (or sphere or any other shape). This represents the game player, and will be the center of the skybox.
2. Place the box at the center of your scene, where the player will be standing.
3. Edit the box's material (open the Material Editor). Create a standard material with zero shininess/shininess strength, zero self-illumination, and zero opacity. Because the box is completely transparent, it will not show up when you render the scene (which is what we want, since it is being used only to create a skybox).
1. Assign a reflection map to the box's material. Open the Maps section of the material editor, check the "Reflection" box, and press the "None" button. Then select a new "Reflect/Refract" map from the Material/Map Browser.
2. The material editor will change, allowing you to choose Reflect/Refract parameters. Select the following (See Figure 6):
Source: From File
Size: enter resolution of skybox images, e.g. 256
Render Cubic Map Files To File: enter name of skybox, e.g. "gamesky.tga"
Press 'Pick Object and Render Maps'
Pick the box in the main MAX window
3. 3DStudio will then create the six images of the skybox, and save them to disk.
The next step depends on your game engine; you may need to convert the images into another format, resize them, rename them, etc. 3DStudio MAX uses a right-handed coordinate system with the Z axis 'up', and uses the following conventions for skybox images:
Table 1: 3DStudio MAX skybox image conventions
View direction | Filename suffix |
Forward (+Y direction) | _BK.tga |
Left (-X direction) | _LF.tga |
Back (-Y direction) | _FR.tga |
Right (+X direction) | _RT.tga |
Up (+Z direction) | _UP.tga |
Down (-Z direction) | _DN.tga |
See the section "Reflect/Refract Map" in the 3DStudio MAX R2 reference manual for more information.
Skyboxes from Bryce
Bryce 2 and Bryce 3D from MetaCreations let you create beautiful scenery with very little effort. They are also inexpensive. Unfortunately, they aren't designed to be part of a larger production process, and seem to be better for exploratory tinkering than getting a particular task done under budget and on time. But they can be used to create stunning skyboxes, if you know how.
The general idea is to convince Bryce to render the six views that make up a skybox. Specifically:
1. Set the document properties so the images rendered will be the right size and so they will fit together correctly. Open the "Document Setup" dialog (see Figure 7). Type in "1:1" for the aspect ratio, and choose a reasonable resolution for the Document Resolution.
2. Be sure there are no objects linked to the view. By default, Bryce links the sun to the view, which will ruin the skybox because the lighting will shift as each is rendered. To reset, select the Sky&Fog palette, then bring up the "Sky&Fog options" menu (click the triangle at the bottom-right of the Sky&Fog palette; see Figure 8) and de-select "Link Sun to View".
3. Position the camera at the center of the scene, where the player will be standing . Then double-click on the camera trackball to bring up the Camera Options dialog. An early version of Bryce had a bug that caused all field-of-view settings to be 1.25 times bigger than they should be, and compatibility has forced all subsequent versions of Bryce to share that quirk. So, to get a 90° field-of-view in Bryce, you must actually enter a value of 112.5° (90 x 1.25 = 112.5) into the Camera Options dialog.
4. Select the "Render to Disk" menu entry and render the first skybox image.
5. After rendering is complete, rotate the camera 90° using the Camera Options dialog and then render again. Render six times to get a complete skybox. See Table 2 for the correct camera rotation values and filename suffixes to create a skybox in the format expected by the Quake II game engine.
Table 2: Bryce camera setting for Quake II-format skyboxes
Filename suffix | X | Y | Z |
ft.tga | 0 | 180 | 0 |
lf.tga | 0 | Bryce 2: 90 Bryce 3D: -90 | 0 |
bk.tga | 0 | 0 | 0 |
rt.tga | 0 | Bryce 2: -90 Bryce 3D: 90 | 0 |
up.tga | -90 | 90 | 0 |
dn.tga | 90 | 90 | 0 |
It will take Bryce anywhere from 10 minutes to several hours to render each image. A good trick is to save the scene six times, to six different files, with different camera parameters. Drag and drop all six files onto the Bryce executable's icon to render them in a batch mode overnight. See Figure 9 for an example created using Bryce 3D.
Creating a simple 3D scene using a tool like Bryce or 3Dstudio is quick and easy. But what if you want to put trees on a mountain or create a particular pattern of clouds in the sky? Once you have an initial skybox, it is often easier to use a paint program to add or change scenery instead of going back to the modeling tool and creating geometry for every distant object. The next section describes tools and techniques for painting skyboxes.
Painting Skyboxes
You might think editing skyboxes is easy-after all, a skybox is just six images, and there are plenty of great tools for image editing. The problem is making the edges of each image mesh with its neighboring images. Any mismatch will shatter the of a continuous background; instead, the player will feel trapped inside a big box. Getting this correct is made even more difficult by the abrupt changes in perspective that occur at the edges of the skybox. Figure 10 shows the looking-forward and looking-right images from a skybox created by Cyro Baretto in 3DStudio; notice that they match perfectly, but straight lines change direction at the edge where the two images meet.
Instead of editing each of the six skybox images, it would be better if there was a tool that let you edit an 'in the game' view of the skybox. You would then see exactly what the game player will see, and would be able to edit any view of the skybox. This mythical tool actually exists, and is called SkyPaint.
SkyPaint reads skybox images and displays an arbitrary view into the skybox. For example, Figure 11 shows SkyPaint displaying a 45° view into the skybox of Figure 10. If there is an area that needs tweaking, or you want to paint some added detail, SkyPaint runs a paint program such as Photoshop™, where you edit the in-game view as an ordinary 2D image.
When you're done painting, SkyPaint applies the changes to the skybox images, applying the proper perspective projections. You can concentrate on the artwork and let your computer do the math to avoid ugly artifacts at the corners and edges of the skybox.
SkyPaint also translates between spherical and cubical environment maps, reading and writing popular skybox, environment map, and photographic panorama file formats. Visit http://www.skypaint.com/ for more information on SkyPaint, to see some interactive Java-powered skybox demos, to download a free trial version, or to visit my home page (I'm the author of both this article and SkyPaint).
Global operations like changing the color balance or brightness of the entire skybox don't require a special tool. You can simply edit each of the six images individually. If you need to convert to a 256-color palette, converting the images one by-one also works perfectly well, as long as you use the same palette for all six images. You'll save time if you use an image processing tool with batch-processing capabilities like DeBabelizer™
Once you have a nice-looking skybox, the only task left is to integrate it into your game. The next section illustrates some of the issues you might run into by looking at one particular game engine-the Quake II engine.
Game engine integration
Game engines typically treat skyboxes as a special type of texture, drawn behind all other objects and animated as the player moves. The restrictions and requirements for skybox textures depend on the game engine. They may be the same as for other textures, or there may be special requirements for skyboxes.
As a specific example, the Quake II game engine has the following requirements: Quake II skyboxes use the same arrangement as the cubic environment maps of 3DStudio R4 (the old 3DStudio, not 3DStudio MAX). See Figure 12 for the orientation and naming conventions for Quake II skyboxes.
Each skybox in Quake II is stored as two sets of six files:
Six full-color tga-format images are used when a hardware accelerator is detected and the game is running in full-color mode.
Another set of 256-color pcx-format images is used when there is no hardware accelerator and the game is running in 256-color mode. The skybox images share the same color palette as the rest of the scene, and must be 256x256 pixels big.
Figure 13 shows both a full-color (256x256x6, 24bit) skybox and its low-color (256x256x6, 8bit) version as rendered by Quake II.
No mip-maps (lower resolution versions of a texture) are allowed or required for skyboxes. Mip-maps are only used when the textured object is far away and a single pixel on the screen corresponds to several pixels in the texture map. That never happens to skybox textures, because the player never gets closer or farther from the background, and Quake II does not allow zooming-in by changing the camera's field-of-view. The next section of this article describes a few creative uses for skyboxes that you might want to explore after you have simple skyboxes working in your game.
Other Uses and Advanced Techniques
Skyboxes are useful as temporary stand-ins for scenery that will be created later. During prototyping and early game development, you can quickly rough-out a scene and render a skybox. Then paint directly onto the skybox (either using SkyPaint or directly onto the six images) to add details instead of spending hours modeling and texturing a scene that might be used only for an early proof-of-concept demo. A skybox is a lot more interactive than a 2D sketch, is easier to create than a full 3D scene, and doesn't require a fully complete and optimized game engine to give a good demo.
If the player's movement is somewhat restricted and you have plenty of memory and CD-ROM space, you can use multiple skyboxes, and switch between them as the player moved through the scene. This is especially effective if you can hide the switching. A perfect example would be a game set in a colony on the Moon, with a network of transparent domes connected by opaque tunnels. Each dome would have its own skybox, showing a different view of the surface, with the tunnels functioning as transitions.
Taken to an extreme, we would create a skybox at every possible viewpoint in the game. Instead of drawing polygons, the game engine would switch between skyboxes as the player walked around. That's not as far-fetched as it sounds-this type of image-based rendering is a popular research topic these days. And when most PCs have two gigabytes of memory, it might even become practical.
Another effective technique is using animated skyboxes for distant objects. Examples include moving clouds, a sunrise-day-sunset-night cycle, or perhaps a distant erupting volcano. Creation is straightforward-- use six movies instead of six images for the skybox. Finding enough memory and CD-ROM space for the animations and convincing the game engine programmers to support animated skyboxes may be more difficult.
While you're lobbying for animated skybox support, you might also ask for reflection map support. Your game will look much more convincing if the moonscape background is reflected in the other players' visors. You may have more success if you imply that any competent programmer should have no trouble implementing a well-known 22-year-old computer graphics technique.
A largely unexplored source of scenery for games is the real world. There are several tools for creating panoramas from photographs of real places, such as Live Picture's Photo Vista™ software, Apple's QuickTimeVR Authoring StudioTM, and Kaidan's camera tripod hardware. Finding a photographer or studio familiar with "immersive imaging" is getting easier all the time; search the web for the phrase "QTVR" to see lots of examples. I am surprised that nobody has created a Myst™-like game with photographic backgrounds taken in a beautiful place like Hawaii, Yosemite, or Paris.
Conclusion
As I write this, thunderstorms are rolling past my window, giving the day a schizophrenic mood. Bright sunshine is interrupted by dark clouds, thunder, and pouring rain. Yesterday felt calm and relaxed--fluffy white clouds blew across a bright blue sky.
Your game's background will set a mood. Today's fast game engines let you choose arbitrary images as the background, from romantic sunsets to strange, alien green skies. One day, game engines will incorporate full weather simulations, displaying realistic and ever-changing backgrounds of clouds rolling across the landscape. Until then, skyboxes are an almost perfect substitute.
Read more about:
FeaturesYou May Also Like
