|
|
 |
 |
 | | | | |
 |
|||
 |
||||||
          |
 |
 |
||||
|
Tiled Terrain 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. ______________________________________________________ |
||||||||||||||||||||||||||||||||||
|
|
Features
