Tutorials Videos
 
 
by Michael Arrington


We're back for the second installment on the topic of using pre-fab scenery. Last time we talked about the basic concepts behind pre-fabs, drew up some rough specifications for our own scenery

blocks, and started with a simple wall/niche block. Now we need to add a little visual interest - through textures!

The image at the right shows our creation as it should look when we're all done - ready for whatever dungeon nasties inhabit your game to move right in. It even has a spot for their favorite boiling pot of delver chilli! So, let's get to it, shall we?

First, download the resource file for this course!

 

Part Three: UV Mapping Overview

If you have a hard time getting your head around the concept of UV mapping, don't worry - a lot of people do. The good news is that it really isn't that complex once you understand the fundamentals. For those who need it we will take a closer look at what UV mapping is and how it works. The rest of you can just skip to the next section.

UV mapping, very simply, specifies where the renderer should look for texture information for a given point on a model. UV space is limited - ranging from 0 to 1 in the U direction and from 0 to 1 in the V direction (see image at right). If we specify a UV co-ordinate of (0.25, 0.5) the renderer will look into the texture and retrieve the color of the pixel located one-quarter of the way across and half way down the co-ordinate space.

Now that we know about UV space the concept of UV mapping is very simple. Each vertex of your model, in addition to having an XYZ co-ordinate in 3D space, also has an UV co-ordinate in texture (UV) space.

 
So, for a cube you might 'lay out' the UVs as in the image to the right. Here, we've 'folded' the cube's faces so that they lay flat in the plane. Boxes are easy, but what about something a little more complex?

Most objects are easy to map as long as you keep some simple rules of thumb in mind. The first is that, the larger the area taken up by the face in UV space, the more pixels you will see on that face in the rendered image. In general, you should keep all of the faces laid out in UV space fairly proportional to their sizes in 3D space - i.e. if a face is twice as large in 3D space then it should be twice as large in UV space.


This is a rule made to be broken, however. Some areas of your models will naturally need more detail than others. Areas of greater interest can be larger in UV space, giving you more room for texturing - a common example is for a human model, where the face area is generally quite a bit larger than any of the other parts (in fact, many modelers actually use a separate map for the head altogether.)

Another basic pointer is to try to keep adjoining faces next to each other. This will allow the texture to flow naturally across seams and will lead to fewer texturing artifacts. Of course, some seams will be separated in order to get the model to 'lay flat', as with our cube example above. Finally, try to keep faces from becoming too 'skewed' as this will distort the texture applied to them. Of course, you can sometimes use this to your advantage.

On the left is an example of a fairly complex UV map laid out for one of my character models - a Space Marine Terminator from Games Workshop.


 

Part Four: Laying Out The UVs

 
UV mapping our wall should be a breeze because it is a pretty simple model - consisting mostly of a single front face and a small rectangular 'flap' at the top. Your first thought might be to make the UV projection take up most of the texture space, to get as many pixels as possible into play. In this case that might cause us problems down the road. Why?

Because we have other models that will be interacting directly with this one - and some of those have more surface area. Take a look at the Hallway End pre-fab we mentioned last time. It has three wall sections, each as large as this one. With the UVs laid flat we will have much less space per wall face - and that means that the pixels won't quite match up next to this one. Take a look at the image for a visual comparison.
 


So, with this in mind we should probably lay out this model's UVs a little smaller than we ordinarily would. Getting started mapping is easy. Just open the new gameSpace1.6 UV Editor and you'll see the default layout as ‘automagically’ generated by gameSpace. Not very impressive is it? That's okay, no software can do this - we have to fix it by hand!


If you have complex geometry, such as our little niche, you might find your polygons are a little out of whack in the UV Editor. 3D software has a hard time dealing with polygons with more than four sides. You should use the Add Edges and Add Vertex tools to make sure your model consists of reasonably shaped quadrangles and triangles before you start mapping. NEVER allow the software to triangulate the model for you - it won't do it correctly and will destroy your textures. The image shows how our wall segment could be divided.


 



So, let's map the most important part first. It's going to be hard to figure out which polygons are which in the UV Editor until we get them sorted out a bit so you will need to enter Point Edit mode in the 3D window by right-clicking on the object. You should now see the edges and vertices of your model. Choose the Face Selection tool and select one of the faces that make up the front of the wall. Then, holding the CTRL key, click on each of the other front faces one-by-one until they are all selected. They are all in a plane so just click on the Planar UV Projection icon and you should see a distorted version of your wall in the UV Editor.

The UVs are distorted because gameSpace scaled your selection to the entire texture space. We will need to correct this by scaling it down. Click the Point Scale tool from the UV Editor toolbar and, while holding the left mouse button, scale the selection until it's roughly the same proportions as your original wall. Note that if you hold the right mouse button instead the selection will scale uniformly, keeping original proportions the same.

Believe it or not, we're mostly done. Using the same technique, select the faces at the top of the wall and scale them to roughly match the wall UVs. You may also have to use the Point Rotate and Point Move tools to get the UVs going in the right direction and positioned properly. The image below shows the wall top laid out and in position. Note that this can just be done roughly at this point - we are just 'sorting out' the UVs for now, finding out what goes where. When that step is complete we can clean everything up.

Finally, let's do something with that niche. Select the faces that make up the back of the niche and do a planar projection. Scale the selection down and move it out of the way. Now, map the inside edges of the niche. The easiest way is to select the faces in groups, based on how close to 'flat' they are. For our example, the two faces at the top of the arch, the two vertical faces on either side of the niche, and the bottom face, were selected as groups and projected as planar. Scaled down it looks like this:

Looks like we have all of the faces identified and in their proper places. So, now the tedious part - cleaning it all up. In the UV Editor use the Point, Edge, and Face selection modes along with the manipulation tools to pull and stretch the UVs until they line up nicely, are straightened, and have little or no distortion. Make use of the Weld Vertices tool to attach adjacent faces as needed.

The time you spend here will really tell in the final model. Even professional modelers sometimes take shortcuts here - and it shows in their final works (just freeze frame some of your favorite 3D games and have a look.) My suggestion, take you time and do it right - this is YOUR game after all!

Well, that's that. Now, select the Export Bitmap icon and save an image of the UV map in your preferred format - BMP or PNG are good ones depending on which image editor you use to create your bitmaps. Now, to splash on some paint!


 

Part Five: Creating And Applying A Texture


Open your favorite image editor and then open the bitmap you just saved. In Macromedia Fireworks this opens as a grey image with transparent areas where the lines should be. I just selected the grey areas, inverted the selection, created a new blank image layer and painted inside the selection with black. You might have to do it differently in your image editor but the end result should be a set of lines showing your UV layout with the underlying image showing through. Place the lines on a separate layer at the top of your layer stack and lock it so you won't accidentally move or edit it.

Usually I like to create textures using existing photographic images as a base. If you prefer to paint them by hand, please do - some texture artists create everything by hand with stunning results. For those of you that can't paint :) go find a suitable base wall texture. I used one from the free pack of media that comes with DarkBASIC Pro from The Game Creators. Using this as a base I simply cut and pasted until I covered all of my areas to be textured. I also copied the left edge of the wall to the right side and blended it in - so that the walls will look okay tiled together in 3D.

Digging around some more I found a nice concrete texture for the niche and an ornament for the wall. I darkened some of the corners in the niche and played around a bit with dirtying up the wall - and I also made a little beveled frame around the niche on the main wall face. You can make your textures as ornate as you like but simpler is sometimes better so let's cut bait on this one and see what it looks like in gameSpace.

Back in gameSpace open the Material Editor and right-click on the Color shader to bring up the Color Shaders window. Find the Texture icon (looks like the Caligari Leaf) and click on it. Then, back in the Color shader just click on the name of the texture to open up a file browser window. Find your texture and open it. At this time you might also want to check out the Relectance, Transparency and Bump shaders as well to make sure they are what you want. I used Matte for the Reflectance and nothing for the bump - but DO try making bumpmaps some day, many engines can use them and the results are impressive.

Once you are satisfied with the texture, select your object and use the Paint Object tool to apply the texture to it. If you've done everything as described above your texture should fit the model and be looking pretty good. Of course, you can go back to your texture and edit it a little more if you think of some improvments. I often work back and forth between the 3D view and my image editor. Note, if you change the texture you will have to reload it - I sometimes just load another image then reload my texture to make sure things are cleared out. en voile:

That's all for now. Next time we will look at creating the rest of the pre-fabs in our set in true cooking-show-fashion (to borrow a phrase from Humdinger) and create a small mock-up level to see how everything fits together. Beyond that we will look at creating some decorations to sprinkle around our dungeon and how to get these things into a real game engine.

Stay tuned - there's more to come!

 


gameSpace Fantasy Pre-Fabs Tutorial:

Part 1 Part 2 Part 3  
 

Space Marine Terminator is a trademark of Games Workshop Ltd. Mention of this trademark should not be construed as a challenge to such status.