A beginner's guide to building a map
In this tutorial I will explain the process of making an environment in hammer that includes many different features. This is intended for beginners, but instead of a dumbed-down "how to make a box" tutorial, you will learn how to do many more things! This is thorough, but if you go through it all, you should have a really good understanding of hammer.
|Table of Contents:|
|0. Learn your vocabulary!|
1. Get Suited Up
2. Making Your First Walls and Floors
3. Giving Your Yard Some Detail
|------------------------------------------------------------------------------- Another SDK Update ------------------------------------------------------------------------------- Valve has released another update for the source SDK. For info, read this thread in the steampowered forums. This may or may not solve the problems with the last update. Valve isn't exactly "clear." link ------------------------------------------------------------------------------- Camera Update: ------------------------------------------------------------------------------- Many people have a problem with the 3D view showing nothing even after building some stuff. This is because when you create a new map, hammer often places the camera way off to the side of the grid. So, just click the camera tool, then click in one of the 2D views near the center of the grid to center the camera there.|
What you need:|
- Brush: any polygon that you make in the editor that has no special things to do, it just sits there and acts brush-like.
- entities: these are either located at one point and do not show up in your map while playing it, are a brush, or are models that are seen while playing your map. entities are what "do stuff." For example, a "light" entity is a point based entity that produces light.
- displacements: single faces of brushes that are given many vertexes. Huh? This is what terrain is made out of. You can manage displacements with the face edit tool.
- textures: the colors and patterns that are applied to the faces of brushes to make them look like something. e.g, a brick wall on a flat brush.
- vertex: the corner of a brush.
- edge: the line between two vertexes on a bush.
- face: one side of a brush.
- Start up Source SDK, from your steam menu (It's a good idea to put the SDK startup on your desktop). Make sure the "current game" setting is set for Counter-Strike Source. Open the Hammer editor.
select file -> new. Now click file -> save as, and name it something like "Dr. Spud's amazing tutorial" if you want. It's easy to forget to save, so do it now.
=== You now have an empty map. Notice the 4 screens: ===
-top left is the camera screen, this lets you see what you are making. click on "camera" in the top left corner and change it to "3D Flat" for now.
-top right is the top screen, which displays your map in 2D wire frame. Generally you do most of your brush making here
-top left and right are the two 2D wire frame side views of your map.
=== Now take a look at the pictures on the left of the window: ===
-red arrow: the select tool. This lets you select brushes or entities.
-red magnifying glass: this lets you zoom in the 2D views; you will probably never use this and use your mouse wheel instead.
-red camera: lets you navigate the camera in the 3D view. Don't ever use this. The better way is to hover your mouse over the 3D view and use the WASD and arrow keys to navigate.
-white weird circle stick thing: the entity tool. This lets you place entities in your map by clicking in the 3D view.
-white cube: the brush tool. Lets you create brushes in the 2D views.
- green/ blue cube: the face edit tool. You can apply and alter textures on brushes AND manage displacements with this.
-brown cube: don't even trouble yourself with this thing.
-target cube: the decal tool. This lets you place decals on brushes.
-Cube with green on top: The overlay tool. Do not even trouble yourself with this also.
-sliced cube: the clipping tool. Allows you to chop brushes up!
-wire frame cube: the morph tool. Lets you move vertexes on brushes around to make different shapes.
Phew. Now that you know what those are, look at the right side. There are 4 different things, all on top of each other (moving from top to bottom):
-Select: lets you select different things with the select tool. If you are like me, you will never touch this.
-Textures: Lets you select your current texture. Texture group is what set of textures you search through; just keep it on "all Textures." Current texture is the.... current selected texture, which is displayed in the picture. The browse and replace button I will cover later.
-Vis groups: Don't trouble yourself with this for now.
-Entity controls: Lets you choose what entity you want to create with the entity tool. Also lets you turn brushes into entity's and back again (with the "to world" and "to entity" buttons).
Good job! You know what all those things do. Now, before we begin the actual building, do a few more things. First, select "browse" on the right-side texture controls. There is a huge list of textures in a separate window. Don't worry, you can easily sift through it all with the "filter" control on the bottom. For now, type in "tools" for the filter. This shows you the special developer textures. Double click the "tools/toolsnodraw" texture. You will begin texturing later, but now all the brushes you make will be given the nodraw texture (I'll explain why you did this when we start texturing).
Now, familiarize yourself with the size of the grids in the 2D views. You may not know it now, but they are rather large when hammer is first started. The "[" and "]" keys control how big or small you want them. For now, press the "[" key twice to get a good sized grid.
Press "map" on the top of the window and make sure "snap to grid" has a check next to it. If not, click it to turn it on. This will automatically snap the brushes you are making/ editing to the grid.
By now you are really bored and are questioning whether you still want to make maps. Have no fear! The fun part is next, and the boring familiarizing process is over!
- To make things easier on us, we will make one good sized floor to get our barrings. Go to the top view (top right)- see the blue lines in the middle? Those meet at the origin, or middle of the grid. The grid is further divided by red and white lines.
To make your brush select the brush tool from the left of the window (white cube), put your mouse on the spot of the grid where the corner of the brush will be (use the top view grid for now). Click, hold, and drag the mouse over to where the opposite corner will be, then let go. Ours will be a square with the center at the origin. It is now only white lines, you must now right click it and select "create object." Now you have a brush!
To move brushes, select the "select" tool (red arrow), then either click on the brush in the 3D view, or a side of the brush in a 2D view. you can now click and hold the brush in any 2D view to move it. this will also display the length and width of the brush in the 2D view. In my example, the brush is 1024 x 1024.
In the other 2D views, check that the height is 64 units.
Now you have ground, but how high should you make your wall? To know this, you will place your first entity. Click the entity tool (white ball on a stick thing), check that in the right hand entity control, it says "info_player_terrorist" under "objects." You are actually creating a spawn point for the T's, but you can use it to get an idea of how big your brushes are because is shows a model of a player.
Now, with the that set, go to the 3D view and click on the top of your brush. Now there is a terrorist standing on it (using these models for a sense of scale is a very useful technique).
Line your ground with walls. Make a brush that is right next to the ground in the top 2D view. You should make the inner edge touching the edge of your ground, so that you don't cover any of it up. make it 1024 x 64 in the top view, and right click and create it. It will be the same height as the correct selected object in the map. If you were a good boy, the terrorist model is still selected, so the brush is that height.
Select your "wall" and go to either side 2D view. there are six white boxes around it. These let you scale the brush. click and drag the box on the middle top of the brush to make it taller. Then be sure to drag the bottom of it to the top of the ground, so that none of the wall is covered up (doing so makes texturing later easier). The standard height of a wall tends to be 128 units high, but make it about 190 units high for this tutorial.
Repeat for the other 3 sides.
For this exercise, you will not create a ceiling, as it will be an outdoor courtyard.
I will not explain how to make brushes later on; I will assume that you have learned how.
- Courtyards do not tend to be so empty, so for this, we will add some flowerbeds, and a couple of simple gazebo like things.
First, the flowerbeds. You will need to go off my screenshots for the placement. Look at screenshot 2. Create 4 brushes with length and width 64 x 320 in the spots shown. Now, make them all 32 units high from the ground level (You will have to make the grid smaller with the "[" key).
On to the bases of the gazebo things (there are 2, and you can do them one at a time if you wish). In the top view make brushes 256 x 320 directly below the top flowerbeds, they must be touching the flowerbeds, and be the same height. Once those are made, we will construct ramps to get up to them. create a brush length and width 64 x 128 bellow one of the bases (center it to the base so that it look good). Make it the same height (32 units). You will now use the morph tool (Ooooo, scary!).
With your soon-to-be-ramp selected, click the morph tool (left side of window). (Look at screenshot 3 if you need some help with this.) Now the brush looks clear with its vertexes in white. In the bottom left side view, left click the top vertex that is on the other side of the gazebo base. This will select BOTH vertexes on that edge (the one facing you, and the one behind the vertex you see). Now, drag those 2 vertexes down to the same spot as the vertexes below them. Hammer will ask you if you want to merge them, click yes. Now press the select tool to exit the morphing. If you did it correctly, you now have a ramp up to the gazebo base. Select this ramp, edit -> copy, and edit -> paste it in front of the other base (be sure to put it at the correct height).
Now we will put pillars at the corners of the gazebos. make them length and width 16, and height 128 (with the bottom of it on top of the gazebo base). repeat this for the other corners.
Make small walls that are 48 units tall between the pillars(same width as the pillars too). Only make them extending from the corners nearest to the corners of the map.
Next build beams that go between the tops of the pillars. They should only have a height of 8 units and be aligned with the top of the pillars. (look at the screenshots for help).
Finally, we will make a simple bridge connecting the two gazebos. Make it length and width 64 x 192 and height 8, and center it between the bases of the gazebos and align the top of it to the same height as the bases.
Congratulations! You have made your courtyard more courtyard-like, and have managed to not fall asleep reading my writing!
- You are now ready to turn your ground into a displacement. i.e, your so called "ground" will not be perfectly flat anymore.
To make a displacement, you must turn a face of an existing brush into a displacement. Click the face edit button on the left of the screen, then click the "displacement" tab. Under tools, "select" will be...selected; so, all you need to do is click on the face you want to be terrain-ized. For this courtyard, click on the ground, then click "create." A small window will pop up. Terrain can be size 2, 3, or 4. 2 being very un-detailed, and 4 being the most detailed. Choose 4.
NOTE!: For future reference, the smaller the brush face you turn into a displacement, the more detailed the displacement will be! Many times multiple small sized brushes will be put next to each other and sewn together, I do not cover that in this tutorial.
Now your ground is a displacement. With it still selected, click "Paint geometry" in the face edit window.
While painting displacement terrain, there are a few different options. First, "Raise/ Lower" is the main way to put bumps and hills in terrain, "Raise to" can be used to flatten terrain, and "Smooth" smooths out jagged edges.
Keep it on "Raise/Lower." Distance is the distance the terrain will be moved in a single click, and radius is how large the area of effect you will be using is. For this tutorial, we will only be using the "face normal" axis, X and Y axis displacement editing is used for displacements on walls mainly.
You use the 3D view to edit displacement. left clicks raise it, and right clicks lower it. Play around with the ground in the courtyard, and try to make it look as grass and dirt would, with mostly level, smooth slopes. Use my screenshots as a guide. Just be sure that you don't lower it under the flower boxes or gazebos, so that they don't look like they are floating.
You now have a perfectly acceptable courtyard, except for one thing...
- Your courtyard will look a little odd as a bunch of flat, colored boxes. You must apply textures to the faces.
First, click on "camera" in the top left 3D screen, and from the drop down list select "3D textured." Everything you have made so far is covered in the nodraw texture. Why did I have you do that? Because when you run the game, nodraw textures appear invisible. Now when you texture your map, you only put textures on the things the player sees. Everything else, including the backs of the walls and undersides of the gazebos, is invisible. Since they are never seen anyways, it makes the map lag less. Setting default textures to nodraw is one helpful way to keep your map as efficient as possible.
Anyways, open the face edit tools once again. This time click the "material" tab. This is what you apply textures with. First lets get a dirt texture. Click "browse" so that the texture list opens, and filter it for "dirt." Select the "cs_havana/dirtfloor006a" texture from the list. Now, with the face edit window still open, click on your ground in the 3D view to select that face. Then in the drop down list under "current texture" (which will display recently used textures) select the havana dirt again, they click "apply." That's all you have to do to apply textures (texture manipulation will not be discussed in this tutorial).
For all the other objects in the courtyard, select a texture and apply it. Here are the textures I used:
-Flowerbox sides: "stone/infwllftop"
-Flowerbox tops: "de_cbble/grounddirt"
-gazebo base: "de_tides/tides_floor_wood"
-small bridge/gazebo pillars and beams: "cs_havana/woodm"
-gazebo walls: "de_cbble/woodceiling01"
There's one last thing to do before your map can work.
- Since your map is outside, there has to be a sky, so that you aren't forced to look into black nothingness. To make a sky, you make brushes with the "tools/toolsskybox" texture on them where it should be.
NOTE!: The newby way to make a skybox is to put a hollow box around the entire map. Don't do that. Only put the skybox where walls and ground do not block the sky. This will reduce lag.
The game engine will worry about making the sky look big, you can simply put the skybox textured brush over the map like a ceiling.
NOTE!: The sky that a skybox uses can be changed, but that is not discussed in this tutorial.
NOTE!: 3D skyboxes are an entirely different kind of building, all together. Don't worry about 3D sky boxes if you're a beginner.
Congratulations! You now have a simple, but fully functioning courtyard! There are not all the necessary things to make a counterstrike game, but you built the geometry. By now, you should:
- know how to turn hammer on
- know what most of the buttons/ tools in hammer do.
- know how to make brushes
- know how to place entities
- know how to move and scale brushes
- know how to do basic construction with the morph tool
- know how to make and edit displacements
- know how to apply textures
- know how to make a basic skybox.
I hope this tutorial helps you in learning the basics of hammer. You can always message me on this site if you need help.