Tiled Terrain

In this article, I'll examine some of the issues you may want to consider when starting to create a terrain tile set for a game. When done well, the terrain becomes a believable world in which your characters come to life. The user will simply accept your work as part of the natural backdrop. Often, the best compliment for a good environment is that it doesn't call attention to itself.

As the terrain artist, you may not have a ton of texture memory space to deal with, so it's always a good idea to figure out how to stretch your budget as far as possible. Obviously, the larger the number of base texture tiles, the more random (and hence natural) the terrain will look. When only a few terrain tiles are available, a repetitive pattern becomes very obvious. The trick is maximizing the usage of each texture while minimizing the disjoint that occurs when you see the same pattern over and over.

The Basics

Before you begin, you will need to evaluate the needs of your particular project. Let's assume that you are trying to make one large plain of cooled lava stone. In theory, you can accomplish this with just one texture map tile and one large polygon. You can tile the texture map multiple times on the single polygon, which gives the appearance of a higher resolution on the terrain. While this method works conceptually, it can quickly lead to some technical problems, such as the inability to add additional texture variety into the field, and shading issues over a large polygon.

Another method is establishing a grid of polygons similar to a chessboard mesh. You can map each square with a different texture map, and there is a lot more flexibility with what you can do on an individual square basis. This method addresses some of the variety and shading issues as well as making the process of editing and tweaking much easier.
Now, suppose you want to add a lake of molten magma to the middle of the landscape. With the single large polygon method, you'll quickly face some problems. Since you can't interrupt the tiled terrain and insert a different texture map in the middle of the sequence, you have to figure out an alternative method. One such alternative is to include the lake in one large texture map. While this would allow you to create a completely custom terrain, you will quickly encounter texture memory usage and texture resolution challenges.
The other alternative is to make a custom polygon for the magma only, and then perform a Boolean operation on that polygon, combining it with the other terrain polygon. This too presents some particular problems if you are using vertex shading to light your terrain. In addition, making the seam between the two texture types invisible will prove to be difficult, if not impossible.

For this tutorial, I'll focus on a more forgiving method of maximizing the effect of your tiled terrain by using a standard grid and texture-mapping each polygon quad or set of quads as a unique element. This method will allow you to control the layout of the textures much more accurately, and it also provides vertex-shading advantages. In addition, when you start to add vertical information to your mesh, you will find that the additional vertices give you more control of the 3D aspects.

Creating the Basic Flood Fills

When making a texture tile set, you'll need to create a minimum set of tiles. The complexity of the planned environment will determine the number of tiles, how well the tiles appear visually without showing repetitive patterns, and how many different types of random tiles will be required. The amount of available memory for the terrain will impact all these factors. As a good starting point, create the minimum base set, then add to it only when necessary. Reuse is king, so try to stretch your texture budget as far as possible.

The number of different terrain types you will have in your environment will be another big impact on your tile set. This impact can be compounded by which terrain types can touch or transition with one another. Take, for example, a terrain that consists of water, sand, and grass. If water can only touch sand and sand can only touch grass, then you only have two transition sets to make. However, if water touches grass as well, then an additional transition set is required. As you can tell, planning out the environmental requirements ahead of time makes a lot of sense. You may find areas where you need to limit the number of transitions in order to keep the texture budget in check.

For the sake of argument and to keep the number of variations low, I'll assume that the new terrain will consist of two basic ground types: stone (cooled lava) and molten lava. This will require you to make only one transition set. For now, don't concern yourself with the 3D aspects, and assume that the terrain is a flat plain.

First, create the flood-filled texture for each basic ground type. This is the basic tile that is used as the default flood fill of an area. If possible, since it stretches your texture budget, it's a good idea to make the texture able to tile in any direction, even if it's rotated 90 or 180 degrees. This will give you more visual mileage out of a single texture by breaking up the repetitive pattern of the texture when you lay it down next to itself.

In Figure 1, you can see the stone texture in its original orientation. It's easy enough to use the Offset filter and Rubber Stamp tool in Photoshop to make a texture seamless, but you're limited to only one orientation. If you rotate it and try to place it in a grid, the seam will be plainly visible. In order to make a tile seamless when it rotates, the texture needs to have identical edge pixels on each of the four sides. This requires a bit more work than just using the Offset filter, but it also extends the usability of the texture. With a bit of Photoshop magic, you can create the seamless effect pretty easily.

Making a Simple Tileable Texture

The first step in making a tileable texture is making your flood-filled texture tileable. There are quite a few methods and some programs devoted exclusively to this process. Photoshop is more than adequate for the job, so I'll cover a method that doesn't require any special plug-ins.

After obtaining the proper source material, choose a square section of the image. Avoid source materials that have a strong light direction embedded in the image. This is mainly because once you rotate and place the texture next to the original orientation, there is a visible anomaly in the lighting direction. If you take care, you can make strongly highlighted textures work, but that takes a bit more Photoshop work.

In this tutorial, I'll actually use a source that has a fairly strong highlight to make it easier to see the seams. Be aware of the image scale once it is mapped onto the terrain. It's very easy to find games out there where the texture maps aren't to the proper scale for the characters or the environment. Often, designers use the character texture maps to drive the texture resolution for the rest of the environment. Your main goal is uniformity in your texture resolution. The pixels per foot of your game should remain fairly consistent.

Once you have selected your perfect 256x256 texture, it's relatively easy to make it a seamless texture when no rotation is involved. To do this, load up the texture in Photoshop, then go to Filter>Other>Offset. Set the Horizontal and Vertical settings to 128 with the Undefined Area set to Wrap Around. The seam is visible, and you can then remove it using the Rubber Stamp tool. Try to keep from blurring the image too much, as it tends to make the end result look fuzzy. It's also a good idea to change the offsets to different settings such as 64 vertical, 64 horizontal and then check the seam again for visible anomalies.

Once you are done, check to see how it looks in a tiled environment. First, make a new Photoshop file, with the size set to 1024x768. Now open up the tiled texture you have just created and select all. Go to Edit>Define Pattern. This stores the texture as a repetitive pattern in the clipboard. Now switch to the 1024x768 image and click on the Paint Bucket tool. Go to the Paint Bucket Options panel and select Pattern from the Contents pull-down menu. Then, simply click anywhere in the image to fill the area with the pattern.

This process gives you a good idea of how the image will tile and whether there are any areas that tend to stand out in the repetitive pattern. Fix any obvious problems immediately rather than waiting until later. You'll have to redo most of the steps after this one if the edges don't quite work.

Additional Flood-Fill Patterns

After you create the first flood-fill tile, you can quickly make additional matching tiles. You may find that it's necessary to create three or four different flood-fill patterns to make the terrain random enough.

To create additional fills, you will need more source images. In this case, the original texture was a fractal pattern generated in Corel Draw's texture program, so by simply changing the seed number, you'll be able to make additional source material images all with a very similar look and scale.

Once you obtain the new source image, create a new Photoshop file that has the new terrain as the first layer (I named mine New Stone) and the tiled texture you previously made as the top layer. Now, with the top Original Stone layer, make a selection box that is approximately 30 pixels from each edge. Accuracy isn't critical here, since you will be able to edit your work after the fact. With the selection still active, go to your Layers panel, and select the Add Layer Mask icon on the bottom left. This creates an active layer mask linked to your New Stone layer, with the edge border showing the Original Stone layer.

Now it's time to do some Photoshop work and edit the mask to blend the New Stone edge into the Original Stone edge. Don't edit all the way up to the edge. If you do, your new texture won't match the old texture at the seam. Once you complete this task to your satisfaction, save off a copy and collapse it down to create your new tile. By inserting it into your 1024x768 tile sample, you will be able to see how it looks and how effectively it breaks up your patterns.

Rotating the Edge

After examining the results of the two or three flood-fill textures, you'll begin to recognize the pattern unless you've used several flood fills. Another way to extend your texture budget is to use a common edge on all sides. This method allows you to rotate the texture 90 degrees in any direction and it will still match. This technique also makes it much more difficult for the viewer to detect the pattern and requires a bit more Photoshop expertise to create.

First, pick a side of the texture map that will become your common edge. In the case of the stone texture example, I'll pick the left edge. Create a selection box that is flush with the top, bottom, and left side of the texture map, and about 30 or 40 pixels wide (see Figure 2). Now copy that piece of bitmap into the clipboard and paste it down again (Control-C then Control-V). This will place an exact duplicate of the texture section right over the original. Now make a selection set of the layer you just placed down by pressing Control and clicking on the layer in the Layer panel. Rotate the selection 90 degrees clockwise by right-clicking on the selection set, then choosing Numeric Transform and inputting 90 in the Angle section under Rotate. Now click and move the selection set so that it aligns with the top of the texture and name it Top. Add a layer mask, and edit the inside edge of the bitmap to blend it into the underlying texture map.

If you paste again (Control-V), you will get a new layer with the original left-hand side segment that was residing in the clipboard. Right-click on the segment, and select Free Transform. Right-click once again, and select Flip Horizontal. Now press Enter to lock the transform into the bitmap. Align with the right-hand side of the texture map, add a layer mask, and blend the inside edge to the rest of the underlying texture. Be careful not to remove the corner pixels. Rename the layer Right. Now select the Top layer and drag it into the Create New Layer icon on the Layers panel. This will create a duplicate of the Top layer. Rename it Bottom, then select and apply Free Transform. Choose Flip Horizontal, and you're done with the needed transforms. Now align it to the bottom edge and add or subtract from the layer mask layer to blend it into the underlying texture. Once you have done all three sides, you should have a rotatable texture with a seamless edge. Figure 3 shows the blended edges without the underlying texture for clarity.

It is a good idea to test your new texture by creating a duplicate of the file and collapsing it down to one layer. Then run the Filter>Offset on it with 128 horizontal, 128 vertical and Wrap Around in the settings. This will make the nonrotated seams visible if there are any anomalies. Make sure either to undo or to run the Offset filter on it again to return the texture to the rotatable seam edge.

Now, select the texture and create it as a fill pattern. Create a new 1024x768 file and fill with the repeated pattern. Set the guidelines or grids on the 256-pixel boundaries and then paste a single texture into one of the grids as a new layer. You can now rotate the new layer 90 degrees and align it with the grids or guidelines. If you have done the steps correctly, it should blend in with the seamed edge without a visible line (see Figure 4).

In order to create a blended set, we will also make a molten lava flood-fill texture, utilizing the same techniques I've just listed. The base lava texture was generated in Bryce 4, then run through Photoshop for a bit of image enhancement (see Figure 5). Once you have a tileable, rotatable lava tile, you are ready for the next step.

The Blend Set

At the most basic level, there are only three additional textures needed to create a blended set. The entire set contains five tiles: two flood fills and three transitions. For clarity's sake, I'll refer to them as the one-fourth blend, the one-half blend and the three-fourths blend. With these and a tiled environment, you can create any sort of varied coastline required. However, it's good to note that making three or four variants of each of these textures will make the transitions from one texture to another much less visible and more natural-looking.

First, make the one-half blend tile. To create this tile, place the stone texture on Layer 1 or the Background layer in a new file you've created in Photoshop. Next, open and copy the lava texture into the clipboard. Paste the lava into the new file as a second layer over the stone.

The next step is either to add guidelines or to set your grid to show you where the 128-pixel point is on the side of the texture. Once you do this, select the top half of the texture, which should be a 256x128 selection box. On the layer mask, fill the selection with black to make it transparent and hide the texture under the selection. Now it's time to go into the texture and add some randomness. In the case of the stone texture, I tried to follow some of the natural contours of the rock. By alternating between black and white on the layer mask, I was able to add or subtract stone to the composite image as needed (see Figure 6).

Avoid eliminating or altering the pixels at the very edge of the texture on either side. If you do, you won't have a tiled texture anymore. Also, try not to get too dramatic in the uniqueness of the transition. If, for instance, you decide that a big pool of lava would look good right in the middle of the transition, you will find that the distinctness of this element becomes apparent when the tile is repeated. If you are using multiple variations, then a unique tile every so often works quite well. The base repeating tile should be somewhat generic so that it doesn't bring attention to itself.

For the one-fourth blend and the three-fourths blend, take the exact same steps using the layer mask, editing only one quarter of the texture. The quadrant you choose is arbitrary, since the texture is rotated to allow for all four directions. Figures 7 and 8 show the final edit on the textures.

Additional Textures to Add Variety

Now that you've created the base set, you will find that no matter how well you created the texture, the repetitive nature of the tiles is difficult to escape. If memory allows, you can create variants for each of these base sets. You can also create unique "random" tiles. These are special-case tiles or groups of tiles that occur very sporadically (to minimize their recognition) but give the terrain a more natural look (see Figure 9). Try to create variants that can also be reused to maximize your texture usage, such as a set of three or four variants that all work together and allow you to mix and match them.

Once you have your entire set, you can always build another test screen that checks for any problems in the tiled layout. Without the use of multiple transition types, the terrain isn't as natural as it could be, but Figure 10 is a good example of a base set.

On the Horizon

The methods I've just covered are just one technique for terrain tile generation. Once you've mastered the basics, you may find that there are things you can do to enhance your textures even more. If your game requires the use of a graphics card, then you have some powerful animation possibilities at your disposal if you have access to the hardware texture calls. You will need to talk over the technical requirements with your graphics programmer, but you can easily achieve such effects as pulsing lava, flowing water, and moving steam with animated textures. The base requirement is that the game use a graphics card, but with the latest-generation games, this is quickly becoming an expected base system requirement.

______________________________________________________