-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathalpha-channel.html
211 lines (206 loc) · 16 KB
/
alpha-channel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<title>UnrealWiki: Alpha Channel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen, print"
href="shared/stylebase.structural.css">
<link rel="stylesheet" type="text/css" media="screen"
href="shared/template-default.css">
<link rel="stylesheet" type="text/css" media="screen"
href="shared/styles.chblue.css">
<link rel="stylesheet" type="text/css" media="print"
href="shared/template-default-print.css">
<!--[if IE 6]>
<style>
/* dirty hack for IE6. */
#quickbar {
position: absolute;
}
</style>
<![endif]-->
<link rel="start" href="http://wiki.beyondunreal.com/">
<link rel="glossary" href="http://wiki.beyondunreal.com/wiki/Terminology">
<link rel="help" href="http://wiki.beyondunreal.com/wiki/Using_The_Wiki">
<script type="text/javascript" src="shared/dhtml.js"></script>
<script type="text/javascript" src="shared/dhtml-menu.js"></script>
<style type="text/css">#dhtml-menu { background: #eee; padding: 5px 0px; margin-right: -20px; border: 1px solid #888; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #888; border-bottom: 1px solid #888 }
#dhtml-menu td { color: #000; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; line-height: 13pt; padding: 1px 10px; cursor: default }
#dhtml-menu a { color: #000; font-family: Arial,Helvetica,sans-serif; font-size: 9pt; line-height: 13pt; text-decoration: none }
#dhtml-menu tt { font-family: monospace; font-size: 9pt }
#dhtml-menu-separator { height: 1px; background: red }
#dhtml-menu-anchor { cursor: default }
</style>
<script type="text/javascript" src="shared/expandable.js"></script>
</head>
<body onLoad="menuInit(); document.cookie='page=Alpha_Channel; path=/'" class="default">
<div id="scrolling"><!-- contains all except the fixed sidebar -->
<div id="topbar" class="bar">
<div class="righthalf">
<form class="inline" method="post" action="/wiki" enctype="application/x-www-form-urlencoded"><input type="text" name="search" size="20" /> <input type="submit" name="search" value="search" /></form>
</div>
<div class="lefthalf">
<script type="text/javascript"><!--
menuAlignRight = false;
//--></script>
<span><script type="text/javascript"><!--
menuWriteAnchor("Quick Navigation") //--></script></span> | <a href="(start).html">Home Page</a> | <a href="recent-changes.html">Recent Changes</a> | <a href="http://wiki.beyondunreal.com/wiki?action=editprefs">Preferences</a>
</div>
</div>
<div id="content"><!-- contains the title and article -->
<h1 class='pagetitle'><a href="http://wiki.beyondunreal.com/wiki?back=Alpha Channel">Alpha Channel</a></h1>
<div class="wiki"><p>An <em class="em2">alpha channel</em>, also sometimes called a mask, controls the transparency of an image. In programs like Lightwave and 3D Studio, the image and its alpha channel can be separate image files, but most image formats store the alpha channel information within the main image file. For <a href="texture-import-and-export.html">importing to UnrealEd</a>, it's best to use 32 bit <span class="interwiki"><img
alt="Wikipedia logo"
title="Wikipedia"
src="shared//InterWiki-Wikipedia.png"> <a href="http://www.wikipedia.com/wiki/TGA">TGA</a></span> (Targa) files.</p>
<p>Alpha channels use black for transparent areas, and white for opaque areas. Files that are only black and white are sometimes called masks. An example might be an image of a tree where the trunk, branches, and leaves are visible but everything else is "invisible" or transparent.</p>
<p>They can also be used to make gradual shifts in transparency such as with the simulated glow of coronas and particles. Since black is transparent, a dark grey (eg, RGB 10,10,10) is mostly transparent but not completely.</p>
<p>Alpha channels are used to simulate 3D geometry without increasing the number of physical polygons. For example, a picket fence would require modeling individual boards and nails while an alpha channel image fence would simply contain and image of a fence and its alpha channel; transparent areas around the top and between individual fence boards.</p>
<h2><a name="0.1"></a>About the .TGA file format</h2>
<ul><li>It is designed for high quality, raster images.</li>
<li>They can be very large files because 1 byte is used for each color .</li>
<li>TGAs support greyscale transparency, and so store the mask within the TGA.</li>
<li>A TGA with an alpha channel (transparency information) are typically 32 bit files.</li>
<li>TGA files can be run length encoded to save space; RLE compression is directly proportional to the complexity of the image. "Noisy" images don't compress well, while bands of the same color do compress well.</li>
<li>TGAs are sometimes called Targas or Targavision, or Truevision Targa.</li>
</ul>
<p>see <span class="interwiki"><img
alt="Wikipedia logo"
title="Wikipedia"
src="shared//InterWiki-Wikipedia.png"> <a href="http://www.wikipedia.com/wiki/TGA">TGA</a></span> for more in-depth information.</p>
<h2><a name="0.2"></a>Adding An Alpha Channel to an Image </h2>
<h3><a name="0.2.1"></a>Adobe Photoshop </h3>
<ol><li>Using the various laso tools, magic wand and the pen tool make your selection. If you don't already know how great the pen tool can be for making your selections try this <a href="http://www.gurusnetwork.com/tutorials/photoshop/pen1intro.html">[tutorial]</a>.</li>
<li>Go to the channels tab (next where the layers tab is usualy). </li>
<li>Press the button "Save selection as channel" and a channel named Alpha1 should appear. </li>
<li>N ow check if what you want to be visible is white. If it's the opposite, click on the Alpha1 channel (should be under the blue) deselect (Ctrl+D) and invert (Ctrl+I). There you have it!</li>
</ol>
<p><em class="em2">Note:</em> that in Photoshop 7.0 there is a bug that makes it imposible to save alpha channels in Targas. To fix this either update to 7.01 or download a small fix for the Adobe web site.</p>
<p><a href="http://www.adobe.com/support/downloads/detail.jsp?ftpID=1544">http://www.adobe.com/support/downloads/detail.jsp?ftpID=1544</a></p>
<p>Make sure you follow the instructions given there.</p>
<p>Also if you're using Photoshop you can save textures with alpha channels in <a href="dxt.html">DXT</a>3 format. It only has a 4-bit alpha, instead of the 8-bit TGA alpha channel, but compression with DXT is much better and in most cases quality isn't much of an issue with alpha channels.</p>
<h3><a name="0.2.2"></a>Paint Shop Pro </h3>
<ol><li>Do Main menu→Selections→Select All, and press CTRL-C to copy the image to the clipboard.</li>
<li>Press CTRL-V to paste it as a new image (you will be working on the cloned image first).</li>
<li>Select the parts of the image you want to make transparent. The Wand selection tool is useful for this. Hold down the shift key to select multiple parts of the image.</li>
<li>Take your floodfill tool and select a dark colour (the darker the colour, the more transparent the pixel will be). Floodfill within the selected areas.</li>
<li>In the menu, do Selections→Invert. This will invert your selection.</li>
<li>Whatever you <em class="em1">do not</em> want transparent is now selected. Take your floodfill tool and select a light colour (the lighter the colour, the less transparent the pixel will be). Floodfill within the selected areas.</li>
<li>In the menu, do 'Layers→Load/Save Mask→Save Mask to Disk'. Type in a filename and hit Save.</li>
<li>In the menu, click on 'Selections→Select None' to deselect everything.</li>
<li>Reopen your original image.</li>
<li>In the menu, click on 'Selections→Select All'.</li>
<li>In the menu, click on 'Layers→Load/Save Mask→Load Mask from Disk'and look in the menu bar at the top of screen for Mask. Select Mask→New→From Image. In this dialogue box, for the source window, the pulldown box, 'blank' and select your masked texture's filename, and press ok.</li>
<li>Select Masks→Save to Alpha channel from the menu. Just agree with the next two windows (hit 'OK'), and save your new masked image. Make sure you choose .TGA file format (it will be listed as Truevision TARGA (.TGA)).</li>
</ol>
<p><em class="em2">DJPaul:</em> Did some more work on this. Fell through when I released the Beta 8 of PSP menu-wise is much different from PSP7, so i'm stuck. Plus my art sk1lls about suitable for MS Paint. I will try find someone who knows to finish it.</p>
<h3><a name="0.2.3"></a>The GIMP</h3>
<ol><li>Select the parts of the image you want to be visible. (Or select what you want to be transparent, and do Select→Invert.)</li>
<li>Do Layer→Mask→Add Layer Mask<ol><li>In the dialog, set Initialize Layer Mark to 'Selection'</li>
</ol>
</li>
<li>You can make further changes by painting directly on the layer mask. The layermask is just a grayscale image; black means fully transparent and white fully opaque.</li>
<li>The new mask is selected in the layer list. Before you save, click on the original layer to select it. (Otherwise, saving will only export the grayscale mask.)</li>
<li>When saving as TGA, the export procedure will tell you it needs to "Apply layer mask". Click 'Export'.</li>
</ol>
<p>Another way to do is it right click on the layer and select "Add alpha channel" and use the Erase tool or Edit→Clear to erase the parts you want transparent.</p>
<h2><a name="0.3"></a>Importing into UnrealEd:</h2>
<ul><li>Be sure to check the 'alpha' checkbox when you import your texture. If you forget to do this, you can always change it by setting the <em class="em2">bAlphaTexture</em> to True in the 'surface' section of the Texture Properties window (open that by right-clicking your texture and selecting 'properties' in the context list).</li>
<li>You will know that you have created and imported the alpha texture properly if you can see some of the texture window's background through your texture. for example, it looks a little like this:</li>
</ul>
<div class="floatimages"><table border=0 cellspacing=0 cellpadding=0 align=center width=1><tr valign=top><td class="floatimages-block"><div><img alt="[AlphaTexExample]" src="images/alphatexexample.jpeg"><p>Alpha textures appear like this, with the background showing through.</p>
</div>
</td>
</tr>
</table>
</div>
<p>See <a href="texture-import-and-export.html">Texture Import and Export</a> for more information on importing textures.</p>
<h2><a name="0.4"></a>Related Topics </h2>
<ul><li><a href="graphics-application.html">Graphics Application</a></li>
<li><a href="texture-import-and-export.html">Texture Import And Export</a> for <a href="unrealed-3.html">UnrealEd</a></li>
</ul>
<h2><a name="0.5"></a>Discussion</h2>
<p><em class="em2">DJPaul:</em> Did some more work on this. Fell through when I released the Beta 8 of PSP menu-wise is much different from PSP7, so i'm stuck. Plus my art sk1lls about suitable for MS Paint. I will try find someone who knows to finish it.</p>
<p><em class="em2">Foxpaw:</em> Is there a way to make a add a mask to a texture within UnrealEd? IE Set a texture as the alpha mask for another material?</p>
<p><em class="em2">Wormbo:</em> I'm sure this is possible through extensive use of texture modifiers, e.g. you can use a <a href="combiner.html">Combiner</a> to combine the colors of one texture with the alpha map of a different texture. With a <a href="finalblend.html">FinalBlend</a> modifier you can create an alpha channel based on a texture's brightness (like the render style STY_Translucent in <a href="unreal-tournament.html">UT</a>) and use it in a Combiner to combine texture 1 and alpha channel of that FinalBlend. In both cases you have to apply another FinalBlend to the Combiner to make it actually use its alpha channel.</p>
<p><em class="em2">Foxpaw:</em> I haven't been successful in using the finalblend to make an alpha channel like that, but that is basically what I was aiming for.. can you explain the process in greater detail, or maybe make a tutorial page on how to do it?</p>
<p><em class="em2">LegalAssassin:</em> If you want an anti-aliased edge in PS you might experience (Geforce 2 GTS at least) that at distances this edge will turn white (!) in UEd. This is because of the the alpha color being white in PS. This looks bad when making, for instance, leaves on a branch. To fix this I use PSP 7 and open a .psd-version of the texture with the transparency as you want it. Now, make a new background layer, fill it with a more appropriate color (for leaves, some green would be nice) and save it as a .tga in PSP. The AA'd edge should now look good.</p>
<p>I'm sure there's a better way, but I'm learning PS by trial-and-error.</p>
<p><em class="em2">Tarquin:</em> Discussion needs cleaning... <a href="refactor-me.html">Refactor Me</a></p>
<hr class="thin"><p><a href="category-to-do.html">Category To Do</a> - Discussion needs cleaning</p>
<script type="text/javascript"><!--
menuItemAdd("About the .TGA file format", "#0.1");
menuItemAdd("Adding An Alpha Channel to an Image ", "#0.2");
menuItemAdd("<tt> </tt>Adobe Photoshop ", "#0.2.1");
menuItemAdd("<tt> </tt>Paint Shop Pro ", "#0.2.2");
menuItemAdd("<tt> </tt>The GIMP", "#0.2.3");
menuItemAdd("Importing into UnrealEd:", "#0.3");
menuItemAdd("Related Topics ", "#0.4");
menuItemAdd("Discussion", "#0.5");
menuWrite() //--></script></div>
</div>
<div id="footer" class="bar">
<p><form method="post" action="http://wiki.beyondunreal.com/wiki" enctype="application/x-www-form-urlencoded">
<a href="(start).html">Home Page</a> | <a href="recent-changes.html">Recent Changes</a> | <a href="http://wiki.beyondunreal.com/wiki?action=editprefs">Preferences</a><br>
<a href="http://wiki.beyondunreal.com/wiki?action=edit&id=Alpha_Channel">Edit text of this page</a> | <a href="http://wiki.beyondunreal.com/wiki?action=history&id=Alpha_Channel">View other revisions</a><br>Last edited January 11, 2007 16:12 <a href="http://wiki.beyondunreal.com/wiki?action=browse&diff=1&id=Alpha_Channel">(diff)</a><br>Search: <input type="text" name="search" size="20" /><input type="hidden" name="dosearch" value="1" /><br><br><small><a href="http://wiki.beyondunreal.com/wiki/Alpha_Channel">Original page</a> – copy created Sat, Jun 23, 2007</small><div></div>
</form>
</p>
<p>I'm a doctor, not a mechanic
</p>
</div>
</div><!-- close of "scrolling" div -->
<div id="quickbar">
<div id="logo"><a href="http://wiki.beyondunreal.com/"><img src="shared/wikilogo.jpg" width="143" height="100" border="0"></a>
</div>
<div class="qbsitename">
<p>The Unreal Engine Documentation Site</p>
</div>
<div class="qbsection">
<p><a href="metatopics.html">Wiki Community</a></p>
<p><a href="category-category.html">Topic Categories</a></p>
<p><a href="/cgi-bin/imageupload.cgi/wiki-ext/imageupload.htt" target="_blank ">Image Uploads</a></p>
<p><a href="http://wiki.beyondunreal.com/wiki?action=random">Random Page</a></p>
<p><a href="recent-changes.html">Recent Changes</a></p>
<p><a href="offline-wiki.html">Offline Wiki</a></p>
</div><div class="qbsection">
<p><a href="unreal-engine.html">Unreal Engine</a></p>
<p><a href="console-commands.html">Console Commands</a></p>
<p><a href="terminology.html">Terminology</a></p>
<p><a href="category-faq.html">FAQs</a></p>
<p><a href="help-desk.html">Help Desk</a></p>
</div><div class="qbsection">
<p><a href="topics-on-mapping.html">Mapping Topics</a></p>
<p><a href="mapping-lessons.html">Mapping Lessons</a></p>
<p><a href="unrealed-3.html">UnrealEd Interface</a></p>
</div><div class="qbsection">
<p><a href="unrealscript.html">UnrealScript Topics</a></p>
<p><a href="unrealscript-lessons.html">UnrealScript Lessons</a></p>
<p><a href="making-mods.html">Making Mods</a></p>
<p><a href="class-tree.html">Class Tree</a></p>
</div><div class="qbsection">
<p><a href="topics-on-modeling.html">Modeling Topics</a></p>
</div><div class="qbsection">
<p><a href="chongqing-page.html">Chongqing Page</a></p>
<p><a href="log-in.html">Log In</a></p></div>
</div>
</body></html>