Left 4 Dead Graffiti Tutorial: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
mNo edit summary
m (Unicodifying, replaced: [[Image: → [[File: (4))
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{lang|{{PAGENAME}}}}
{{toc-right}}
{{toc-right}}
[[Image:l4d_graffiti_tutorial_00.jpg|thumb|right|200px|caption|Graffiti is capable of delivering compelling messages that invigorate the human spirit. This guarantees added value to the player experience.]]
[[File:l4d_graffiti_tutorial_00.jpg|thumb|right|200px|caption|Graffiti delivers compelling messages that deeply enrich the player experience.]]
{{l4ds}} Graffiti in the Left 4 Dead series is used extensively in official maps. Also known as wall writings or scrawlings, as seen in the Portal series and other Valve games, there are many ways to make graffiti. The L4D series follows a particular technique that keep them small in file size and supposedly less expensive to render. The process is simple and fun!
{{l4ds}} Graffiti in the Left 4 Dead series is used extensively in official maps. Also known as wall writings or scrawlings, as seen in the Portal series and other Valve games, there are many ways to make graffiti. The L4D series follows a particular technique that keep them small in file size and supposedly less expensive to render. The process is simple and fun!


{{note|It is assumed that you are acquainted with [[Creating a Material|material creation]]. There is more than one way to create graffiti and this article does not claim that it is the only or the best way to do so.}}
{{note|It is assumed that you are acquainted with [[Creating a Material|material creation]]. There are multiple ways to create graffiti and this article does not claim that it is the only or the best way to do so.}}


In short, the goal is to create a material with a DecalModulate shader along with a texture that has a RGB 124 126 124 background. Steps and details are as follows:
In short, the goal is to create a material with a DecalModulate shader along with a texture that has a RGB 124 126 124 background. Steps and details are as follows:
Line 10: Line 11:
#Create a transparent source image with background completely filled with color RGB 127 127 127
#Create a transparent source image with background completely filled with color RGB 127 127 127
#Save the image as TGA without alpha
#Save the image as TGA without alpha
#Convert the image to a VTF using [[vtex]] provided by the L4D1 or L4D2 Authoring Tools (this results in a background color of RGB 124 126 124)
#Convert the image to a VTF using [[Vtex (Source 1)|vtex]] provided by the L4D1 or L4D2 Authoring Tools (this results in a background color of RGB 124 126 124). This step is the main distinction in this tutorial.
#Create the accompanying VMT with <code>DecalModulate</code> shader and test
#Create the accompanying VMT with <code>DecalModulate</code> shader and test


==Creating and saving the image==
==Creating and saving the image==
[[Image:l4d_graffiti_tutorial_01.png|thumb|right|200px|caption|The source image in an image editing program, Adobe Photoshop CS5. Source image '''149_graffiti_monolith''' provided by Kev Edwards.]]
[[File:l4d_graffiti_tutorial_01.png|thumb|right|200px|caption|The source image in an image editing program, Adobe Photoshop CS5. Source image '''149_graffiti_monolith''' provided by Kev Edwards.]]
Save the image with the RGB 127 127 127 background as a TGA in the '''materialsrc''' folder found in the game directory (located alongside the sounds, materials, models, etc. folders). If the folder does not exist, please create it. 24-bit appears to give good results. There is no need for an alpha channel in the image. Unfortunately, you cannot create the VTF using [[VTFEdit]] or the VTFedit plug-in at this time. [[Vtex]] is necessary in order to generate a VTF with a background color of RGB 124 126 124.
The image should include a RGB 127 127 127 background. There is no need for an alpha channel. Save the image as a TGA (24 or 32-bit) in the '''materialsrc''' folder found in the game directory (located alongside the sounds, materials, models, etc. folders). If the folder does not exist, please create it. Unfortunately, you cannot create the VTF using [[VTFEdit]] or the VTFedit plug-in at this time. [[Vtex (Source 1)|Vtex]] is necessary in order to generate a VTF with a background color of RGB 124 126 124.
{{note|It is recommended to independently confirm the statements made in this type of article, which can be time-sensitive. For example, VTFEdit is in constant development and its features/limitations are subject to change.}}
{{note|VTFEdit is in constant development and its features/limitations are subject to change.}}
Programs other than Adobe Photoshop should give the same results. Feel free to experiment with other image editing programs, file formats, and settings.
Programs other than Adobe Photoshop should give the same results. Feel free to experiment with other image editing programs, file formats, and settings.


==Converting to VTF==
==Converting to VTF==
[[Image:l4d_graffiti_tutorial_02.png|thumb|right|200px|caption|149_graffiti_monolith.tga in the L4D2 materialsrc folder alongside a shortcut of vtex.exe, ready for converting.]]
[[File:l4d_graffiti_tutorial_02.png|thumb|right|200px|caption|149_graffiti_monolith.tga in the L4D2 materialsrc folder alongside a shortcut of vtex.exe, ready for converting.]]
The simplest process is to create a shortcut of vtex.exe and place it in the '''materialsrc''' folder. vtex is located in the '''bin''' directory of the game (for example, '''C:\Program Files (x86)\Steam\steamapps\common\left 4 dead 2\bin''').  Drag the source image, the TGA file, onto the vtex.exe shortcut. The resulting VTF will be created in the '''materials''' folder. In this tutorial, *.pwl.vtf can be disregarded.
Create a shortcut of vtex.exe and place it in the '''materialsrc''' folder. vtex is located in the '''bin''' directory of the game (for example, '''C:\Program Files (x86)\Steam\steamapps\common\left 4 dead 2\bin''').  Drag the source image (TGA file) onto the vtex.exe shortcut. The resulting VTF will be created in the '''materials''' folder. *.pwl.vtf is primarily for consoles, so that can be ignored/deleted in this case.


==Create the VMT and testing==
==Create the VMT and testing==
[[Image:l4d_graffiti_tutorial_03.png|thumb|right|200px|caption|The VMT text, resulting graffiti placed as an overlay in Hammer, and in-game result.]]
[[File:l4d_graffiti_tutorial_03.png|thumb|right|200px|caption|The VMT text, resulting graffiti placed as an overlay in Hammer, and in-game result.]]
The VMT uses the <code>DecalModulate</code> shader. The following example VMT refers to the basetexture located in the '''materials''' folder (in the '''graffiti''' subfolder), '''graffiti/graffiti_saferoom_c1_m3-4_01.vtf'''. It is the only line that should be changed within the VMT. The actual file name of the VMT is the same name as the VTF but only as a convention. In this case, the VMT file name is '''graffiti_saferoom_c1_m3-4_01.vmt'''.  
The VMT uses the <code>DecalModulate</code> shader. The following example VMT refers to the basetexture located in the '''materials''' folder (in the '''graffiti''' subfolder), '''graffiti/graffiti_saferoom_c1_m3-4_01.vtf'''. It is the only line that should be changed within the VMT. The actual file name of the VMT is the same name as the VTF but only as a convention. In this case, the VMT file name is '''graffiti_saferoom_c1_m3-4_01.vmt'''.  
<pre>
<pre>

Latest revision as of 00:21, 7 January 2024

English (en)Español (es)Translate (Translate)
Graffiti delivers compelling messages that deeply enrich the player experience.

Left 4 Dead seriesLeft 4 Dead series Graffiti in the Left 4 Dead series is used extensively in official maps. Also known as wall writings or scrawlings, as seen in the Portal series and other Valve games, there are many ways to make graffiti. The L4D series follows a particular technique that keep them small in file size and supposedly less expensive to render. The process is simple and fun!

Note.pngNote:It is assumed that you are acquainted with material creation. There are multiple ways to create graffiti and this article does not claim that it is the only or the best way to do so.

In short, the goal is to create a material with a DecalModulate shader along with a texture that has a RGB 124 126 124 background. Steps and details are as follows:

The process can be broken down into four small steps:

  1. Create a transparent source image with background completely filled with color RGB 127 127 127
  2. Save the image as TGA without alpha
  3. Convert the image to a VTF using vtex provided by the L4D1 or L4D2 Authoring Tools (this results in a background color of RGB 124 126 124). This step is the main distinction in this tutorial.
  4. Create the accompanying VMT with DecalModulate shader and test

Creating and saving the image

The source image in an image editing program, Adobe Photoshop CS5. Source image 149_graffiti_monolith provided by Kev Edwards.

The image should include a RGB 127 127 127 background. There is no need for an alpha channel. Save the image as a TGA (24 or 32-bit) in the materialsrc folder found in the game directory (located alongside the sounds, materials, models, etc. folders). If the folder does not exist, please create it. Unfortunately, you cannot create the VTF using VTFEdit or the VTFedit plug-in at this time. Vtex is necessary in order to generate a VTF with a background color of RGB 124 126 124.

Note.pngNote:VTFEdit is in constant development and its features/limitations are subject to change.

Programs other than Adobe Photoshop should give the same results. Feel free to experiment with other image editing programs, file formats, and settings.

Converting to VTF

149_graffiti_monolith.tga in the L4D2 materialsrc folder alongside a shortcut of vtex.exe, ready for converting.

Create a shortcut of vtex.exe and place it in the materialsrc folder. vtex is located in the bin directory of the game (for example, C:\Program Files (x86)\Steam\steamapps\common\left 4 dead 2\bin). Drag the source image (TGA file) onto the vtex.exe shortcut. The resulting VTF will be created in the materials folder. *.pwl.vtf is primarily for consoles, so that can be ignored/deleted in this case.

Create the VMT and testing

The VMT text, resulting graffiti placed as an overlay in Hammer, and in-game result.

The VMT uses the DecalModulate shader. The following example VMT refers to the basetexture located in the materials folder (in the graffiti subfolder), graffiti/graffiti_saferoom_c1_m3-4_01.vtf. It is the only line that should be changed within the VMT. The actual file name of the VMT is the same name as the VTF but only as a convention. In this case, the VMT file name is graffiti_saferoom_c1_m3-4_01.vmt.

DecalModulate
{
$basetexture "graffiti/graffiti_saferoom_c1_m3-4_01" //notice how the file type is not needed!
$surfaceprop default
$decal 1
$vertexcolor 1
$vertexalpha 1
}

The new material should appear in Hammer and its material browser. The graffiti should have a completely transparent background when applied as an overlay on a brush.

Troubleshooting

There are some issues that may crop up during the process that can be easily resolved:

  • Graffiti simply does not show up in the material browser or in the 3D view in Hammer
In most cases, simply re-check the basetexture path used in the VMT. It might have the incorrect path to the texture (VTF).
  • The background is not transparent as expected and appears to show the overlay border.
Make sure the background layer to the source image (TGA) is completely filled with RGB 127 127 127. The solid gray background can be lost during image resizing, for example, especially around the edges of the image.
  • The VTF converted always has a background other than RGB 124 126 124. This results in a non-transparent background in-game.
The source image should be converted using vtex provided with the authoring tools. Third-party programs appear to have difficulty achieving that specific color.

See also

External links

The Left 4 Dead Wiki - Graffiti - Gallery and captions of graffiti found in official maps