Applying Textures: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (added french otherlang)
m (Nesciuse moved page Applying Textures/en to Applying Textures without leaving a redirect: Move en subpage to basepage)
 
(33 intermediate revisions by 20 users not shown)
Line 1: Line 1:
__NOTOC__{{first room menu}}
{{LanguageBar}}
[[Image:hammer_texturebrowser1.jpg|thumb|left|200px|Click the '''Browse...''' button to open the Texture Browser.]]
Now, we’ll change the brick walls of our room into something more appropriate.


* Click the '''Browse...''' button in the '''Texture Bar''' on the right side of the Hammer window.
{{first room menu}}
__NOTOC__
In this section we will select [[texture]]s for the walls, floor, and ceiling.


This will open the '''Texture Browser''' so we can find the texture we want.{{clr}}
== The Texture Browser ==


[[Image:hammer_texturebrowser2.jpg|thumb|right|200px|The Texture Browser. You can change the size of the texture preview to see more textures at once.]]
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.


=== 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 brushes in your map.


Currently you might see only a few large textures, which makes things a bit tedious to browse, so we’ll need to change that.
[[File:hammer_texturebrowser1.png|thumb|none|Click the '''Browse...''' button to open the Texture Browser.]]


[[Image:texture_size.jpg|frame|caption|left|Size controls for 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.
: [[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]]


* In the lower left corner of the '''Texture Browser''' window there is a drop-down list bar called '''Size:'''. If it doesn’t say '''128x128''' already, pick that option.
== Applying textures ==


This will reduce the size of the texture samples, so that we can see more at once.{{clr}}
With a texture selected, it now has to be a applied to a brush.


<!--[[Image:hammer_texturebrowser3.jpg |thumb|right|400px| Double-click a texture to select it.]]-->
# Activate the {{hammer select}}.
* Find the texture labeled <code>brick/brickwall017b</code>. In order to make locating textures a little easier, you can type part of the desired texture name into the "Filter:" field at the bottom of the texture selection window. In this example, typing "017b" will display only the textures with "017b" in their name (only four in our case.) Double-click the desired texture, which will choose the texture for use and automatically close the browser window.
# 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 [[File:Hammer_ApplyCurrentTexture.png|28px]] from the left panel to apply the active texture to the selected brush.


The most recently selected texture is shown in the '''Texture Bar'''.{{clr}}
[[File:Hammer appliedTextureExample.png|thumb|none|<code>dev_measurewall01a</code> in action.]]


[[Image:hammer_applycurrenttexture1.jpg|thumb|right|200px|Use the '''Apply Current Texture''' icon to put textures on brushes.]]
== Adjusting textures ==


=== Applying the texture ===
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.
Now we'll apply the brick texture to one of the walls.


* Left-click one of the wall brushes inside the room to select it. It's easier to select a brush in the 3D 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:


{{note|If you select one of the walls and it selects the whole room, then you have to '''Ungroup''' the brushes. To ungroup, select the room in any view, then go to '''Tools > Ungroup'''. Now, when you go back to the 3D view you can select individual walls.}}
[[File:Hammer faceeditdialog.png|250px|thumb|right|link=Hammer Face Edit Dialog|The Face Edit Dialog]]


* To apply the texture onto the wall, click the '''Apply Current Texture''' icon from the left panel (see image).
; 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.


<!--[[Image:hammer_selectwall2.jpg|thumb|right|200px|Click in the 3D View to select the next wall piece.]]-->
Apply the same texture to the remaining three walls, and using the same process apply a dev texture to the ceiling and the floor.


Depending on how tall your walls are, the texture might look, well, ugly. Luckily, you can adjust the way the texture is "painted" onto the face! Press Shift+A, or click "Toggle texture application" in the left toolbar, just above the "Apply current texture" button. Using this editor can be a little tricky, but with some practice it will begin to make sense. Try playing with a few of the options.
{{Navbar|Creating a Room|Your First Map|Adding Point Entities}}
 
[[Category: Level Design]]
* Clicking "L", "R", or any of the options under "Justify" will automatically align the texture to the top, bottom, right, left, or center of the currently-selected face.
[[Category: Tutorials]]
* Adjusting the "Texture scale" in the upper left of this window changes the way a texture tiles on the face. For instance, if a texture is 512 units high, and your wall is only 256 units tall, you could adjust the Y texture scale to 0.50 and the texture would fit appropriately on the wall.
* You can also arbitrarily rotate and shift the texture around on the face - this is useful for applying textures to objects such as doors, control panels, lights, and other things that require precise placement. You can also push f5 to apply textures, if they don't show up.
 
The rest of the walls also need to be textured, so we'll do those next.
 
* Rotate the camera in the 3D view with the methods you [[View Navigation|learned earlier]], so that it faces another wall brush that hasn’t been textured yet.
 
* Select it and apply the current texture to it in the same manner: Left-click another wall in one of the views to select it, and then press '''Apply Current Texture''' to apply the texture to the brush.
 
* Continue applying this texture to the other two walls, so that all the four walls look the same.{{clr}}
 
[[Image:hammer_texturebrowser5.jpg |thumb|right|400px|Type text in the '''filter''' field to only show materials with that text in their name.]]
 
=== Texturing the Ceiling ===
 
Finally we will texture the ceiling so it looks more like a ceiling.
 
Click the '''Browse...''' button once again to bring up the '''Texture Browser'''.
 
If you look at the scroll bar to the right, you can see that there are a lot of textures to browse through to find just ''one'' ceiling texture, but don't worry -- most ceiling textures are called "ceiling," and the filtering capability described above can be used in this situation as well.
 
* Type in "ceiling" in the '''Filter''', as shown in the image. This will reduce the browser list to only textures with names containing the word "ceiling".
<!--[[Image:hammer_texturebrowser6.jpg|thumb|left|400px| -Double-click the ceiling texture to select it.]]-->
 
* Pick a texture from the list by double-clicking it. The texture named <code>concrete/concreteceiling002a</code> makes a good choice. The texture will be selected and the browser will close.
<!--[[Image:hammer_applycurrenttexture2.jpg|thumb|right|200px|Select the ceiling brush with the Selection Tool, then use the '''Apply Current Texture''' icon to put textures on the ceiling.]]-->
 
* Finally, click the ceiling brush in the '''3D View''' to select it, click the '''Apply Current Texture''' icon to assign the texture to the ceiling, and you're done.{{clr}}
 
If you change your mind, you can simply bring up the Texture Browser again, choose a new texture, and reapply it to a brush.
 
{{tip|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.}}
 
{{NavBar|Creating a Room|Your First Map|Adding Entities}}
 
{{otherlang:en}}
{{otherlang:en:fr|Applying Textures:fr}}
 
[[Category:Level Design Tutorials]]

Latest revision as of 04:37, 12 July 2024

English (en)Deutsch (de)Français (fr)Magyar (hu)日本語 (ja)Português do Brasil (pt-br)Русский (ru)中文 (zh)Translate (Translate)
  1. Getting Started
  2. View Navigation
  3. Basic Construction
  4. Creating a Room
  5. Applying Textures
  6. Adding Point Entities
  7. Creating Brush Entities
  8. Adding Light
  9. Adding Prop Models
  10. Saving and Compiling

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.pngTip: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.

Retrieved from "https://developer.valvesoftware.com/w/index.php?title=Applying_Textures&oldid=429182"