Mapping for dummies 1: hands-on tutorials. The very basics

[ATTACH=full]5208[/ATTACH]

Since people have been asking for decent noob-level tutorials to get into mapping for a while, I’ve decided to give it a shot. The idea is to introduce the basic tools progressively in a way that you can follow each of the tutorial sessions in periods between 30 and 60 minutes. Each tutorial will build up on the previous ones and will be paired with exercises/challenges so you can keep toying with the tools on your own.

This particular tutorial will focus on the very basics of mapping. I will introduce the most basic map one can create: a box with light in it. This is akin to ‘Hello world’ programs when learning to code, which aim to make the very basics familiar to newbies. I will ignore technicalities and simplify things so that they are easier to grasp. Every step will be accompanied by a screenshot I took while preparing the tutorial. Without further ado, we will dive right into it.

Our first step is to load up the editor, called Hammer. To run it, you need to install and run the SDK for whichever source game you want to map for, in our case CS:GO. Counter-Strike: Global Offensive - SDK appears in the ‘Tools’ section of your Steam Library. Once you install it and run it, you should get something similar to this:

[ATTACH=full]5147[/ATTACH]

At this point, we will clock on the Hammer World Editor label to open up the program. When it loads up, we will start a new map by clicking on the ‘File’ menu on the top left or by pressing CTRL + N on our keyboard. The result will be a window that resembles this:

[ATTACH=full]5148[/ATTACH]

Before doing any actual mapping, we have to understand what’s going on. We have a lot of buttons on screen now, and they certainly can be overwhelming. For this particular tutorial, we will focus on the most basic tools for the job, the ones you will use the most. You shouldn’t worry about anything else yet, so we will center our attention on the tool icons to the left, the 4 views in the center and the texture and entity menus to the right. Following that left-to-right order, we first find:

[ATTACH=full]5149[/ATTACH]

Although we can see more icons, I’ve removed those tools that are less commonly used. Those tools are the ones you will be using the most, and in this particular tutorial we will focus on the first three. Take a moment to hover your mouse over the icons and you’ll notice a hint pop up with the hotkeys to speed up switching to that tool. These shortcuts can greatly speed up your mapping and make you very proficient: learning them is a good idea.

To create our map, we have to start laying down blocks. Those blocks should have a material on them so that they resemble whatever we want to build. We will now select a material for the first time ever, going to the menu on the right and clicking on browse:

[ATTACH=full]5150[/ATTACH]

I tend to create the floors of my rooms first. There is no reason for it, I just do. Because of this, I will first select a floor, a tile floor in particular. To do this, I need a tile material, so I input ‘type’ in the material filter. The result is something similar to this:

[ATTACH=full]5151[/ATTACH]

With my tile texture selected, it’s time to create my first block. Those blocks are called ‘brushes’ in Hammer. Coincidently, we have a tool called ‘brush tool’; we will click on its icon to create the floor of our first map. After pressing the icon from the bar on the left, we will be able to click on any of the 3 grid-views to create a block. You should see something similar to this:

[ATTACH=full]5152[/ATTACH]

You can stretch the brush as you’d like, and when you’re done with it you either press the ENTER key or right click on it and press the ‘Create object’ button. After doing so, you will have placed your first brush, and you can click on the remaining 3D view to see it. To navigate on the 3D view, use your WASD and arrow keys. You should be able to see something like this:

[ATTACH=full]5153[/ATTACH]

Now it’s time for you to see if you’ve gotten the hang of it. With this floor in place, can you build the rest of the room? You will need 4 walls and a ceiling, with walls and ceiling using different textures from the floor. I’ve laid 4 walls and a ceiling with 2 textures that looked good enough on the browser and the result is the following:

[ATTACH=full]5154[/ATTACH]

Something like this should be your very first BOX ™ map. Notice that in my grid view, my brushes are placed so that their borders touch eachother. Tidiness is important, because when you build a big map things can get out of control and messy.

At this point, we want to be able to hop onto our map ingame. It is only natural, since it is our first BOX ™ map. First, we have to save our map. To do that, we open up the ‘File’ menu again and press on either ‘Save’ or ‘Save as’. You can also press CTRL + S. You’ll be getting something like:

[ATTACH=full]5155[/ATTACH]
After giving your map a name, you need to compile it so that the game can run it. In the very same 'File' menu, you can find the 'Run map...' option. Click on it or press the F9 key on your keyboard, and you'll be prompted with the following screen:
[ATTACH=full]5156[/ATTACH]

Since we are very normal people, we will keep everything normal. In CS:GO, expert compiles are a must, but we will talk about that in a different tutorial. We will just simply press on the ‘OK’ button to start the compilation and…

[ATTACH=full]5157[/ATTACH]
What the heck is going on? Command lines? RED?!?!?!? Don't panic, it's normal. CS:GO's development kit is less gracious than some of its counterparts, but this is nothing to worry about. We simply forgot to place spawns for ourselves in the map, and the compiler knows that a map without entities makes no sense. We will fix that by learning to use the entity tool, which we will select now on the bar on the left.
[ATTACH=full]5158[/ATTACH]

After pressing on it, we can click left click on the 3D view to place a terrorist spawnpoint. You should place the spawnpoints inside the box, because otherwise they will be left in the endless void and probably die. Think of your box, of your map, as a spaceship. You kill your entities if you leave them out, and you kill them too if there’s a hole and the oxygen runs out. You don’t want to be a killer. This analogy will help us in future tutorials, but for now is just a silly joke.

We would like to place a counter-terrorist spawn too, so that we can join either team. The previous picture also shows the Entity block on the right-side bar. In it, you can scroll through the objects menu to select an info_player_counterterrorist entity (as opposed to info_player_terrorist). Select the CT entity and place it in the map by left-clicking in the 3D view. You should be seeing something like:

[ATTACH=full]5159[/ATTACH]

With those two spawnpoints, we can give compiling a go again. We will do so by following the same steps as earlier, through F9 or the ‘File’ menu. This time, we should compile without any sort of problem. We will launch the game after the compilation process finishes and we will then load the map. The result will be our fantastic BOX ™ MAP, which should look like:

[ATTACH=full]5160[/ATTACH]

Something seems wrong with it, however. In particular, those black blobs are ugly. They are the result of compiling without any lighting information. We will, then, add out first light. Out measly box will be lit!

To place a light, we will have to create a light entity. The process is the same as with the spawnpoints, so we will select the Entity tool first and we will use a Light entity on the right side menu afterwards. We can now place our light by left clicking on the 3D view yet again, and your result should look like this:

[ATTACH=full]5161[/ATTACH]

And, at this point, it’s time to compile again. After doing so and loading the map ingame, you should get something that resembles:

[ATTACH=full]5162[/ATTACH]
And with it, your first BOX (TM) map will be done for.

If you’ve reached this point and you have managed to get something similar to the final screenshot, you are ready for a challenge. If not, you should try to figure out what went wrong by going through the steps again. If you can’t get it right, post in this thread.

CHALLENGES (Increasing difficulty):

  • Although we have mentioned the Selecting tool, we haven’t explicitly used it. Look at the tutorial_room.vmf that is attached. Can you figure out how the entities were placed or moved so that they are aligned to the grid?
  • The fact is that the light we used is very unnatural. Lights are rarely fully white in real life. Try double clicking on the light entity and playing with the values. Can you make the room get lit more naturally?
  • Keep working with the brush tool and try to build something more complicated like, for example, your bedroom. What do you feel is missing from your tool arsenal? Can you figure out which of the tools we mentioned you should be using?

THINGS THAT COULD GO WRONG:

  • You can’t spawn ingame after placing the spawns: The spawns might be too close to the floor/ceiling/walls. Everything is lava. Move them away a bit.
  • The red error keeps appearing even after you place spawns: Your spaceship has a hole and you’re running out of oxygen. Find the hole and patch it.
6 Likes

At this point we have learned about the elementary tools we can find in Hammer - the very basics. We have built our first map with a few brushes and entities. We are more familiar with the editor, and we are starting to get accustomed to the layout.

In this particular tutorial we are going to put all the tools in the toolset. We will focus on the three remaining tools from the previous tutorial, though we will give an overview of all important tools. The style of this tutorial will follow the same pattern as the previous guide, though I will skip steps that we have already seen. If something is unclear at some point, you should look back to try to get it on your own. If you can’t figure it out, post here and I’ll try to help you the best I can.

After creating our very first BOX MAP ™, we ended up with a playable but very plain looking room. Indeed, most of the time we don’t play on empty box rooms–though some maps are stylized that way. We are going to take our box and turn it into a proper room. For that, we first have to load our previous map file, using the ‘File’ menu yet again.

[ATTACH=full]5164[/ATTACH]

After loading it, we want to spice our map. Since what you built and what I built will differ, you can see my choices from this point on as mere guidelines. We want to place some models -props in Source’s lingo-. In my case, I want to place them so the area resembles a bedroom by the end of this tutorial. For this, and using the same entity tool we have already covered, we will place a static prop using the ‘prop_static’ entity. The result should be similar to:

[ATTACH=full]5165[/ATTACH]
After placing our prop, which at the time has no model assigned to it, we need to change its properties. To open the properties dialog, double click on the little red cube or right click on the object in gridded-view, then select the 'Properties' label. I will fiddle with two very important properties: rotation and model. I will rotate the prop so that the back of the bed touches the wall, and I will specify a bed model which looks pretty comfy. To specify the model, press on the 'Browse' button to look through the whole model library. Your results should resemble:
[ATTACH=full]5166[/ATTACH]
At this point, it's a good idea to give the map a shaking and compile it. We will follow the same process as before, using the normal compile tools. The result, if you used a prop_static and assuming Valve doesn't change anything major, should look like this:
[ATTACH=full]5167[/ATTACH]
Something about it is fishy, isn't it? Indeed, the prop isn't getting lit at all. The explanation as to why this is happening doesn't quite matter, but the solution does. We will use an Expert compile instead. We will open the expert compile window by clicking on the 'Expert' button, as shown here:
[ATTACH=full]5168[/ATTACH]
Now we will create our own custom compile. In CS:GO, you can't use LDR lighting if the map has HDR lighting compiled and HDR can encapsulate LDR, so compiling LDR is a waste of time and space. Because of this, I have two compiles: FAST HDR and FINAL HDR. I use the former for testing, the later for releases. We will take the 'Edit' button and copy the 'Full compile -HDR only' twice. We will rename the first one as 'Fast HDR' and the second one as 'Full HDR'. Then we will select one after the other, modifying the $light_exe parameters. For Fast HDR, I use:
-bounce 0 -noextra -hdr -StaticPropLighting -StaticPropPolys -staticpropsamplescale 0.25 -game $gamedir $path\$file

In the case of Full HDR, I use:

-final -textureshadows -hdr -StaticPropLighting -StaticPropPolys -staticpropsamplescale 16 -game $gamedir $path\$file

If we have correctly configured our compilers, after compile we should get:

[ATTACH=full]5169[/ATTACH]

At this point, I’ve noticed that the walls are a bit too low. A player is 72 units tall, and my 128 unit tall walls make the ceiling feel too up close when standing on the bed. Using the selecting tool, I will select the walls and the ceiling and resize the room. I want to keep the brush proportions and the vertex positions, so I will be as careful as possible. The result, after resizing the walls and moving the light and ceiling upwards, should be:

[ATTACH=full]5170[/ATTACH]
We have added two more static props for good measure. The texture scales on the walls now look wrong: how can we go about them? We will now use the texturing tool for the first time. First, click on the icon in the bar to the left (the cube with green, blue and orange faces). You can also use Shift + A, as the hint shows if you hover your mouse over the icon.

When the menu opens, click on any of the faces of the walls. The best way to understand how texturing works in Source is to experiment with the different values. In this case, since we want to modify the scale of the texture, we will just mess with those two fields (that should be both initialized at 0.25 X and 0.25 Y).

[ATTACH=full]5171[/ATTACH]

Since I changed my walls to be 160 units (from 128 units) in height, and I want my walls to match the face sizes, I have to make the scale bigger. If I press the FIT button, the texture looks stretched and really poor. However, I can check the values after pressing FIT and I will find a 0.313 value on the Y axis. I want the texture not to be distorted while wrapping the face, so I can copy that value on the X axis and TA-DA! The result is exactly what we were looking for on that face. Left click on that face and then right-click on the other faces of the wall to copy the texture values. The result should resemble:

[ATTACH=full]5172[/ATTACH]

If you’re mathematically minded you’ll realize that at 128 units in height it was 0.25 because the texture is 512x512 pixels in size, so we have to get 0.3125 as the scale for 160 units, with 0.313 being the 3 digit approximation that Hammer tries to force on you. If you aren’t, it doesn’t matter: you can use the FIT trick to discover the scale you want to use. On another note, you should avoid FIT in most situations, as it usually ends up producing very sloppy results.

We now have some sense about modifying our brushwork, at least to a very basic degree. How can we make the room look realistic? For starters, it looks really flat. One way to add depth is to apply decals on surfaces. You can think of a decal as a sticker you slap on top of a brush–only adding detail with little overhead. When you shoot a zombie, the blood splattered on the nearby brushwork is a decal. At this point, look for some texture in the texture browser which you feel might fit the room – it can be a painting, a rug to place under the bed, graffitti, etc. I will be using a rug myself. Now, change over to the decal tool on the left bar and simply click wherever you want the decal to appear. You should get something like:

[ATTACH=full]5173[/ATTACH]
Beautiful, isn't it? However, I'd like to make my room look a bit more natural. The problem with decals is that they cannot be rotated or scaled. They are a very cheap effect, but at times we just need more. There is a slightly more costly alternative located just below: overlays. Remove your previous decal (by pressing the delete key or just undoing via CTRL + Z) and switch over to the overlay tool below. Place the decal in the same position and look at the gridded views. What's different? The overlay covers an area instead of being just a point in space. We can scale and rotate it, as shown below:
[ATTACH=full]5174[/ATTACH]

The result is a bit more natural, what’s the catch? Well, although it isn’t very important for you at this point, there is a lower limit of decals you can place. In general, it’s best to stick to decals for most situations and use overlays when you need some degree of deformation.

[ATTACH=full]5175[/ATTACH]

Our map is starting to look really different from what it was before. We are adding some aesthetic improvements. However, we really would like to design areas that aren’t mere boxes. Indeed, we want to be able to build our map layouts in any sort of angle possible. How do we go about that? With two tools remaining at the bottom, it’s time to jump into brush clipping and vertex editting. We will focus ourselves in the former.

Let’s say that we have a wall and we want to add a door – a situation we could say we have now. Although a way of doing it would be to redo the wall brush by brush, it would be faster to ‘cut through’ it to add a door. That’s what the clipping tool is for. Select any wall and then start using the clipping tool by clicking on the left bar. In the grided views, you’ll notice you can define start and end points through which you will cut through. Areas marked as white will be kept while the rest will be removed.

[ATTACH=full]5176[/ATTACH]

Since we want to cut through the wall without losing any parts of it, just sketching the layout of the door, we will change the clipping mode to preserve both sides. To do this, we just need to click on the clipping tool again or press SHIFT + X. The hotkey really comes in handy here. After clipping the wall two times horizontally and one time vertically, we will have drawn the layout for the door. I’ve used a dev-textured door that references the default door sizes. The result is as follows:

[ATTACH=full]5177[/ATTACH]
The map is starting to certainly look like something. At this point, I decided to speed myself up a bit and add some extra details.
[ATTACH=full]5178[/ATTACH]

However, I noticed the box I made initially was too big and my room looked empty. I really wanted to resize the room, and I’m sure you will probably want to do it, too. In fact, try it. You will notice you’ll likely distort the brush sizes and make the Hammer view more cluttered. Futhermore, you’re likely going to screw the relative distances between the objects, perhaps getting something like:

[ATTACH=full]5179[/ATTACH]

Of course, we could go on a object-by-object basis, but that would be quite tedious. Is there any smarter way? If we kept our brushwork tidy – and we should, because of this – we can try using the vertex tool. Vertex manipulation can lead to issues down the line if you’re not sure about what you’re doing, so until you get a good grasp on it you should stick to simpler schemes.

However, moving vertices doesn’t usually cause any problems. Switch to the vertex manipulation tool (lost icon on the left bar) while having all your brushwork selected. You’ll notice squares appearing on the vertices. Select the vertices of the walls you want to move and do so. You should end up in a situation like:

[ATTACH=full]5180[/ATTACH]
Vertex editing seems pretty harmless, right? To show the issues that might arise, and to also introduce the concept of 'quickhiding', select the brush that makes up the ceiling. With it selected, either press CTRL + H or the icon of stripped cube with a q in the top bar. You should only see the selected brush now. Using the vertex editor, mash vertices together until you get a surface that isn't flat, similar to this:
[ATTACH=full]5181[/ATTACH]
This is an invalid, non-convex solid. Although we will not go into details, Source needs brushes to be convex solids. Vertex manipulation is one of the few ways to produce brushes that don't obey that condition, causing the compiler to crash. Press ALT + P to open the 'Problem report' menu. You should see an 'Invalid solid' listed there. If you don't, keep messing with the solid until it becomes invalid. The problem report is very useful, because it lets you track issues (the ones that Hammer can detect) so you can fix them easily. You should try to always use it before release.
[ATTACH=full]5182[/ATTACH]

Undo the changes made to the ceiling and click on the icon of a bright green cube with an eye in it. This will restore the hidden objects into view.

At this point, we have added all the useful tools to our collection. Our toolbox is complete, and it’s time to get some experience with it. Since that’s the case, I’ve taken the liberty to further detail the scene. Try to mess with the tools on your own and try to improve the look of your first ROOM ™.

CHALLENGES (Increasing difficulty):

  • There is one texturing tool in particular that we have skipped, right under the texturing tool in the left bar. What does it do?
  • We have only added a door to our room, but… can we do more with the clipping tool? Try creating a sloped cut somewhere.
  • You can lower the size of the grid by using the [ATTACH=full]5184[/ATTACH] icons, as well as the [, ] keys. Try using the vertex editor on a newly created brush. Can you place vertices off-grid? Do you think this would be a good idea? (pro-tip: it isn’t)
  • Look at the image below. Can you create a scene similar in complexity? Notice the trims on the ceiling and the wardrobe on the right. You can check the map ingame by downloading it from the attachment below.
[ATTACH=full]5183[/ATTACH]
2 Likes

Thanks for the tutorial Envio, im sure this will 100% help all the people who are thinking of starting to map.

Cheers Envi! Got started this morning and enjoying it so far!

Well done, nice way to start mapping, this can became in the ultimate 101 guide to mapping.

I’m really enjoying that you start tutorials for dummies.

I’m currently focusing on more advanced tutorials to help my mates to finish and release their maps. I don’t have enough time or will for dummy tutorials…
But i will make soon a “basic knowledges” thread, to help understand how maps are built.

To all of you guys, promote a maximum this tutorial and the next ones for dummies, we need to grow the mapper community for ZE.
There is so many things to learn, don’t wait to promote them or guys will be discouraged. It’s really important, so take time to talk about it and share this.

Best should be if Morell promote this dummies tutorial, with automatic announcements in the server chat, as i know that some players have the will to start mapping, but don’t come in the forum and are lost about how to learn.

Just one thing i think you should add on this tutorial: navigation in the views.
-keep pressing spacebar and left click, to drag the windows sights in 2D views.
-toggle 3D navigation in the 3D view, by pressing W (or Z if you’re with an azerty keyboard like me). That allows you to move like ingame.
I remember that this things made me really mad when i started :smiley:

Very nice stuff! good to start from scratch just to follow a pro mapper tutorial and do things the right way.
is that windows xp ? :b

I’ll try to get the second part of the tutorial later today, explaining the three tools remaining. The idea is that this pair of tutorials can be followed in a single day, giving people a headstart right into the challenges/projects. Future tutorials will probably build up on them, and I think I’ll try to make readers ready for a first map after tutorials 3 or 4.

Unorth, it’s great seeing you trying other point entities. Did you have any issue with the props being black initially? If so, we will address that in the second tutorial.

wan186, I think it’s best to wait for a cohesive set of tutorials to be done before advertising anything. When the first 3-4 tutorials are done, they should contain the very barebone basics to create a simple map.

HooKa-_-SmoKa, it’s actually win7 with the windows 98 theme. I like the blockiness :^(|).

Hey Envi,
At first yes I had to work around no longer using the basic compilation and switching to expert compilation and switching to full compile with HDR and LDR compilation for the prop_static entities being black. Quick google search helped explain this. Mainly been focused on learning the tool set and reading up on entity optimizations (dynamic vs static entities) and texture brushing optimizations (nodraw) to make sure that no bad habits are picked up early on.

As someone whose done a good bit of game design in OpenGL/Unity who has been interested in stepping into source but never really had a platform to start off on I think the flow of the guide is great for beginners.

Cheers for the guide and I look forward to tutorial 2,3,4 to hopefully pick up some more tips.

Regards,
Unorth

Cheers, Thanks for the tutorial

Someone add the “Mapping King” rating here.

I’ve posted part 2. I think it is digestible still, but if the learning curve becomes too steep please tell me. I’ve tried to keep it as simple as possible, but at times you try to splurge too much content and that ends up being more confusing.

Envi, you used a non CSGO VPK material for the ceiling ^^

Using the selecting tool, I will select the walls and the ceiling and resize the room

Watch out. On the tutorial it’s ok as you use a 1.25 scale ratio.

But the problem is that resizing without using the vertex tool, scale ALL the distances between vertices with the same ratio. That can result in vertices out of the grid. Example here:

Same problem appears when you rotate brushes.

You need to be careful with this kind of resizing or rotating, check all your vertices.
You can post-correct the problem by using the vertex tool, to make your vertices on the grid again :wink:

I didn’t notice I use Halloween’s wooden texture until now. People should have no problem replacing it, though, and perhaps we can twist the error on my part on yet another little challenge to go by :^(|).

About vertices going off-grid by scaling, that’s explicitly covered in the last few sections of the second part of the tutorial, specifically when talking about scaling the whole room.

Oh sorry… I have read a little too fast this last part :s

You’re doing a great job! Keep going!

Can you tell me what are the sizes of a map of zombie escape map and how to make multiple levels?

Good maps easily can pass 100 megabytes, like…

ze_pirates_port_royal_v4_1fix (5 lvls)132 MB
ze_FFVII_Mako_Reactor_v5_4 (6 lvls)175 MB

Try keep 150 Mb as limit (because source engine have some limitations).

BTW, bigger maps is not always a success. You should also remember:

  • Players don’t want to wait. If the download time is big, they just leave the server. Great servers have a FastDL, but some players don’t have, so…

  • If your map became too large, maybe you are a good mapper … or … your map was badly made.

Level changer (old style).
http://css.gamebanana.com/prefabs/6527

If map size was refering to in-Hammer sizes, the maps can be as big (or small) as wanted. Avoid touching the edges of the grid with brushwork as the map might stop compiling.

If you meant filesize, lower is better. Regarding what Gerson said, however, there are a few misconceptions:

  • Filesize doesn’t relate directly to map complexity or length, but rather custom content. Music is the worst offender, since it adds a lot of filesize (always try to recompress music to 96-160kbps depending on your maps’ size). Since the last VRAD update, model lighting data also takes a good chunk (since I believe they’ve switched to baked lightmaps on models too).
  • There is no reason for a CS:GO Mako version to be over 150mb, if it is it’s a port done mindlessly.
  • The 150MB limitation isn’t common to all source titles, only CS:GO. A 150MB .BSP file cannot be downloaded from FastDL servers if compressed. That means that a 149MB file could be compressed to be around 80MB when downloading but a 150MB map will have to be the 150MB. It’s a waste of time for the player and of bandwidth for the server.
  • Popular maps are usually badly made and can be improved upon a lot, but since people enjoy them there are few complaints and most mappers don’t care. I’ve done that in the past, because CS:S didn’t have FastDL limitations. In CS:GO, you shouldn’t let yourself be lazy.

About level systems, those relying on physics should probably avoided in CS:GO. Also remember that a map having levels doesn’t make it neither fun nor enjoyable, so think twice before going through the ‘I’m going to make a map with levels’ route. Maps are fun if they look decent enough not to be eyesores (the better they look, they more pleasing they’re to play, though) and they have tight, interesting gameplay. Levels are just a(n overused) gimmick.

You can build something different that people will enjoy more (randomized paths, objective/quest-based endings, continuous stages using CS:GO’s dynamic spawnpoints…) and will stand out for the shake of not being yet-another-map adding little to server rotations.

For the basics of level system, go here: http://z15.invisionfree.com/Kaemon/index.php?showtopic=332
There is a VMF of the dev map for the stage system of mako V6. It’s hard to understand, but i hope my explanation in this link will help you. If you want that player spawn location changes depending on the level, i cannot help you currently.

Try to don’t pollude this thread with questions don’t referring to this tutorial please. Make another topics :wink: