Modeling Level Design

In this tutorial, designed for games professionals, you will rapidly build a level with some boxes for buildings. You'll learn about creating and adjusting materials and mapping to design how the neighborhood looks, and use XRef objects to add street lamps and some trees. You'll use vertex lighting and vertex paint to prepare your model for export.

Skill Level: Beginner
Time to complete: 45 minutes

Tutorial Files

All the files necessary for this tutorial are provided on the program disc in the \tutorials\level_design directory. Before starting the tutorials, copy the \tutorials folder from the disc to your local program installation.

In This Tutorial


  • Creating a Building
  • Adding Mapping and Materials for the Building
  • Merging the Building into a Neighborhood
  • Adding a Streetlight Using XRefs
  • Painting Vertex Color in a Level
  • Using the Object Painter Script to Add Trees


Creating a Building


In this lesson you'll create a building from a Box object with Taper and Bend modifiers applied. This is probably the simplest modeling you can possibly do; it's the materials that do most of the work in creating the art. To build this level, start by building a box.
Create the box object:
  1. In the Create Panel, on the Object Type rollout, click Box.
  2. In the Perspective Viewport, drag out a box. First you define the width.
  3. When you release the mouse button, continue to drag to create the height interactively.
  4. Click again to set the height of the box.
  5. You can now adjust the box parameters from the Create panel. Change the box parameters by entering these values in the Parameters rollout:
    Length=17
    Width=19
    Height=42
    As long as the box remains a parametric object, you can always access and change these values by selecting the object and opening the Modify panel.
    The box is going to be deformed, so you'll want some extra segmentation in the object.
  6. Click in the Length Segments field, and change the Length Segments to 2.
  7. Press the Tab key to move to the Width Segments field, and change the width segments to 2.
  8. Press the Tab key to move to the Height Segments field. Change the Height segments to 4.
  9. Right-click the Perspective viewport label and turn on Edged Faces. Now you can see the segments in shaded mode.
Add modifiers:
  1. Go to the Modify panel > Modifiers List, choose Object-Space Modifiers > Taper from the list.
    Tip: You can quickly find a modifier by typing the first letter. In this case, entering T on the keyboard will highlight Taper from the list.
    Taper the box by changing the parameters in the rollout.
  2. On the Parameters rollout, in the Tapers group, change Amount to 0.6.
    Tip: You can click the spinner arrows, click the spinner arrows or type in the values to change the amount of the taper.
  3. Change Curve to -0.61.
    Next you'll add a Bend modifier.
  4. On the Modifiers List, choose Object-Space Modifiers > Bend.
  5. On the Parameters rollout, in the Bend group, change Angle to 10.5.
  6. Change Direction to 55.
    You can adjust the height of the box after applying the Taper and Bend modifiers.
  7. In the modifier stack display, click Box.
    It turns gray to show it is selected.
  8. In the Modify panel, make sure Show End Result On/Off Toggle is on.
  9. Change the height of the box using the spinner arrows. Don't make the box so high you can't see the top in the viewport.
  10. Save your scene as mybuilding.max.
    You've just made the form for a building with cartoon attitude. Next you'll add materials to turn this pinched column into a cartoon garage.

Next

  • Adding Mapping and Materials for the Building

Adding Mapping and Materials for the Building

You are going to use three different mapping and material channels to create the look of this building. First, you will map the bricks and windows to the walls. Then you'll hang a sign on the front of the garage and add a black tar roof.
Drag materials to box:
You'll drag materials from the Asset Browser to the box to transform it into a garage.
  1. From the menu bar, choose Rendering > Environment. The Environment dialog appears. In the Global Lighting group click the Ambient color swatch. Drag the Whiteness slider down to a light grey and click Close. Close the Render Scene dialog.
    This will lighten up the scene so you can see the results of any change to materials and rendering tests.
  2. Select the box in the viewport if it isn't still selected, and open the Modify panel. Open the Modifier List and apply a UVW Map modifier.
  3. In the modifier stack display, drag the UVW Mapping modifier downward, placing it between the Taper and the Box.
    Tip: You can drag and drop modifiers to rearrange them in the stack display. Hold down the Shift key to make a copy; hold down Ctrl to make an instance.
  4. In the Parameters rollout, change the Mapping style from Planar to Box.
    Now any mapping you apply will appear on each side of your building.
  5. Turn off the Show End Result On/Off Toggle.
  6. Press the plus button to expand the UVW Mapping modifier in the modifier stack and choose Gizmo.
    You'll see the original box without the Taper or Bend.
  7. From the Parameters rollout, adjust the Length and Width of the gizmo so it conforms more closely to the box. If necessary, move the gizmo to encompass the box.
    Important: The gizmo needs to be resized so that it almost has the same dimensions of the box. If the gizmo isn't fitted properly, the mapping will not be correct.

    Gizmo is resized so that it fits the box like a glove
  8. On the Utilities panel, click Asset Browser.
  9. Navigate the Asset Browser to the \tutorials\level_design directory.
    Minimize the Asset Browser for now. You'll need it later when you apply a map to your box.
  10. Open the Modify panel and click Bend in the modifier stack display to select the top of the stack.
  11. Go to the Modifiers menu, choose Mesh Editing > Edit Mesh.
    The Edit Mesh modifier appears at the top of the stack.
  12. On the Modify panel, in the Selection rollout, click Polygon.
    Tip: If you expand the Edit Mesh in the stack display, the sub-object levels are displayed and Polygon sub-object mode is selected.
  13. Turn on Ignore Visible Edges.
  14. Click the side of the box that will be the front of the garage. All the polygons turn red.
  15. Maximize the Asset Browser. Drag bfrontgarage.jpg to the selected polygons.
    The box will change to a white color once you assign the map. This is normal.
  16. Click the other side of the box that will be the side of the garage.
    Once you select the other side, the previous bfrontgarage.jpg map appears on the box.
  17. In the Asset Browser, drag bsidegarage.jpg to the selected polygons.
    You can now minimize the Asset Browser.
  18. In the Selection Rollout, click the Polygon button to deselect it.
    Tip: You can also choose Edit Mesh from the modifier stack.

    Your building shows the front and side mapping.
Add a garage sign texture:
You'll now use the Material Editor to create a multi/sub-object material that consists of the materials that will transform the box into a “cartoony” garage.
  1. On the toolbar, click the Material Editor button.
  2. In the Material Editor, click the Pick Material From Object button and then click anywhere on the box.
    The garage materials you applied appear in the first sample slot.
  3. The material is a bit dark. To make it easier to see, you can increase the multiplier of the lighting of the sample spheres. Right-click on the highlighted sample sphere and choose Options. On the Material Editor Options dialog change the Top Light and Back Light Multipliers to 2.0 and then click OK.
    Name the material Garage.

    Garage material shown on sample sphere
  4. Change the sample sphere to a box by clicking the box on the Sample Type flyout on the toolbar on the right side of the Material Editor.
    The sample is now a box. If you don't see the two different sides of the mapped box, right-click in the sample sphere and choose Rotate, then rotate the box within the Material Editor sample.

    Magnified view of the Garage material
    Tip: Double-click the sample to magnify the sample slot. This will give you a better view of changes you make to the material.
    Next you will replace one of the standard materials with a blend material within the multi-sub/object material.
  5. On the Modify panel, click the Polygon button and select the side of the box that is the front of the garage. In the Surface Properties rollout, in the Material group, make a mental note of the ID number.
  6. Click Polygon again to deselect it.
  7. In the Material Editor, in the Multi/Sub-Object Basic Parameters rollout, locate the material ID for bfrontgarage, then click its material button.
    The Material name changes to the name of the material with the selected ID.
  8. Click the Standard button to display the Material/Map Browser.
  9. Select Blend, then click OK. In the Replace Material dialog that displays, click OK to keep the old material as a sub-material.
    This creates a blend material that will consist of the bfrontgarage bitmap and the garage sign bitmap you'll add in the next step.
  10. Open the Asset Browser again. Drag garagesign.jpg to the Material 2 button in the Blend Basic Parameters rollout in the Material Editor.
  11. Next drag bfrontgaragemask.jpg to the Mask button labeled None.
    The button label changes to reflect the filename.
  12. Name the material Garage Front with Sign.
    You will now make modifications to the size of the garage sign bitmap so that it fits within the opaque area in the mask.
  13. Click the Material 2 button.
  14. In the Blinn Basic Parameters rollout, click the button labeled M next to the Diffuse color swatch.
    Tip: If you hold the mouse over the button, garagesign.jpg should appear.
  15. In the Bitmap Parameters rollout, in the Cropping/Placement group, turn on Apply, then click Place.
  16. Click View Image to display garagesign.jpg in the Specify Cropping/Placement dialog.
    Here you'll change the overall dimensions of the bitmap so that it will fit within the area specified in the mask.
  17. Enter the following values in the U, V, W, H fields:
    U=.11
    V=.45
    W=.80
    H=.15
    The garage sign changes size. Close the window after entering the values.

    Garage sign bitmap resized
  18. Click the Go to Parent button three times.
  19. On the toolbar, click the Quick Render button or press F9 to render the scene.
    You can see the Blend material displayed in the Material editor and in the rendering. But you can't see the Blend material in the viewport, unless you happen to have the right combination of drivers and graphics card.
Make a black material for the roof:
  1. In the Material Editor, in the Multi/Sub-Object Basic Parameters rollout, click the Material button for ID #1.
  2. In the Blinn Basic Parameters rollout, click the Diffuse color swatch.
    The color selector appears.
  3. Drag the Whiteness slider up to create a black color, then close the color selector.
  4. Name the material Black Roof.
    The roof of the garage turns black in the viewport.
  5. Click the Go to Parent button. Close the Material Editor.
  6. Render the scene to see the final results.
  7. Save your work as mygarage.max.

Next

  • Merging the Building into a Neighborhood

Merging the Building into a Neighborhood

In this procedure, you'll merge the building into a neighborhood.
Merge the building into a neighborhood:
  1. On the File menu, choose Open, then navigate to the \tutorials\level_design directory and open city.max.
    This might take a while, depending on the speed of your machine.
  2. Change three viewports to wireframe shading. Leave the upper Perspective viewport shaded.
  3. On the File menu, choose Merge, then navigate to the \tutorials\level_design directory, and choose garage.max.
  4. Choose Garage from the list of objects you can merge. Click OK.
    The garage appears in the viewports. It is the only one with a black roof.
  5. Right-click Garage and select Move from the quad menu.
  6. Use the transform gizmo corner to move the garage Instead of the arrowheads. This will let you move freely along the ground plane without shifting the building up or down.
  7. Move the garage into place between the third and fourth buildings from the left.
  8. Change the perspective viewport to wireframe by right-clicking the viewport label and choosing Wireframe.
  9. Click the Region Zoom button in the viewport navigation controls so you can see the building up close. Drag a crossing window around the building then release the mouse.
  10. Change the viewport back to Smooth + Highlights.
  11. Adjust the scale of the building so it fits better with its neighbors. Right-click anywhere in the viewport and choose Scale from the quad menu. Then use the X axis of the Transform gizmo to scale the building to fit in.
  12. Save your file as mytoonstreet.max.

Next

  • Adding a Streetlight Using XRefs

Adding a Streetlight Using XRefs

You can add a streetlight to the scene using XRef Objects. First, you will open the streetlight scene and use XRefs to help correct the scale of the streetlight before you add it to the street.
Use XRef objects:
  • Choose File > Open streetlight.max.
    Instead of using measuring tools like the Tape helper or the Measure utility, you will instead use the scene itself, through XRefs.
Scale the street lamp:
  1. Choose File > XRef Scene.
  2. In the XRef Scene dialog, click Add.
  3. Navigate to the \tutorials\level_design directory and select toonstreet.max. A thumbnail appears in the Open File dialog when you highlight the name in the list.
    The path and name of the XRef scene appears in the XRef Scenes dialog. After a pause, the scene also appears in the viewports.
  4. Close the Xref Scene dialog.
  5. Click Select and Uniform Scale and then select the street light. Scale down the street lamp using the scale gizmo so that it fits in the scene.
  6. Move the scaled lamp so it's on the street corner.
  7. Use Arc Rotate to rotate the viewport for a look from a different angle. Scale the streetlight some more, if necessary.
  8. Now remove the XRef Scene. Choose File > XRef Scene to open the XRef Scene dialog. Select toonstreet.max and then the Remove button. The lamp post stands alone, in place and proportionate to the street.
  9. Save the lamp as mystreetlight.max.
  10. Choose File > Open and choose toonstreet.max again. After a pause the file opens.
  11. In the Perspective viewport, navigate to the street corner where you had moved the street light. Zoom in if necessary.
  12. On the File menu, choose XRef Objects.
  13. On the XRef Objects dialog click Create XRef Record from File, and then navigate to the \tutorials\level_design directory, and chose mystreetlight.max.
  14. From the XRef Merge dialog, choose the object LampPostwSign. Click OK.
  15. Close the XRef Objects dialog.
    The lamp appears on the street corner, where you had scaled it.
  16. Select the street light, then right-click and choose Move from the quad menu. Move the streetlight to the corner near the yellow-and-black striped barricade.
    Next, you will create a light to associate with the streetlight geometry.
Add lights:
  1. Select the streetlight if it isn't already selected.
  2. In the Display panel, in the Hide rollout, click Hide Unselected.
  3. Use Zoom Extents Selected so the streetlight is clearly visible in the viewport.
  4. On the Create panel, click the Lights button.
  5. In the Object Type rollout, click Omni, and then turn on AutoGrid.
  6. Move your cursor over the streetlight. A creation tripod is displayed and is projected from whichever face you touch.
  7. Click to create the light on the surface of the globe.
  8. Raise the light up slightly above the globe.
  9. On the Modify panel, in the General Parameters rollout, turn on Shadows.
  10. On the Intensity/Color/Attenuation Parameters rollout, in the Decay group, choose Inverse Square as the type of Decay.
  11. In the Near Attenuation group, turn on Show and change Start to 20. You can see the Decay Start Attenuation gizmo in the viewport.
  12. On the Display panel, in the Hide rollout, click Unhide All so that you can judge the decay size in the scene geometry.
  13. Go to the Modify panel, and turn off Show in the Intensity/Color/Attenuation rollout when you've set the Decay.
Clone the lamps and lights:
  1. Change the lower Perspective viewport to Wireframe shading.
    Tip: If you want, you can disable the two viewports on the left. Right-click to activate the viewport, then press D to disable. This will prevent unnecessary redraws.
  2. Press H on the keyboard to select objects in the scene by name. Choose Omni 01 and the LampPostwSign object.
    Tip: Press the Ctrl key to select multiple objects in the dialog.
  3. On the main toolbar, in the Named Selection Sets field, name the selection lit lamp.
    Now you can retrieve the light and the lamp in one touch.
  4. Hold down the Shift key, then move the selection to create a clone of the lit lamp.
  5. In the Clone Options dialog, choose Instance, so you can control all the lights by changing one.
  6. Repeat the last two steps to add streetlights up and down both sides of the street. If performance is slow, use wireframe shading when you drag in the lamps.
Add global lighting:
Next, you will give a little color to the Omni lights and add directional lighting.
  1. Select the light Omni01.
  2. On the Modify panel, In the Intensity/Color/Attenuation rollout, General Parameters rollout, click the color swatch next to the Multiplier field.
    A color selector appears.
  3. Click in the left middle of the color selector to choose an orange color for the Omni light. Close the dialog.
  4. To add directional lighting to your scene, right-click in the Top viewport and press Alt+W to maximize it.
  5. In the Create Panel, click the Lights icon.
  6. On the Object Type rollout, click Target Direct.
  7. In the Top viewport, click and drag from the lower left of the geometry to the center of the street.
    The target directional light is displayed in the viewport.
  8. Adjust the size of the light coverage by using the Hotspot/Beam spinner In the Directional Parameters rollout. Notice that increasing the hotspot/beam automatically expands the falloff/field as well. When you decrease the hotspot/beam, the falloff/field remains unchanged.
  9. Click Maximize Viewport Toggle to display the four viewports again, then rotate a perspective viewport so you can see the directional light.
  10. Select and move the directional light to raise it up. The target stays on the street.
  11. On the Modify panel, in the Name and Color group, click the color swatch. Click Add Custom Colors and select a medium to dark blue to give the light a blue color for a moonlight setting.
  12. On the toolbar, in the Selection filters, choose Geometry from the list. This excludes the lights from the selection operation.
  13. In the Top viewport, drag a selection rectangle around the entire scene in the viewport. Do a Zoom Extents All out if necessary.
    All the geometry except for the lights are selected.
  14. You can name this selection Vertex Lighting in the Named Selection Sets field on the Main toolbar.
Create vertex lighting:
Here you can take the lighting information and map it into the color of the vertices.
  1. Continue from before, or load city_vertex_color.max from the \tutorials\level_design directory.
  2. If you do choose to load the supplied scene file, then choose Vertex Lighting from the named selection sets on the toolbar.
  3. On the Utilities panel, click the More button, then choose Assign Vertex Colors.
  4. If Mapping is on in the Render Options group, turn it off. This means to use the map's colors rather than the scene lighting.
  5. Turn on Shadows.
  6. Click Assign To Selected.
    A series of calculations will result. You will observe a progress bar flying by furiously at the bottom of the screen, rendering vertices for each of the objects in the scene. When this finishes, left-click in the viewport to deselect everything in the scene to see the affect of the lighting without any selection highlights.
    The scene is a little dark, so you'll make some adjustments to the lights.
  7. Right-click in the active viewport, and from the Display quadrant, choose Unhide All.
  8. Click Select by Name, and select Omni20 through Omni28. Make sure Omni01 is not selected.
  9. Right-click in the active viewport, and from the Display quadrant, choose Hide Selection.
  10. Select Omni01.
  11. In the Modify panel, change the Multiplier value to 2.
  12. Select the Direct01 light and turn on Shadows.
  13. Choose Vertex Lighting from the named selection sets on the toolbar, and in the Modify panel > Assign Vertex Colors rollout, again click Assign.
    Next you'll use Vertex Paint to change some of the vertex lighting.

Next

  • Painting Vertex Color in a Level

Painting Vertex Color in a Level

You can use Vertex Paint to change some of the vertex lighting. You'll notice a triangular dark patch near the drain. You'll paint in some more shadows to fix those hard edges.
Paint vertex color in a level:
  1. Continue from the previous lesson, or open\tutorials\level_design\city_vertex_paint.max.
  2. Select the street object and open the Modify panel.
    You'll see there is a Vertex Color modifier in the stack. An earlier version of the Assign Vertex Color utility added this modifier.
    Note: Files created with earlier version of 3ds Max will load with a Vertex Color modifier instead of a VertexPaint modifier. If you add a VertexPaint modifier to the stack and do a Collapse All Layers, you can convert the old info into the new modifier.
  3. Click the drop-down arrow on the modifier list, scroll down and select VertexPaint.
    A new VertexPaint Modifier is placed in the stack. Each layer of paint is accessed through a different VertexPaint modifier in the stack.
    The floating VertexPaint dialog appears. Here you find the tools for Vertex Painting. You will select a color to paint with and the faces you want to paint.
  4. Click the eyedropper icon, and then choose a dark brown color from the area near the drain. Press the eyedropper down and move it around over the geometry. The eyedropper will pick up the color from the map channel.
  5. On the VertexPaint dialog, choose Face selection then click on the face that has the hard edge brown shadow near the drain.
    The single polygon is selected in the viewport.
  6. On the Selection group click Soft Selection, then turn on Use Soft Selection.
    In the viewport the adjacent faces to the original are now selected.
  7. On the VertexPaint dialog, lower the Size of the brush to 3.0
  8. Click the Paint button, and then paint the light areas around the hard edge near the drain.

    Darker color is blended near the drain to blend into surrounding sidewalk
    Increase the Soft Selection falloff if you want to paint a wider area.
    Painting without soft selection will let you paint hard edges. Let's suppose you want to paint in a yellow brick road. You'll add another layer for the yellow tint.
  9. On the VertexPaint dialog, in the Layer group click New Layer.
    Another VertexPaint modifier is added to the stack.
  10. Choose Face Selection again, Turn off Use Soft Selection if needed, then hold down the Ctrl key and then in the viewport click to select polygons in the street. Add the side streets if you like.
    Tip: You can drag a selection rectangle to select many faces at once.
  11. On the VertexPaint dialog, click the color swatch and then choose a yellow color from the color picker.
  12. On the VertexPaint dialog, click the Paint All button.
    The selection fills with yellow color.
  13. To tone down the effect, move the Opacity slider in the Layer group. Watch the paint in the viewport as you change the opacity of the layer.
  14. For fun, click the drop-down arrow for the Mode list in the Layer group, then choose a different blending mode, such as Color Dodge, for example. See what each of the different modes does in the viewport.
  15. Save your scene as myellowbrickroad.max.
    The city needs some beautification, so you'll add some trees. In the next procedure, you can use a sample script that comes with the software to paint the XRef trees into the scene.

Next

  • Using the Object Painter Script to Add Trees

Using the Object Painter Script to Add Trees

The Object Paint utility is a script that allows you to select an object and then wherever you move your cursor, it paints the object. The objects are all placed on the world space grid, or whatever grid is active.
  • Continue from the previous topic or load File > Open > city_noforest.max. Adjust your viewport, if necessary, so you are looking down the street.
    Note: If you encounter an error message regarding a missing XRef file, browse for it in the current directory, or look in the \tutorials\level_design directory.
Create an object painter toolbar:
  1. Using Windows Explorer or My Computer, copy macro_objectpaint.mcr from the \tutorials\level_design directory into the \ui\macroscripts directory.
    Macro_ObjectPaint is a script that is one of many samples that ship with the software. They are available if you choose to install them by selecting Samples.
    All of these scripts can either be run by a keyboard shortcut, a menu or a quad menu. They do not appear in the interface until you customize your UI to display them. When they are run, all the scripts in the MAXScript Utilities folder appear in a category called MAXScript Utilities.
  2. On the Utilities panel, click MAXScript > Run Script.
  3. Navigate to the ui\macroscripts directory and run macro_objectpaint.mcr.
  4. From the Customize menu, choose Customize User Interface.
  5. In the Customize User Interface dialog, click the Toolbars tab.
  6. Click New to create a new toolbar, and name it Object Paint Tools.
    The new toolbar appears as a small box in the viewport.
  7. In the Category drop-down list, choose MAX Script Utilities.
    You should now see the Object Painter available from the Action table.
  8. Drag Object Painter from the list to the Object Paint Tools toolbar.
    Tip: If the Object Painter text does not display correctly on the toolbar, then go to Customize > Preferences. In the UI Display group of the General tab, turn off Fixed Width Text Buttons. Now the Object Painter button text displays correctly on the floating toolbar.
  9. Close the Customize User Interface dialog.
Use XRef object to add a tree:
  1. On the File menu, choose XRef Objects.
  2. In the XRef Objects dialog, click Add.
  3. Select city_tree1.max. If necessary, navigate to the \tutorials\level_design directory to locate the object.
  4. In the XRef Merge dialog, click Trunk02, and close the dialog.
    The tree appears in the scene.
  5. Right-click in the Top viewport to activate it without changing the selection. The tree is still selected. Make sure the Top viewport display is wireframe.
  6. Click Object Painter in the floating dialog.
  7. Set the Spacing to 30, and click the Paint button.
  8. Move your cursor from the right to the left in the top viewport, to paint a row of trees along the street.
  9. Save your work as mycitywithtrees.max.
    Tip: Object Painter doesn't work with grouped objects. If you want to paint a group, open up the group, then use Attach List to attach the objects together.

Summary

In this tutorial you have modeled a city block to be used as a game level. You have explored modeling with primitives and modifiers, and have used XRefs to add streetlights. You have used a Blend material to create a decal on the garage. And you've used the VertexPaint modifier to paint shadows and tint the road. Finally you've used a script to paint trees into your scene.
By:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)