Difference between revisions of "Applying Textures"

From Valve Developer Community
Jump to: navigation, search
(Applying Textures)
m (added language (hu))
 
(59 intermediate revisions by 28 users not shown)
Line 1: Line 1:
[[Category:Level Design]][[Category:Tutorials]]
+
__NOTOC__{{otherlang2
Now we'll change the brick walls of our room into something more appropriate.
+
| ru = Applying Textures:ru
 +
| fr = Applying Textures:fr
 +
| zh-cn = Applying Textures:zh-cn
 +
| hu = Applying Textures:hu
 +
}} {{first room menu}}
  
=Applying Textures=
+
In this section we will select [[texture]]s for the walls, floor, and ceiling.
  
Click the '''Browse''' button in the '''Texture Bar''' on the right side of the Hammer window.
+
== The Texture Browser ==
  
This will open the '''Texture Browser'''.
+
The '''[[Hammer_Texture_Browser|Texture Browser]]''' is used to view and select textures (or more accurately [[materials]]) that you want to apply to [[brush]]es in your map. The active texture is displayed in a box on the right side of the Hammer interface.
  
[[Image:hammer_texturebrowser1.jpg | Click the Browse button to open the Texture Browser.]]
+
To open the texture browser, click the '''Browse...''' button in the Texture group on the right side of the Hammer interface:
  
The '''Texture Browser''' lets you view and select textures to apply to objects in your map.
+
[[Image:hammer_texturebrowser1.png|thumb|none|Click the '''Browse...''' button to open the Texture Browser.]]
  
Pick '''128x128''' from the '''Size''' drop-down list at the bottom-left of the '''Texture Browser''' window, if it's not already selected.
+
; Thumbnail size
 +
: To ease the browsing of textures, you may wish to adjust the textures’ preview size: in the lower left corner of the texture browser window, select “128×128” from the “Size” drop-down menu. This will reduce the size of the texture samples, so that we can see more at once.
 +
: [[File:Hammer texturebrowserSize.png|frame|none|Changing thumbnail size.]]
 +
; Filtering the gallery
 +
: In most games the texture browser hosts thousands of items. Navigating to the exact texture you want to use would be problematic were it not for [[Hammer Texture Browser#Filter|filtering]].  This feature allows you to search for parts of file names. You can use spaces to split your filter in multiple terms, such as “concrete wall”, “plaster ceiling”, or “metal door” (don’t include the quote marks).
 +
: To show the entire list of textures again, open the Texture Browser, select the text in the filter field and press {{key|Backspace}} or {{key|Delete}} to delete it.
 +
; Dev Textures
 +
: Source comes with a number of textures specifically designed to help you create brushes in proportion to the player. They are called “dev textures”, for “development”, and can be found by filtering for “dev”.
 +
:
 +
Find and double-click <code>dev/dev_measurewall01a</code>.
 +
[[File:Devbrowser.PNG‎|frame|none|Selecting the dev_measurewall1101a texture]]
  
This will reduce the size of the texture samples, so we can see more at once.
+
== Applying textures ==
  
[[Image:hammer_texturebrowser2.jpg | You can change the size of the texture preview to make it easier to see more textures at once.]]
+
With a texture selected, it now has to be a applied to a brush.
  
Double-click the wall texture shown in the image (<code>brick/brickwall017b</code>).
+
# Activate the {{hammer select}}.
 +
# Highlight the wall you wish to texture by clicking on it in the Camera view. If you select one of the walls and it selects the whole room, either change the upper-right “Select” setting from “Groups” to “Objects”, or [[Hammer Tools Menu#Group and Ungroup .3CCtrl.2BG.3E and .3CCtrl.2BU.3E|Ungroup]] the brushes.
 +
# Click the '''[[Hammer Map Tools Toolbar#Apply Current Texture|Apply Current Texture]]''' button [[Image:Hammer_ApplyCurrentTexture.png|28px]] from the left panel to apply the active texture to the selected brush.
  
This will select the texture for use, and close the '''Texture Browser'''.
+
[[File:Hammer appliedTextureExample.png|thumb|none|<code>dev_measurewall01a</code> in action.]]
  
[[Image:hammer_texturebrowser3.jpg | Double-click a texture to select it.]]
+
== Adjusting textures ==
  
In the '''3D View''', left-click one of the walls of the hollow room. This will select it, turning it red like in this image.
+
A newly-applied texture may not fit properly on a brush. Using the [[Hammer Map Tools Toolbar#Toggle Texture Application|Toggle Texture Application tool]] [[File:Hammer_ToggleTextureApplication.png|28px]], you can adjust it so that it does.
  
'''Note:''' If the camera view is showing a wireframe image (like this) instead of solid textures like in the image on the right, go the '''View''' menu and choose 3D Textured Polygons to switch to the textured view.
+
Because the dimensions of our wall are both powers of two (1024 and 512), every texture will fit evenly. However, we can still see some changes by altering the settings in the [[Hammer Face Edit Dialog|Face Edit Dialog.]] that has appeared:
  
[[Image:hammer_selectwall1.jpg | Click a brush in the 3D View to select it.]]
+
[[File:Hammer faceeditdialog.png|250px|thumb|right|link=Hammer Face Edit Dialog|The Face Edit Dialog]]
  
Click the '''Apply Current Texture''' icon from the panel on the left side of the Hammer window.
+
; Texture Scale
 +
: Adjusts the size of the texture. A value of “1” maps one texture pixel onto one [[unit]]. Negative numbers mirror the texture.
 +
; Texture Shift
 +
: Moves the texture along the X or Y axis. Positive numbers move the texture left (X axis) and down (Y axis). Negative numbers move the texture right (X axis) and up (Y axis).
 +
; Current Texture
 +
: Changes the applied texture on the surface. {{tip|With the face edit sheet open you can right-click on any surface to apply the current texture to it. [[Hammer Face Edit Dialog#”Right-Click” Texture Application|More details here.]]}}
 +
; Lightmap Scale
 +
: Affects how light effects apply to the surface. Smaller numbers are higher resolution and produce more expensive lighting effects. Larger numbers are lower resolution and produce cheaper lighting effects. See also [[Lightmap]].
 +
; Rotation
 +
: Rotates the texture on the brush face.
 +
; Justify
 +
: Snaps the texture’s position to a specified position on the wall. '''L'''eft, '''R'''ight, '''T'''op, '''B'''ottom and '''C'''enter. Finally, “Fit” squashes the entire texture onto the surface.
 +
: Checking the “Treat as one” box will make Hammer consider all selected faces as one continuous item. This is useful when fitting a texture across multiple surfaces.
 +
; Align
 +
: Specifies how the texture is projected onto the face. [[Texture alignment#World Alignment|World alignment]] applies textures along the global x, y, or z axis. [[Texture alignment#Face Alignment|Face alignment]] applies the texture directly onto the face no matter which way it faces.
 +
; Mode
 +
: Allows you to select what will happen when you click on a brush face with the left mouse button.
  
Clicking this button applies the texture we picked in the '''Texture Browser''' to the current selection.
+
Apply the same texture to the remaining three walls, and using the same process apply a dev texture to the ceiling and the floor.
  
[[Image:hammer_applycurrenttexture1.jpg | Use the Apply Current Texture icon to put textures on brushes.]]
+
{{Navbar|Creating a Room|Your First Map|Adding Point Entities}}
  
Select the next wall brush by left-clicking it in the '''3D View''', then click the '''Apply Current Texture''' button to assign the wall texture to it, too.
+
[[Category:Level Design Tutorials]]
 
 
[[Image:hammer_selectwall2.jpg | Click in the 3D View to select the next wall piece.]]
 
 
 
You'll now need to move the camera to be able to apply the wall texture to the other two walls of the room.
 
 
 
You can move the camera using the '''Camera Tool''' like you learned earlier, or you can use another method, called "freelook" mode.
 
 
 
To enter freelook mode, press the "Z" key. The mouse now controls the direction of the camera — move the mouse left and right to change the direction. Press the "W" key to move the camera forward, and the "S" key to move the camera backward. Press the "Z" key again to exit freelook mode.
 
 
 
[[Image:hammer_pickcamera.jpg | Use the Apply Current Texture icon to put textures on the selection.]]
 
 
 
Move the camera so that it faces the walls that haven't been textured yet.
 
 
 
Select each of the walls with the Selection Tool, and use the Apply Current Texture icon to assign the wall texture, just like the other two walls.
 
 
 
[[Image:hammer_selectwall3.jpg | Use freelook mode to change the camera viewpoint, the switch back the Selection Tool and select the wall.
 
]]
 
 
 
Now we'll texture the ceiling, so it looks more like a ceiling.
 
 
 
Click the '''Browse''' button the bring up the '''Texture Browser''' again.
 
 
 
[[Image:hammer_texturebrowser4.jpg | Click Browse to bring up the Texture Browser again.]]
 
 
 
In the text box next to where it says '''"Filter:"''', type in "ceiling", as shown in the image.
 
 
 
This will filter the list of textures so that only textures with "ceiling" in their name will be shown in the '''Texture Browser''' window.
 
 
 
[[Image:hammer_texturebrowser5.jpg | Type in a text to only show materials with that text in their name.]]
 
 
 
Double click the texture called <code>"concrete\concreteceiling02a"</code>, as shown in this image. The texture will be selected and the browser will close.
 
 
 
[[Image:hammer_texturebrowser4.jpg | Double-click the ceiling texture to select it.]]
 
 
 
Now, click the ceiling in the '''3D View''' to select it.
 
 
 
Next, click the '''Apply Current Texture''' icon the assign the texture to the ceiling.
 
 
 
[[Image:hammer_applycurrenttexture2.jpg | Select the ceiling with the Selection Tool, then use the Apply Current Texture icon to put textures on the ceiling.]]
 
 
 
Now onto [[Adding Entities]]!
 

Latest revision as of 21:53, 27 May 2012

Français Magyar Русский 简体中文

In this section we will select textures for the walls, floor, and ceiling.

The Texture Browser

The Texture Browser is used to view and select textures (or more accurately materials) that you want to apply to brushes in your map. The active texture is displayed in a box on the right side of the Hammer interface.

To open the texture browser, click the Browse... button in the Texture group on the right side of the Hammer interface:

Click the Browse... button to open the Texture Browser.
Thumbnail size
To ease the browsing of textures, you may wish to adjust the textures’ preview size: in the lower left corner of the texture browser window, select “128×128” from the “Size” drop-down menu. This will reduce the size of the texture samples, so that we can see more at once.
Changing thumbnail size.
Filtering the gallery
In most games the texture browser hosts thousands of items. Navigating to the exact texture you want to use would be problematic were it not for filtering. This feature allows you to search for parts of file names. You can use spaces to split your filter in multiple terms, such as “concrete wall”, “plaster ceiling”, or “metal door” (don’t include the quote marks).
To show the entire list of textures again, open the Texture Browser, select the text in the filter field and press ← Backspace or Delete to delete it.
Dev Textures
Source comes with a number of textures specifically designed to help you create brushes in proportion to the player. They are called “dev textures”, for “development”, and can be found by filtering for “dev”.

Find and double-click dev/dev_measurewall01a.

Selecting the dev_measurewall1101a texture

Applying textures

With a texture selected, it now has to be a applied to a brush.

  1. Activate the Selection tool Hammer select.png.
  2. Highlight the wall you wish to texture by clicking on it in the Camera view. If you select one of the walls and it selects the whole room, either change the upper-right “Select” setting from “Groups” to “Objects”, or Ungroup the brushes.
  3. Click the Apply Current Texture button Hammer ApplyCurrentTexture.png from the left panel to apply the active texture to the selected brush.
dev_measurewall01a in action.

Adjusting textures

A newly-applied texture may not fit properly on a brush. Using the Toggle Texture Application tool Hammer ToggleTextureApplication.png, you can adjust it so that it does.

Because the dimensions of our wall are both powers of two (1024 and 512), every texture will fit evenly. However, we can still see some changes by altering the settings in the Face Edit Dialog. that has appeared:

The Face Edit Dialog
Texture Scale
Adjusts the size of the texture. A value of “1” maps one texture pixel onto one unit. Negative numbers mirror the texture.
Texture Shift
Moves the texture along the X or Y axis. Positive numbers move the texture left (X axis) and down (Y axis). Negative numbers move the texture right (X axis) and up (Y axis).
Current Texture
Changes the applied texture on the surface.
Tip:With the face edit sheet open you can right-click on any surface to apply the current texture to it. More details here.
Lightmap Scale
Affects how light effects apply to the surface. Smaller numbers are higher resolution and produce more expensive lighting effects. Larger numbers are lower resolution and produce cheaper lighting effects. See also Lightmap.
Rotation
Rotates the texture on the brush face.
Justify
Snaps the texture’s position to a specified position on the wall. Left, Right, Top, Bottom and Center. Finally, “Fit” squashes the entire texture onto the surface.
Checking the “Treat as one” box will make Hammer consider all selected faces as one continuous item. This is useful when fitting a texture across multiple surfaces.
Align
Specifies how the texture is projected onto the face. World alignment applies textures along the global x, y, or z axis. Face alignment applies the texture directly onto the face no matter which way it faces.
Mode
Allows you to select what will happen when you click on a brush face with the left mouse button.

Apply the same texture to the remaining three walls, and using the same process apply a dev texture to the ceiling and the floor.



Your First Map
Creating a Room
Adding Point Entities