Creating 3D Graphics in trueSpace

This chapter is from the book

Windows Game Programming with Visual Basic and DirectX

Learn More Buy

This chapter is from the book

This chapter is from the book 

Windows Game Programming with Visual Basic and DirectX

Learn More Buy

Creating a Mall

Creating a shopping mall is really a three-step process. The first step is designing the basic mall. The second step is constructing an empty mall using the graphics tools I've discussed. The third step is creating the stores and other objects that can be placed inside the mall by the user.

It is important to remember at this stage of the development process that it is desirable to build as much flexibility into things as practical, while at the same time keeping the design easy enough to implement. One way to accomplish this is to create the independent 3D graphics files that can be loaded into the game. This gives me the flexibility to design a simple mall to use while building the game and allows me to create more complex malls later. Then the players can choose the mall they want to use in their game.

Designing a Mall

If you take the time to look at a typical shopping mall, you'll notice that the mall is really constructed from a series of similar objects. Most stores are the same basic size, typically 20 to 25 feet wide and 40 to 50 feet deep. I call this a standard store.

Larger stores within the mall are generally allocated the space that would normally hold two or three standard stores. Anchor stores (big name department stores, usually) are typically located outside the mall proper with one or more doors connecting the anchor store to a hallway.

If the mall has a food court, you'll find a collection of small spaces allowed for the food vendors. The size of these spaces can vary greatly because the food court is often located in an out-of-the-way place in the mall, but this isn't a requirement. Some food courts are located in the space that would normally be occupied by three or four standard stores.

Located near the food court you'll find public restrooms. There are at least two, one for men and one for women. However, there is a trend nowadays to include a special restroom for families There you will often find a telephone or two, plus a drinking fountain.

Most malls today include a series of kiosks in the center of the hallways that permit small vendors to sell items like cell phones and jewelry. These kiosks often make for a crowded hallway, so they are generally located only in hallways that are fairly wide. Also located in the hallway are various objects like benches, ATM machines, telephones, drinking fountains, plants, and so on. Some malls even include an information desk where shoppers can ask questions, have gifts wrapped, rent strollers, and so on.

Outside the mall proper, but attached to the main mall, is a mechanical area that holds the heating and air conditioning equipment to heat and cool the mall. You may also find other equipment in this area, such as trash bins and storage for the lawn and garden equipment used to maintain the space outside the mall.

Not all of the mall's facilities are located outside. Most malls have a main office where the mall's management and staff work. Also, most malls have a separate security office where security officers can monitor security cameras that watch the public areas of the mall.

Figure 3.3 shows a design of one of the malls I'm going to use in this game. It is a relatively simple floor plan allowing for eight standard stores plus one anchor store. There is a food court with four food vendors (marked with an F on the diagram), restrooms for men and women (marked M and W), a mall office (marked O), a security office (marked S) and a mechanical area. This arrangement leaves a very open hallway for kiosks, benches, plants, and other things that you may want to add to the mall.

Figure 3.3 The design of a simple shopping mall for Swim Mall.

Creating an Empty Mall

To turn the diagram in Figure 3.2 into a 3D object is to map the dimensions in the diagram into dimensions understood by trueSpace and DirectX. In general, dimensions for 3D objects are specified in meters. In practice, it really doesn't matter. As long as you are consistent you can choose any mapping you want.

In this case, I'm using the scale that 1 unit in the 3D object corresponds to 12 1/2 feet. Because the mall shown in Figure 3.2 is roughly 200 by 200 feet, the 3D object will be 16 by 16 in size.

The mall itself will be constructed using the Plane object. I'll use the Plane object for the floor of the mall and the walls. The mall is broken into several main areas: the anchor store, the hallway, the group of five standard stores, the group of three standard stores, the mechanical area, and the food court. Each of these areas will need to be constructed independently to control how the particular section will appear in the game.

To create this shopping mall, follow these steps:

1. Start trueSpace.

2. Select the Plane tool and move the mouse pointer over the floor of the scene. Left click and drag the mouse point to create a square to create the floor of the mall (see Figure 3.4). Don't worry about the size of the plane, as it will be adjusted shortly.

Figure 3.4 Building the mall begins with adding a plane to the trueSpace scene.

3. Move the mouse pointer to the Object Tool button (the big white arrow) and click the right mouse button. This will display detailed information about the plane you just added (see Figure 3.5). Notice that information in this window reflects the plane you just drew. The X, Y, and Z values refer to the center of the plane relative to the center of the scene (also known as the origin). The rotation X, Y, and Z values represent the angle in degrees that the plane is rotated from it's initial position. Since the plane hasn't been rotated, these values are zero. Finally the size values reflect the size of the plane you just drew.

Figure 3.5 Viewing details about the plane.

4. To convert this plane into the foundation for the anchor store, I need to resize and relocate the plane. The easiest way to do this is to change the values in the object info window. Because the anchor store is 75 by 150 feet or 6 by 12 squares in 3D coordinate units, simply enter the 12 and 6 into the boxes for the X- and Y-coordinates. Then enter –2 and 6 for the X and Y location coordinates. At the same time, you should change the name of the object from Plane,1 to Anchor Foundation (see Figure 3.6).

5. Because you can't see all of the anchor store foundation, you may want to change the level of zoom on the screen. Click on the Zoom button and move the mouse pointer to the display area. Press and hold the left mouse button and drag the mouse pointer down to zoom out and see more of the mall. If you drag the mouse upwards, you zoom in on a particular part of the mall. Remember that you can always use the Reset View tool to restore the view to the default.

6. You can also change the relative position of the mall within the display by clicking the Eye Move button and using the mouse to reposition the objects in the display. Click on the display area and drag the mouse to the left to move the scene to the right.

Figure 3.6 Resizing the plane floor to the size of the anchor store.

Screen size simplifies seeing stuff

All of the screenshots in this book are sized to fit on a monitor whose resolution is 800x600 . When working with trueSpace, having a larger screen resolution is better. I recommend using a minimum screen resolution of 1024x768, while 1280x1024 is close to perfect. This enables you to see more of your object in the screen without zooming and moving the eye around.

7. To create the foundation for the group of five standard stores, create a new plane object and change its X and Y size values to 4 and 10 and its X and Y location values to –6 and –2. Give this plane a name of 5 Store Foundation.

Demolishing your mistakes

If you get an object totally messed up and want to start over again without disturbing the rest of your scene, simply press the Delete key. This will delete the currently active object. If the object you wish to delete isn't the current object, select the Object Tool and click on the object you want to delete to make it the current object.

8. The main hallway can be created the same way, by creating a new plane and using X and Y size values of 4 and 10 and X and Y location values of –2 and –2. You can name this plane Main Hallway. The group of three stores (3 Store Foundation) needs yet another plane with X and Y size values of 4 and 6 and X and Y location values of 2 and –4. The mechanical area's plane (Mechanical Area) has X and Y size values of 4 and 4 and X and Y location values of 6 and 1. After creating these planes, your mall should look like Figure 3.7.

Figure 3.7 Laying out the major areas in the mall.

9. If you look closely at Figure 3.7, you will notice that there is a hole in the middle of the mall where the food court and offices will be placed. I'll talk about how to create these objects shortly, but first I want to apply some textures to the foundation to make it easier to understand how the mall is organized. A texture is simply a 2D image that will be displayed on the 3D object. To apply a texture to an object in the mall, click on the Material Editor tool. This will display the property window shown in Figure 3.8. The sphere in the center of this window displays how the texture will look wrapped around a sphere. Clicking on the sphere will show you how the texture looks on other types of objects.

10. Next, click on the Image Browser icon to display the image browser and press on the Folder icon to choose the location of your image files. In this case, the image files can be found in \VBGame\Chapter03 directory of the CD-ROM). Click and drag the image that looks like concrete over to the sphere and drop it. The sphere will now look like it's wrapped in concrete (see Figure 3.9).

Figure 3.8 Choose the directory containing the image files you wish to use as textures.

Figure 3.9 Drag the concrete image over to the sphere in the Material Editor properties window.

Tippy tools

If you hold the cursor over an image in the Image Browser, you'll see a tool tip that includes additional information about the image file, including the file name, the size of the image, the number of bits per pixel and the approximate size of the image.

11. Close the Image Browser window and choose the Paint Face tool from the list of icons to the right of the sphere in the Material Editor. The Paint Face tool is located with several other painting tools in the third flyout from the top. Move the mouse pointer to the mall foundation and click each part of the foundation except for the hallway (see Figure 3.10).

Figure 3.10 Turning the foundation into concrete.

12. Following the same process described in step 10, choose another texture for the hallway. In this example, I'm going to use Browntiles.BMP, but there are other textures in the directory that you may want to use. As before, to apply a texture to an object, simply click the object—but make sure that the Paint Face button is selected.

Saving your sanity

You should periodically save your scene using the File, Scene, Save As command. This will provide a checkpoint from which you can recover your object if you make a mistake. Saving also makes it easy to change the object once you create it.

13. One of the problems with applying a texture to an object is that the texture is resized to fit the entire object. In the case of Browntiles.BMP, the image file contains only four tiles. This doesn't look very good. However, you can repeat the image multiple times by changing the values for the U Repts and V Repts in the Texture Map window. Press the Color: Texture Map button at the top of the Material Editor window (the first button on the left, which contains a color gradient) to display the Color: Texture Map window. The default values for U Repts and V Repts are 1 and 1, which means that the texture will be repeated one time horizontally and one time vertically across the entire plane. Set U to 4 and V to 10 to match the size of the hallway, then use the Paint Face tool to replace the existing texture with the new texture (see Figure 3.11). If you want, you can also repeat the same process using the concrete texture, however I didn't bother because the concrete texture will not be visible once the mall has some stores in it.

Figure 3.11 Adding tiles to the hallway makes the mall more interesting.

Undoing your mistakes

trueSpace maintains an undo list just like most Windows applications. Clicking the Undo button will remove the most recent change. Clicking the Undo button again will remove the previous change.

14. To finish the mall's foundation, I'm going to add the hallway in the food court area (Food Court Hallway). Because the brown tiles are currently selected (you can verify this by looking in the Color: Texture Map window) any new objects will automatically be created with this texture. You should adjust the U Repts and V Repts to 3 and 2 before creating the new plane so that the texture will be properly displayed. Then you should use 3 and 2 for the X and Y size parameters and 1.5 and 1 for the X and Y location parameters. Notice that the food court's hallway matches the main hallway . Of course you can always repaint the hallway after you create the plane to get the proper values for U and V.

15. There are two sets of food court stores (Food Court 1 and Food Court 2), both of which have X and Y size values of 3 and 1. The location of the first is 1.5 and –0.5, while the location of the second is 1.5 and 2.5. The mall office and the security office (Offices Foundation) can be created using size values of 1 and 4 and location values of 3.5 and 1. Remember to switch back to the Concrete.BMP texture file or these areas will be painted with the brown tiles texture.

16. Now that the foundation is poured, it's time to start working on the walls. Again, I'm going to use the plane object, however this time I need to rotate it so that it is in a vertical position rather than a horizontal position. Because I want the walls unpainted, you need to right click over the sphere in the Material Editor and select Reset All from the popup menu. Use the Plane tool to add a new plane to the scene. Set the X and Y location to –2 and 9 and set the X and Y size 12 and 1. To put the wall vertical you need to set the Y rotation to 90. This gives you the perfect wall, except that half of it is below ground, so you need to set the Z location to 0.5 to allow the wall to rest on the surface (see Figure 3.12).

Figure 3.12 Building the first wall in the mall.

Removing textures

You can remove a texture from a surface by resetting the texture in the Material Editor and using the Paint Face tool on the desired surface.

17. The next wall is somewhat tricky. You should create the plane with an X and Y size of 16 and 1 and an X, Y, and Z location of –8, 1, and 0.5; and X and Y rotations of 90 degrees. While you could simply use a Y rotation of 90 degrees and change the X and Y size to 1 and 16, any texture you apply to the wall will be rotated 90 degrees. Although this won't make a difference with a texture such as the brown tiles or concrete, it will make a big difference if you use a tile that has a strong horizontal or vertical direction such as bricks or wood. Just remember if the object looks right with only a Y rotation, you still need an X rotation.

18. You can continue to draw walls around the perimeter of the mall. The next wall has an X, Y, and Z location of 4, 1, and 0.5, X and Y rotation values of 90 and 90, and an X and Y size of 16 and 1. The walls around the maintenance area have an X, Y, and Z location of 6, 3, and 0.5, an X rotation value of 90, and an X and Y size of 4 and 1; an X, Y, and Z location of 8, 1, and 0.5, X and Y rotation values of 90, and an X and Y size of 1 and 4; and an X, Y, and Z location of 6, –1, and 0.5, an X rotation value of 90, and an X and Y size of 4 and 1. Remember to give each wall a meaningful name such as Wall6 so that you can identify the wall later if you decide to edit the mall again.

Dragging objects

Although it is easy to enter the information directly in the Object Info window, you can also drag an object around in the scene by selecting the Object Move button. Click on the object you want to move and drag it to the new location. You can also choose the Object Rotate button to rotate the object and the Object Scale button to change the size of the object. In both cases, you simply click the object you want to change and drag the mouse around on the screen. If you aren't happy with the change, remember you can always click the Undo button.

19. At this point all of the walls around the mall are erected, except for the wall at the front of the mall. Because the front of the mall is at the back of the mall, you should click the Eye Rotate button and drag the mouse from side to side until the front of the mall is at the front of the display (see Figure 3.13).

Figure 3.13 Rotating the mall to make the front more visible.

20. The front wall needs to be created in three segments. All three will have an X rotation of 90, an X and Y size of 4 and 1, and a Y and Z location of –7 and 0.5. The first segment has an X location of –6. The second segment has an X location of –2. The third segment has an X location of 2. The segment in the middle I'll refer to as the entrance. Note that while the scene has been rotated in the previous step, the coordinates remain the same. Now that the back of the mall is closest to the eye, the coordinates remain negative.

21. The next step in creating the mall is to apply a texture to all of the walls. In this case I want to use the Redbrick.BMP file and apply the texture to both sides of the walls except for the entrance. You can do this by selecting the Redbrick.BMP file in the Texture Map window and selecting the Use Texture Map button in the Shader/Maps window. Select the Paint Object button to paint both sides of the object at the same time. When you're finished, the mall should look like Figure 3.14.

Figure 3.14 Painting red bricks over most of the walls in the mall.

Moving lights

The red stars on the screen represent lights that provide illumination and shadows. Sometimes it can be helpful to move them to a different location to make your textures easier to see. Simply select the Object Move button and click the light. The red star will become white. You can then drag the light around on the scene until it lights up the part of the scene you need.

22. At this point, the empty mall is complete except for the entrance. I saved the entrance to the mall for last because it needs holes cut into it to allow customers to enter and exit. The easiest way to do this is to create an object the size of the hole you want to make, place it where you want the hole, and then use the Object Subtraction tool to delete the new object, including any places where it overlaps the old object. To protect your investment in the mall at this point, you should save the entire scene to disk. That way, if you make a mistake in cutting the holes, you can simply load the scene and start over again. Choose File, Save As, Scene from the main menu, enter the filename BasicMall, and click OK.

Selecting stuff

If you double-click an object in the scene after selecting the Object Tool, all other objects in the scene will be displayed as a wire frame. If trueSpace can't determine which object you selected, the entire collection of objects will be displayed normally. When this happens, try moving your mouse slightly and double-click until you select the object you want.

23. Click the Cube button (on the same flyout as the Plane tool) and add a cube to the scene. Change the object's info so that the X, Y, and Z location is –3.3, –7, 0.3 and the X, Y, and Z size is 0.6, 0.6, and 0.6. This creates a cube that is placed exactly where I want the first door (see Figure 3.15). Next click the plane that forms the entrance wall. You can verify that you selected the proper object by checking the name in the Object Map. Finally click the Object Subtraction button and click the cube. If you did everything correctly, you'll end up with a hole in the door (see Figure 3.16).

Figure 3.15 Creating a box that occupies the same space as a door.

Figure 3.16 Subtracting the box leaves an opening in the wall.

24. Repeat this process three more times for each entrance but use the following values for the X location of the cube: –2.5, –1.5, and –0.7. Then you can apply a new texture to this surface using the Paint Object tool. I suggest using Aluminum.BMP file. This will result in an entrance that looks like Figure 3.17.

Figure 3.17 Finishing the entrance allows customers to enter and exit the mall.

25. At this point your mall is a collection of objects that aren't connected together. For DirectX to display them, they must be glued together. Once you glue them together it will be hard to edit your mall, so you should save your scene to disk again before starting the following operations. This will allow you to easily edit the mall in the future.

26. Use the Object Tool to select one of the primitive objects comprising the object. Then select the Glue as LOD button. This changes the mouse pointer to a glue bottle. Click the other pieces of your object to glue them to the first piece. When you glue the first piece, the current object will be fully displayed, while the remaining objects will be displayed using a wire frame, which makes it easier to identify the objects that haven't been glued. You can also use the Object Info window to verify the names of the object as you glue them together.

27. Next you need to save your mall as an object that you can use in DirectX. Choose File, Save Object As from the main menu and specify the name BasicMall. Choose DirectX .X as the file type and put a checkmark in the ASCII check box. Clicking Save will save your mall (see Figure 3.18).

Figure 3.18 Saving your mall as a DirectX.