Team Fortress 2/Your First Map: Difference between revisions

Latest revision as of 02:37, 29 May 2025

In Team Fortress 2, players can enjoy a wide variety of community-made maps, including jump maps, dodgeball, MGE, trading maps, training maps, and more. Even if you're only vaguely interested in map creation, there's probably a type of map you're eager to build. This article covers the basics common to all types of maps. It’s intended for anyone launching Hammer for the first time. Whether you're using the standard Hammer editor or Hammer++, either one will work just fine.

Getting Started

The Hammer editor is packaged with TF2. Refer to Getting Started to learn how to launch the Source level editor.

Creating a Play Area and Adding a Skybox

Making a Cube

Drawing a brush.

Before we jump in, let’s talk about how the sky works in the Source engine. Many players imagine the world as a flat surface with open sky above, but Source maps are actually built inside a sealed box! What looks like the sky is really a texture applied to the ceiling. Let's recreate that now by making a cube-shaped world.

Press ⇧ Shift+B, or select the "Block Tool" in the left toolbar.
In the Top 2D view, left-click and drag from the top-left toward the bottom-right.
As you drag, you'll see a dotted outline forming a rectangle or square.
Make a 512×512 square, and make sure it’s visible in the Top, Right, and Side viewports.
Press ↵ Enter to create the brush you've drawn.

Note:Hold Space and drag to move the 2D camera view.

Making It Hollow

Make it empty.

Now let's hollow it out.

Click the Selection Tool or press Esc to return to selection mode.
Right-click the "x" in the center of your cube to select it. Left-click again and choose Make Hollow. Set thickness to 16 units.

This will create inner walls, forming a playable hollow space.

Note:You don’t have to use Make Hollow. You can also build the walls, floor, and ceiling manually with the Block Tool.

Navigating the 3D Camera Viewport

3D navigation differs slightly from the 2D views:

Hold Space and left-click + drag to rotate the camera.
Hold Space and right-click + drag to move up/down and left/right.
Hold Space, left + right-click + drag to move forward/backward.
Use W, A, S, and D to move like in-game (forward, back, strafe left/right).
Press Z in the 3D viewport to toggle "mouse look" mode, allowing free camera rotation with your mouse.

Note:You can combine WASD movement with Space navigation for more control.

Applying a Skybox Texture

tools/toolsskybox

Let’s apply the sky texture.

Move your 3D camera inside the cube.
Press ⇧ Shift+A to activate the Texture Application Tool.
Click a face inside the cube.
In the Face Edit Sheet, click Browse...

Search for tools/toolsskybox. Typing "tools" in the filter can help narrow it down.

Once selected, apply it to the ceiling (or whichever surface you want to act as the sky). You can also set it as the current texture to use it more easily later.

Any face with the toolsskybox texture will appear as sky in-game.

Adding a Player Spawn Point

Let’s add a spawn point so we can enter the map.

Select the Entity Tool using ⇧ Shift+E or from the Tool Bar.
Click in the center of your cube to place the entity.

The Grid

All 2D views use a grid. Objects snap to the grid by default, which helps avoid bugs like leaks. It's best to leave this setting on.

The default grid size is 64 units. This value is shown in the status bar at the bottom of the Hammer window.

Click the Smaller Grid icon or press [ to reduce the grid size for precision.
Click the Larger Grid icon or press ] to increase the grid size for faster layout.

To reduce the grid to 16 units, press [ twice. Confirm it says Grid: 16 in the bottom-right of the Hammer window.

Back to the Spawn Entity

Now, select the entity using the Selection Tool.

Note:Entities have a small x near their base—click there to select them.

Let’s configure it.

Press Alt+↵ Enter, or right-click the entity and choose Properties.

Change the class name to info_player_teamspawn.

Compiling and Running the Map

Once your map is ready, press F9 to compile it.

To test it, move the compiled BSP file to: [your Steam Directory]\steamapps\common\Team Fortress 2\tf\maps

Then launch TF2, click "Create Server", and find your map in the list.

And there you have it—your first map!

Team Fortress 2 Mapping

← Your First Map

Building Respawn Room →

@@ Line 1: / Line 1: @@
-{{DISPLAYTITLE:Your First Map}}{{TF2 topicon}}{{source topicon}}[[Category:Hammer]][[Category:Level Design]][[Category:Team Fortress 2|Your first map]]
+{{LanguageBar}}
-<!--I quoted a lot from "Level Design Introduction/Your First Level (Portal 2)".-->
+{{DISPLAYTITLE:Your First Map}}
-In {{tf2|4}}, players can play lot of community maps, such as jump, dodgeball, MGE, trading maps, training maps, etc. Even if you are just vaguely trying to do map making, there will be a type of map you want to make. This article will cover common needs across various maps. Anyone running the Hammer editor for the first time is the intended audience for this article. Whether you use Hammer or Hammer++, either is fine.
-== Getting started ==
+{{TF2 topicon}}{{source topicon}}[[Category:Hammer]][[Category:Level Design]][[Category:Team Fortress 2|Your first map]]
-Hammer editor is built in TF2. Refer to [[Getting Started]] for running Hammer editor.
+<!--Quoted a lot from "Level Design Introduction/Your First Level (Portal 2)".-->
-== Create main stage and applying a skybox ==
+In {{tf2|4}}, players can enjoy a wide variety of community-made maps, including jump maps, dodgeball, MGE, trading maps, training maps, and more. Even if you're only vaguely interested in map creation, there's probably a type of map you're eager to build. This article covers the basics common to all types of maps. It’s intended for anyone launching {{Hammer|2}} for the first time. Whether you're using the standard Hammer editor or {{Hammer++|2}}, either one will work just fine.
-=== Make Cube ===
+== Getting Started ==
+The Hammer editor is packaged with TF2. Refer to [[Getting Started]] to learn how to launch the Source level editor.
+== Creating a Play Area and Adding a Skybox ==
+=== Making a Cube ===
 [[File:l4d_hammer_brush_01.jpg|thumb|right|300px|caption|Drawing a brush.]]
-Before dealing with this topic, We need to think about what a sky is in the Source engine. Many Source engine game users imagine a world is a flat platform and there is an open space above it. However, that is false! Source engine maps are in a box. When players see a wallpaper with a picture of the sky on it, they think it's the sky. Now let's implement this. Let's create a cube-shaped world.
+Before we jump in, let’s talk about how the sky works in the Source engine. Many players imagine the world as a flat surface with open sky above, but Source maps are actually built inside a sealed box! What looks like the sky is really a texture applied to the ceiling. Let's recreate that now by making a cube-shaped world.
+# Press {{key|Shift}}+{{key|B}}, or select the [[File:Hammer block.png]] "Block Tool" in the left toolbar.
+# In the '''Top''' 2D view, left-click and drag from the top-left toward the bottom-right.
+# As you drag, you'll see a dotted outline forming a rectangle or square.
+# Make a 512×512 square, and make sure it’s visible in the '''Top''', '''Right''', and '''Side''' viewports.
+# Press {{key|Enter}} to create the brush you've drawn.
-# With hitting {{key|Shift}}+{{key|B}} or selecting [[File:Hammer block.png]] "Block tool" in left tool bar.
+{{note|Hold {{key|Space}} and drag to move the 2D camera view.}}
-# Left-click and drag in the '''Top''' 2D view in a movement that is ''Right'' and ''Downward'' as shown below.
-# You should see a dotted outline of a rectangle or square as you drag.
-# Create a square 512x512 units and let go of the left-mouse button. Please make the 512x512 square visible not only at '''Top''' but also at '''Right''' and '''Downward'''.
-# Press {{key|Enter}} on your keyboard to create this brush that you've just drawn.
-{{note|space and drag can move 2D camera view}}
+{{clr}}
-{{clr}}
+=== Making It Hollow ===
+[[File:Hammer make hollow.png|thumb|right|400px|caption|Make it empty.]]
-=== Dig It! ===
+Now let's hollow it out.
-[[File:Hammer make hollow.png|thumb|right|400px|caption|make it empty.]]
-Now it's time to dig inside.
-# To go back to selection mode, click on the [[File:Hammer select.png]] '''Selection tool''' icon on the '''Tool''' bar or press the {{key|Esc}} key.
+# Click the [[File:Hammer select.png]] '''Selection Tool''' or press {{key|Esc}} to return to selection mode.
-# Right-click the "x" in the center of the square to select it. Left click, then choose '''Make Hollow'''. Set the thickness to 16.
+# Right-click the "x" in the center of your cube to select it. Left-click again and choose '''Make Hollow'''. Set thickness to 16 units.
-A new cube is created inside the cube.
+This will create inner walls, forming a playable hollow space.
-{{note|There is no need to blindly use '''make hollow'''. You can also build the walls, floor, and ceiling one by one using '''Block Tool'''.}}
+{{note|You don’t have to use '''Make Hollow'''. You can also build the walls, floor, and ceiling manually with the '''Block Tool'''.}}
 {{clr}}
-=== Navigating in the 3D Camera viewport ===
+=== Navigating the 3D Camera Viewport ===
+D navigation differs slightly from the 2D views:
-Moving around in 3D is a bit different from the 2D viewports:
-* Hold down {{key|Space}} and left-click and drag to '''rotate''' the camera.
-* Hold down {{key|Space}} and right-click and drag to move '''up/down''' and '''left/right'''.
-* Hold down {{key|Space}} and both right and left-click and drag to move '''forward''' and '''backward'''.
-* You can also use {{key|W}}, {{key|A}}, {{key|S}}, and {{key|D}} to move '''forward''', '''backward''', '''strafe left''' and '''strafe right''' respectively.
-* The {{key|Z}} key toggles on and off "mouse look" mode. Move your mouse cursor over the 3D Camera viewport and press the {{key|Z}} key. You can now move your mouse around as if mouse look was on in the game.
-{{note|The {{key|W}} {{key|A}} {{key|S}} {{key|D}} keys can be used in combination with the {{key|Space}} navigation}}
+* Hold {{key|Space}} and left-click + drag to '''rotate''' the camera.
+* Hold {{key|Space}} and right-click + drag to move '''up/down''' and '''left/right'''.
+* Hold {{key|Space}}, left + right-click + drag to move '''forward/backward'''.
+* Use {{key|W}}, {{key|A}}, {{key|S}}, and {{key|D}} to move like in-game (forward, back, strafe left/right).
+* Press {{key|Z}} in the 3D viewport to toggle "mouse look" mode, allowing free camera rotation with your mouse.
+{{note|You can combine {{key|W}}{{key|A}}{{key|S}}{{key|D}} movement with {{key|Space}} navigation for more control.}}
 {{clr}}
+=== Applying a Skybox Texture ===
-=== Apply Skybox ===
 [[File:Hammer face sheet.png|left|300px]]
 [[File:Hammer Texture search.png|right|thumb|700px|caption|tools/toolsskybox]]
-Now we will put on the skybox.
+Let’s apply the sky texture.
-# Move the camera view into the cube.
+# Move your 3D camera inside the cube.
-# Select Toggle Texture application with {{key|Shift}}+{{key|A}}
+# Press {{key|Shift}}+{{key|A}} to activate the Texture Application Tool.
-# Select face of the cube inside.
+# Click a face inside the cube.
-# In face edit sheet, click browse.
+# In the Face Edit Sheet, click '''Browse...'''
+Search for {{code|tools/toolsskybox}}. Typing "tools" in the filter can help narrow it down.
-Search {{code|tools/toolsskybox}}. You can find it more easily by typing '''tools''' in the filter field.
+Once selected, apply it to the ceiling (or whichever surface you want to act as the sky). You can also set it as the current texture to use it more easily later.
-Once you have selected the skybox, apply it to the surface you want to apply it to. Using '''current texture''' will make your work easier.
+Any face with the {{code|toolsskybox}} texture will appear as sky in-game.
-The side to which {{code|toolsskybox}} is applied becomes the sky.
 {{clr}}
-== Make starting locate ==
+== Adding a Player Spawn Point ==
+Let’s add a spawn point so we can enter the map.
-Now let's go into the game. Game require an entity to spawn players.
+# Select the [[File:Hammer entity.png]] '''Entity Tool''' using {{key|Shift}}+{{key|E}} or from the '''Tool''' Bar.
+# Click in the center of your cube to place the entity.
-# Select the [[File:Hammer entity.png]] '''Entity Tool''' with hitting {{key|Shift}}+{{key|E}} or selecting on the '''Tool''' Bar.
+=== The Grid ===
-# Stand it on center of square.
+All 2D views use a grid. Objects snap to the grid by default, which helps avoid bugs like [[leak]]s. It's best to leave this setting on.
-=== What is grid: entity man is floating ===
+The default grid size is 64 units. This value is shown in the status bar at the bottom of the Hammer window.
-{{note|This topic is just for fun. entity man must not contact with any [[brush]]!!}}
-But there's a problem!
+* Click the '''Smaller Grid''' icon [[File:hammer_SmallerGrid.png]] or press {{key|[}} to reduce the grid size for precision.
+* Click the '''Larger Grid''' icon [[File:hammer_LargerGrid.png]] or press {{key|]}} to increase the grid size for faster layout.
-[[File:Hammer entity float on the air.png|caption|The entity man is floating because the grid and the floor do not match.]]
+To reduce the grid to 16 units, press {{key|[}} twice. Confirm it says '''Grid: 16''' in the bottom-right of the Hammer window.
-He floats about half a space. There's nothing wrong with floating, but I'd really like to get this cool guy just on the ground. {{clr}}
+=== Back to the Spawn Entity ===
-But the grid gets in the way. Below is how to manipulate the grid:
+Now, select the entity using the Selection Tool.
-=== The grid ===
-A grid is displayed in all the 2D views. By default, all objects snap to the grid. Although you can turn this off, it is considered good practice to leave it on because it prevents leaks and other errors in your map.
-The default grid size is 64 units, which means that each line is 64 units apart. The current size of the grid is displayed in the status bar at the bottom of the Hammer window.
+{{note|Entities have a small '''x''' near their base—click there to select them.}}
-* Clicking the '''Smaller Grid''' icon [[File:hammer_SmallerGrid.png]] will make the grid half as big, for finer adjustments. You can also decrease the grid size with the {{key|[}} key
+[[File:Hammer obj properties.png|500px|caption|Select {{code|info_player_teamspawn}}]]{{clr}}
-* Clicking the '''Larger Grid''' icon [[File:hammer_LargerGrid.png]] will make the grid twice as big, for larger adjustments. You can also increase the grid size with the {{key|]}} key.
-To bring the grid size down to 16 units, press the {{key|[}} key twice. Look at the '''Status bar''' at the bottom right of the Hammer window and make sure it reads '''Grid: 16'''. If it doesn't, press {{key|[}} or {{key|]}} until is does.
+Let’s configure it.
+Press {{key|Alt}}+{{key|Enter}}, or right-click the entity and choose '''Properties'''.
-Using the grid, correct him.
+Change the class name to {{code|info_player_teamspawn}}.
-[[File:Hammer entity on the ground.png|caption|Entity man: Thanky You! It fits perfectly. ]]
+== Compiling and Running the Map ==
+Once your map is ready, press F9 to compile it.
-Now put him back in his place.
+To test it, move the compiled BSP file to:
-{{note|This topic is just for fun. entity man must not contact with any [[brush]]!!}}
+{{code|[your Steam Directory]\steamapps\common\Team Fortress 2\tf\maps}}
-=== Going back to the main topic ===
+Then launch TF2, click "Create Server", and find your map in the list.
-Select the entity using selection tool.
-{{note|Entities also have an '''x''' slightly below their waist. Click there to select it.}}
-[[File:Hammer obj properties.png|500px|caption|select {{code|info_player_teamspawn}}]]{{clr}}
-Now it's time to set his properties.
-Right click and enter '''properties'''.
-Change class to {{code|info_player_teamspawn}}.
-== Compile and Run ==
-When everything is ready and finalized, press F9 to compile.
-If you want to play, move bsp file on {{code|~\Program Files (x86)\Steam\steamapps\common\Team Fortress 2\tf\maps}}
-Then in tf2 client, click create server and search Your map to start.
+[[File:Skybox demostrare1.jpg|700px]]
-[[File:Skybox demostrare1.jpg|700px]]
+And there you have it—your first map!
-As you can see, We did well.
+{{navbar2|Team Fortress 2/Your First Map|Your First Map|Team Fortress 2 Mapping tutorial|Team Fortress 2 Mapping|Team Fortress 2/Building Respawn Room|Building Respawn Room}}