Tiling Textures | Advanced Mapping

 
 

Advanced Mapping

Using special types of maps in conjunction with textures can give you more realistic results.
Texture maps are a key ingredient of most modern games, and creating them is the largest part of a game artist's job.

There are, however, many other types of maps which you may be able to use to make your game environment more interesting and realistic.

These other types of maps will quite often be used in conjunction with a texture map. Texture is enhanced by added by adding characteristics that cannot be easily included in a texture alone, such as transparency, dimension, or specularity.

For example, bump maps can add to the illusion of a third dimension and relief, adding more realism to textures. Environment maps can allow your textures to look shiny or reflective, like polished metal or glass. In this final lecture, you will learn about how these other types of maps are created and how they interact with textures.

In this lecture, you can expect to:

Learn about the various types of maps that can be used in games.
Learn how transparency can be applied through transparency maps, alpha channels, and PNG file format.
Learn how bump maps, light maps, environment maps, and specularity maps interact with textures.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Materials or shaders are made up of textures, other types of maps, and other surface properties.

 

 

 

 

 

 

Shaders may apply something as simple as a color or as complex as a bump map.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Transparency may be created via transparency maps in your 3D program or with alpha channels in the game engine.

 

 

 

 

 

 

 

 

 

 

Transparency maps are usually grayscale—no color information is used by the 3D software.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Look for any "halo" issues at the edges of a transparency map.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Anti-aliasing is used to create the illusion of smoother lines.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Alpha channels can be added to any RGB image in the Channels panel. The Alpha channel is often used as a transparency map.

 

 

 

 

 

 

 

 

 

 

 

Not all image formats support alpha channels. TIFF or TGA files are recommended.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

PNG is a useful format for creating transparency for the Web or VRML.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bump maps create the illusion of bumps or dents on a surface that may actually be completely flat.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Light maps contain the effects of all lights on a surface.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Environment maps create the illusion of shiny, reflective surfaces in a game environment.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Specularity maps create shiny, bright spots on objects to simulate reflective surfaces.

 

 

 

Beyond Textures

 

 

Texture maps, which you have created throughout the course, are sometimes called color maps, and this may be a more descriptive name. A texture or color map is used to apply color to a surface. By applying a color map you are "mapping" certain colors to certain parts of the surface.

Objects in the real world have characteristics beyond color, and many of these characteristics can be simulated in game engines as well. Varying levels of transparency can be mapped onto a single surface using transparency maps. Certain shiny, reflective surfaces can be simulated using environment maps, sometimes called reflection maps. And bumps can be mapped onto surfaces using bump maps. All of these can be used to make the game world look more realistic.

Such maps are, like texture maps, simply digital images. They can be made in Photoshop or any image editing software. You will usually use the color map as reference when creating other types of maps, possibly working in separate layers in Photoshop.

This is a bump map that you'll encounter later in the lecture. Like most maps, it is a grayscale image file, based on the original color image (in this case, our brick tile).

Most types of maps are applied in the same manner as texture maps. In fact, they may be applied at the same time—game engines and 3D packages tend to group various surface characteristics into sets that are often called materials or shaders. You experienced this when you learned about using Hypershade in Maya. A shader or material might be so simple as to specify only one color (although the rendering engine will usually make certain assumptions about other characteristics).

Instead of specifying a color for a shader, you can use a color map. You may also choose to use a bump map, a transparency map, or any of the other types of maps available. The resulting shader is then applied to the surface exactly as a texture map would be.

Game artists will often apply shaders to models as they build them. A texture artist might create the various images (or maps) and pass them to the designer, who will make the shaders for the game environment.

Let's explore how textures interact with the various maps that are available.

Creating Transparent Areas
Transparency Maps

Transparency maps are used to create surfaces that are partly transparent.

The two screenshots above show examples of the use of transparency in textures; one in the steel mesh, the other in the ferns.

In a 3D software program like Maya, there are often separate images used as transparency maps, sometimes called opacity maps. In other applications, such as many game engines, you can include an extra channel in your texture images called an alpha channel, and that channel can contain the transparency information.

Transparency maps should be grayscale, with no color. Portions of the alpha map that are 100% white (255 red, 255 green, 255 blue) represent full opacity. Black areas (0 red, 0 green, 0 blue) represent total transparency. Shades of gray indicate partial transparency—for example, pixels that have values of 64 red, 64 green, 64 blue would be approximately 75% transparent (or 25% opaque).

The top trim texture below could use some transparency mapping.

Click the image above to get a closer look.

As it has always appeared against a black background, you may not have noticed any problem. But rendered against a blue background, the problem is obvious:

It is easy to create a transparency map in this case. We only need the black areas at the top to be transparent; the rest should be fully opaque.

Magic Wand tool

The Magic Wand tool often works well with the Tolerance set to 32. For the purpose of creating this particular transparency map, Anti-alias should not be checked in the options bar.

A tolerance of 32 allows us to click one of the pixels in the black areas above the roof trim. The parts that need to be transparent, and any neighboring pixels within a color value of 32, will be selected. For now we will create a transparency map that contains only black and white information, no gray pixels. To accomplish this we need to be sure that there is no feathering of the selection, and no soft edges, and so Anti-alias must be turned off.

The image below shows the kind of selection we need.

Perhaps the easiest approach is to make a new layer, invert the selection (Select > Inverse), and fill the resulting selection with white. It is important to be sure we are using 100% white (the default colors are true black and white).

The resulting layer will look like the image below. A thin black border has been added below that is not part of the image.

When used as a transparency map, along with the texture map, the result looks like this:

A close look reveals that there is a slight "halo"—a dark line along the transparent edge.

This is common when creating transparency maps, and can be corrected.

Here, the problem is that the white part of the transparency map extends beyond the part of the image intended to be opaque.

If we zoom in for a closer look at the selection we made before, we can see that the area selected, the area intended to be transparent, does not include the gray pixels at the edge of the white roof trim. It is these pixels that made up that dark outline (or halo).

It is a relatively simple matter to use Select > Modify > Expand to increase the area selected by 1 pixel. This expanded selection can be used to trim away the extra pixel along the edge of the transparency map. Don't worry if a few white pixels from the roof trim become transparent as well, this won't be noticeable.

To bring this into Maya, you'd use the middle mouse button to drag a File 2D Texture from the Create tab in Hypershade, and drop it onto your material in the Work Area. When the menu appears, choose "transparency" and select the appropriate image file in the Attribute Editor.

Using the new transparency map, the halo is gone:

We can see in the image above, however, the aliasing, or stair-step pattern, at the top of the little peak on the corner. In this case, the game player will probably never get close enough to notice this. This is a common problem though, so let's look at ways to fix it.

Aliasing is caused by the fact that all lines drawn using pixels are made up of pixels, which are square. Anti-aliasing is the use of transparent pixels on the edges that can give the appearance of a smoother line. Of course, this illusion breaks down when we zoom in too close.

To anti-alias the edges of our texture, we can use partial transparency. If we expand the selection a little further, feather it by 0.5 pixels, then cut (Ctrl-X on a PC, Command-X on a Mac) we get the anti-aliased effect shown below.

The gray pixels are partially transparent. The darker they are, the more transparent they are. These partially transparent pixels create a softer edge, as shown below.

Alpha Channels

Game engines (as opposed to 3D modeling apps like Maya) tend to use alpha channels for transparency rather than transparency maps.

RGB images are typically 24-bit images. They contain three channels: red, green, and blue. Color values in each channel combine to produce a large range of possible colors. When you add an alpha channel, you are making the image a 32-bit, 4-channel image.

You can add an alpha channel to an image by going to the Channels panel, and choosing New Channel from the menu. A New Channel dialog opens. The default name of the new channel is Alpha 1. Leave the settings as they are, and click OK.

New Channel

You can now create your transparency map as usual, and cut and paste it into your new channel.

Remember, not all image formats can have an alpha channel. Two that are commonly used are TIFF and TGA. When saving, be sure that Alpha Channels is checked in the Save As window, as shown below.

You'll also need to be sure that 32 bits/pixel is selected in the Targa Options window if you are saving a TGA image.

PNG Image Format Transparency

The PNG image format is a good format if you need transparency for Web pages or VRML. (VRML is an old 3D format for the Web that is not very widely used.)

On a Web page you might have a patterned background over which you want to place a logo which is not rectangular or square. Since all images are rectangular or square, your logo would have to have some transparent regions.

The PNG format is also sometimes used in games, especially 2D games, often found on platforms such as mobile phones.

To easily make portions of an image transparent, duplicate the background layer (assuming you are starting with a flattened image), and hide the background layer. Select the parts of the top layer that you want to be transparent, and press Ctrl-X (Command-X on a Mac) to remove them. The Photoshop checkerboard pattern will show through the transparent areas.

Now save your image as a PNG file. You can use the default interlace options. The default is "none" (off). Layers are not saved with the PNG format, so your image will be effectively flattened.

Let's suppose we want to make parts of this texture partially transparent. We can select those areas, and cut and paste them into a new layer. We can then set the opacity of that new layer as we see fit. This part of the image will remain partially transparent when the image is saved as a PNG file.

Below left is the JPEG version of the texture, and on the right the PNG version with transparency.

The blue checkerboard background appears behind the transparent and partially transparent areas of the PNG.

Other Kinds of Maps
Bump Mapping

Bump maps are used to create the illusion of bumps or dents, or both, on a surface that may actually be completely flat. A bump map is created by a game artist the way a transparency map is created, and is used by the renderer during the lighting of the scene to add some depth to the surface.

Only the intensity of the bump map image is used, so bump maps usually consist of a range of grays. White pixels will result in the most pronounced bumps, and black the deepest dents.

Below left is our base brick texture. Below right is a bump map for this texture. The effect in this case is quite pronounced—the brick areas are fully white, while the mortar is fully black. The image has been blurred a bit, so the bricks will have slightly soft edges.

The image below shows the brick texture applied without bump mapping.

Below no texture map is used, only the bump map.

Finally, the image below combines the texture and the bump map.

Note in the image above that the bump is not present at the edges of the cube (not visible in the profile, against the blue background). This is one of the limitations of bump mapping.

Light Maps

Light maps do wonders for the look of your textures as applied to game environments.

In an early game like Doom, there were no light maps. The lighting affected a polygon the same way over the entire surface of an object. More realistic lighting was too slow to render in real time. Although there have been huge improvements in processing power, it is still common to render light maps and apply these when the scene is rendered.

The image used in Lecture Five, below, can be used to describe how light mapping works. It is common that game environments need to be "compiled" or otherwise processed by the computer before they can be run in a game engine. During the compiling process (sometimes called "the compile") a light map pass may be performed.

The lighting for the entire environment is calculated and stored in an image file—a light map. Since every surface in an environment is lit, this image can be very large, but a small part of it might look like the image below left. When the environment is drawn, the light map is applied to the texture, which might look like the middle image below. The result might look like the image on the right.

The image below shows a scene rendered by the Quake III Arena game engine. This environment was compiled without a light map pass.

The image below was taken from the same environment compiled with a light map pass. The light map is rendered while the map is compiled, and applied when the scene is rendered. The lamps are actual 3D geometry. A light mapped scene needn't be as dark as this scene, but even a well-lit scene will be more realistic with a light map applied.

 

Environment Maps

Environment maps can be used to make a surface look reflective. In 3D software they are often called reflection maps. The idea is that although game engines cannot, in real time, accurately simulate reflections of the world around the object, they can make an object appear to reflect the world if the reflection map is not a clear and distinct image, but a more diffuse and general reflection, perhaps made up of light and darks in an image that does not contain any identifiable detail.

One key characteristic of an environment map is that it does not "stick to" the surface as other maps do. Instead, it functions as if fixed to the world. This means that as the object moves, or as the viewer moves relative to the object, the reflection map moves over the surface, as a reflection would. It is, however, still just a simple 2D bitmap image, created by a game artist, like the other maps we've discussed.

In our example here I have used Mondrian's Gray Tree painting, resized to match our base texture resolution (apologies to the artist). When applied as an environment map to a white cube, it is not clear what is being reflected. It makes the cube look shiny and reflective.

Environment Mapped Cube

Click the image above to watch the movie.

This map works for this example since we don't have to consider the scene around the cube. It might work well in a forest scene in winter, but may look strange in another environment.

Specularity Maps

Specular HighlightSpecularity maps, or specular maps, are used to create varying levels of specularity on different parts of a texture. Specular highlights are the bright spots caused by bright lights on reflective surfaces.

The sphere on the right shows a pronounced specular highlight.

Specular maps identify which parts of a surface have high specularity and which do not. Specular maps are usually grayscale images, and allow the full range of specularity to be specified.

The image below left is an example of a very simple specularity map. It has been applied to each quad of a low resolution sphere, as shown on the right below. As a light is moved over the surface, you can see the effect of specular mapping: In the areas where the specular map is black, there are no highlights, and in the areas where the specular map is white, there are bright highlights.


Click the image above to watch the movie.

The specularity map is applied in the same way as any other map.

Working as a Game Artist

Making tiling textures look crisp and sharp takes lots of practice. The best way to do this on your own is to work with a game engine that you can easily make maps for—you might use Unreal, for example. Create game environments, textures, and models for their environments. This is an excellent way to learn and practice what types of textures are needed.

Game companies like to see evidence that you can work as part of a team. Other than experience on a professional game project, one of the best ways you can provide this is to work with a team to create a game in a non-professional capacity. The product of your efforts can be a very good portfolio piece.

A good portfolio is essential to getting invited for an interview. You can put portfolio work together through a course such as this one, or you can find a group of individuals who are making a "mod" (modification) of a popular game. There are various groups making mods for Unreal Tournament, for example. Do a Web search for mod groups to get involved!

     
 

Exercise
Apply the concepts and techniques you've learned to make two textures with transparency for your texture set.

Discussion
Share your thoughts on the uses of the various advanced mapping types, and your experiences making transparent PNG textures, with your fellow students.