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.
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.
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.
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
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.
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
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.
Figure 1. A basic stone texture that is seamless in only one orientation.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
Figure 2 (left). A section of the left border is selected and rotated 90 degrees. Figure 3 (right). After the same section is placed on the three sides of the texture, its edges are erased to allow the texture below to show through.
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
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).
Figure 4 (left). A test flood-fill pattern with the rotatable texture utilized in various orientations. Figure 5 (right). A secondary texture is created that is both seamless and rotatable.
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.
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).
Figure 6 (left). The one-half blend texture. Note that the transition point on the edges is at exactly the 128-pixel point. Figure 7 (right). The one-fourth blend transition texture.
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.
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.
Figure 8 (left). The three-fourths blend transition texture. Figure 9 (right). A unique texture that can be utilized (sparingly) to break up the patterns of the flood fill.
to Add Variety
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.
FIGURE 10. An example of the basic set of texture types and transitions used to blend between two terrains.
On the Horizon
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.