[Easy Tutorial] Getting Custom Textures into the Spark Editor
Megahalo
Join Date: 2005-01-06 Member: 33009Members
Join Date: 2005-01-06 Member: 33009Members
<div class="IPBDescription">Now with pretty pictures!</div>This is a simple Step-by-Step guide to get your texture into the Spark Editor. Nothing fancy is going on here and this tutorial is aimed for beginners who are just getting into the mapping game.
<b>Requirements:
</b><ul><li>Natural Selection 2's Spark Editor</li><li>Photoshop</li><li>Basic Knowledge of Your Computer</li></ul>If you satisfy all of these you are ready to proceed!
<b>Step 1</b><b>:</b> Download <a href="http://developer.nvidia.com/object/photoshop_dds_plugins.html" target="_blank">nVidia's Plug-ins for Adobe Photoshop</a>.
<b>Step 2:</b> Create a new document that measures 512x512. (If you must go with a different size the image HAS to be a multiple of 4.)
<img src="http://ns2devs.com/pewpewk/textut/step1.png" border="0" class="linked-image" />
<b>Step 3:</b> Create your texture. This is obviously the hardest and most complex step, especially if you are dealing with Alpha textures and bump maps, but since this tutorial isn't on making the texture, I'm not going to get into that.
<img src="http://ns2devs.com/pewpewk/textut/step2.png" border="0" class="linked-image" />
<b>Step 4:</b> Go to File -> Save As and save the file in the D3D/DDS format.
<img src="http://ns2devs.com/pewpewk/textut/step3.png" border="0" class="linked-image" />
<b>Step 5:</b> When you hit 'Save' this option box will appear. Now here is an important little dialog box. The main thing we want to focus on here is the drop down box that currently says DXT1. This is the type of .DDS file we will be saving and while all versions are going to create a .dds file the quality will differ depending on which one you choose. I suggest picking DXT5 as it is the format that UWE uses in their textures. Also notice there is an option for at the end if you have an Alpha (transparency) channel or not, make sure to pick the right one! There are other options here, but I'm not 100% certain of what they do, feel free to play around with them and see what they do, experimentation never hurt anyone :P.
<img src="http://ns2devs.com/pewpewk/textut/step4.png" border="0" class="linked-image" />
<b>Step 6:</b> This could be the hardest step... find where you saved your texture and move it into 'C:\Program Files\Natural Selection 2\ns2\materials\custom\'. Notice I made the 'custom' folder which is really just for organizational purposes, it isn't required for the texture to be loaded. See how hard that was?
<img src="http://ns2devs.com/pewpewk/textut/step5.png" border="0" class="linked-image" />
<img src="http://ns2devs.com/pewpewk/textut/step6.png" border="0" class="linked-image" />
<b>Step 8:</b> Now you need to create a material file for it to be loaded by the Spark Editor. In the same folder that you placed your texture, create a file with the same name as your texture and make the extension '.material'. Then open up this '.material' file in a text editor and add the following text:
<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><material>
<maps>
<map type="texture" value="materials/(yourfoldername)/(yourfilenamehere).dds" />
</maps>
</material><!--c2--></div><!--ec2-->
Obviously replace (yourfoldername) and (yourfilenamehere) with your own values. Save the file.
<i>Additional Note: </i>The material file is also where you define the bump map. In the case of most official NS2 textures, their material file looks like this:
<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><material> <maps>
<map type="texture" value="materials/dev/dev_32x512.dds" />
<map type="bump" value="materials/dev/dev_normal.dds" />
</maps>
</material><!--c2--></div><!--ec2-->
If you are making a texture with a bump map then make sure to also specify it in the materials file.
<img src="http://ns2devs.com/pewpewk/textut/step7.png" border="0" class="linked-image" />
<b>Step 9:</b> Now load up the Spark Editor and you will notice that you texture is right there.
<img src="http://ns2devs.com/pewpewk/textut/step8.png" border="0" class="linked-image" />
Now I know that this was the most difficult thing you've probably ever done, but I hope that I made it a little bit easier.
With less sarcasm... yes, I know for any experienced user this probably was a guide that is insultingly easy, but you aren't who I was targeting to teach here ;)
---------------------------------
<b>This tutorial is property of <a href="http://ns2devs.com" target="_blank">NS2.Devs</a>. Do not copy without permission. To view the original version of this tutorial please visit <a href="http://ns2devs.com/index.php?/topic/19-creating-a-texture-for-use-in-the-spark-editor/" target="_blank">this convenient link</a>.</b>
<b>Requirements:
</b><ul><li>Natural Selection 2's Spark Editor</li><li>Photoshop</li><li>Basic Knowledge of Your Computer</li></ul>If you satisfy all of these you are ready to proceed!
<b>Step 1</b><b>:</b> Download <a href="http://developer.nvidia.com/object/photoshop_dds_plugins.html" target="_blank">nVidia's Plug-ins for Adobe Photoshop</a>.
<b>Step 2:</b> Create a new document that measures 512x512. (If you must go with a different size the image HAS to be a multiple of 4.)
<img src="http://ns2devs.com/pewpewk/textut/step1.png" border="0" class="linked-image" />
<b>Step 3:</b> Create your texture. This is obviously the hardest and most complex step, especially if you are dealing with Alpha textures and bump maps, but since this tutorial isn't on making the texture, I'm not going to get into that.
<img src="http://ns2devs.com/pewpewk/textut/step2.png" border="0" class="linked-image" />
<b>Step 4:</b> Go to File -> Save As and save the file in the D3D/DDS format.
<img src="http://ns2devs.com/pewpewk/textut/step3.png" border="0" class="linked-image" />
<b>Step 5:</b> When you hit 'Save' this option box will appear. Now here is an important little dialog box. The main thing we want to focus on here is the drop down box that currently says DXT1. This is the type of .DDS file we will be saving and while all versions are going to create a .dds file the quality will differ depending on which one you choose. I suggest picking DXT5 as it is the format that UWE uses in their textures. Also notice there is an option for at the end if you have an Alpha (transparency) channel or not, make sure to pick the right one! There are other options here, but I'm not 100% certain of what they do, feel free to play around with them and see what they do, experimentation never hurt anyone :P.
<img src="http://ns2devs.com/pewpewk/textut/step4.png" border="0" class="linked-image" />
<b>Step 6:</b> This could be the hardest step... find where you saved your texture and move it into 'C:\Program Files\Natural Selection 2\ns2\materials\custom\'. Notice I made the 'custom' folder which is really just for organizational purposes, it isn't required for the texture to be loaded. See how hard that was?
<img src="http://ns2devs.com/pewpewk/textut/step5.png" border="0" class="linked-image" />
<img src="http://ns2devs.com/pewpewk/textut/step6.png" border="0" class="linked-image" />
<b>Step 8:</b> Now you need to create a material file for it to be loaded by the Spark Editor. In the same folder that you placed your texture, create a file with the same name as your texture and make the extension '.material'. Then open up this '.material' file in a text editor and add the following text:
<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><material>
<maps>
<map type="texture" value="materials/(yourfoldername)/(yourfilenamehere).dds" />
</maps>
</material><!--c2--></div><!--ec2-->
Obviously replace (yourfoldername) and (yourfilenamehere) with your own values. Save the file.
<i>Additional Note: </i>The material file is also where you define the bump map. In the case of most official NS2 textures, their material file looks like this:
<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><material> <maps>
<map type="texture" value="materials/dev/dev_32x512.dds" />
<map type="bump" value="materials/dev/dev_normal.dds" />
</maps>
</material><!--c2--></div><!--ec2-->
If you are making a texture with a bump map then make sure to also specify it in the materials file.
<img src="http://ns2devs.com/pewpewk/textut/step7.png" border="0" class="linked-image" />
<b>Step 9:</b> Now load up the Spark Editor and you will notice that you texture is right there.
<img src="http://ns2devs.com/pewpewk/textut/step8.png" border="0" class="linked-image" />
Now I know that this was the most difficult thing you've probably ever done, but I hope that I made it a little bit easier.
With less sarcasm... yes, I know for any experienced user this probably was a guide that is insultingly easy, but you aren't who I was targeting to teach here ;)
---------------------------------
<b>This tutorial is property of <a href="http://ns2devs.com" target="_blank">NS2.Devs</a>. Do not copy without permission. To view the original version of this tutorial please visit <a href="http://ns2devs.com/index.php?/topic/19-creating-a-texture-for-use-in-the-spark-editor/" target="_blank">this convenient link</a>.</b>
Comments
<a href="http://www.getpaint.net/" target="_blank">Paint.Net</a> allows you to save straight to .DDS format, and it's free!
tga works as well ;)
Nice to see someone putting up a how to which is cool.
All of the textures that were released are in DX5 form.
Seems like there storing the Specular map in the diffuse's alpha-channel. The've only created a separate file when the specular needs a gloss map added.
<a href="http://www.getpaint.net/" target="_blank">Paint.Net</a> allows you to save straight to .DDS format, and it's free!<!--QuoteEnd--></div><!--QuoteEEnd-->
Another here for Paint.net! Attached is an Zip with two Plugins for creating Normal maps and Alpha.
Extract to: C:\Program Files\Paint.NET\Effects\
[attachment=35903:NormalnAlpha.zip]
Contains:
AlphaMask.dll
HeightToNormal.dll
<a href="http://www.getpaint.net/" target="_blank">Paint.Net</a> allows you to save straight to .DDS format, and it's free!<!--QuoteEnd--></div><!--QuoteEEnd-->
I've never even heard of it, but after checking out Paint.Net actually looks pretty cool for a free program. But of course I've been working in Photoshop for years and it really is too late to start to learn another program. That and I'm happy in Photoshop, I have no complaints with it ;)
i know, i used PS a few years now (not so mutch lately) and useing a diffrent program is.. alitte hard to get used to. Think this is alitte the same with ppl that used hammer for year and now getting used to spark.
Scroll up. ;)
Firstly: I have tried searching but I cant seem to properly answer the question of what is the job of the Blue, Red and Green channel, what each one does and what White ~ Grey ~ Black Defines.
White = Very Shiney? Black = No Effect?
Secondly: Whats the correct approach, I have made made a copy of the TSA logo as a tester to learn with as Photoshop vector so I have that with no background to work from.
For this texture I put the Bump in the image it's self but I should have the raised look of it done purely by the Normal Map... right?
<img src="http://www.unitedworlds.co.uk/online-gaming/tsa.jpg" border="0" class="linked-image" />
You will need a 3d app to get the best normal maps.
Running a texture through the normal map filter in photoshop doe's not constitute as a good normal baking procedure. The photoshop filter is ok for small details like pours of the skin say, but when you want to capture large surface detail, hi to low polygon baking is the best route.
Do a search for the XSI mod tool, it's very good considering its free.
<!--quoteo--><div class='quotetop'>QUOTE</div><div class='quotemain'><!--quotec-->Firstly: I have tried searching but I cant seem to properly answer the question of what is the job of the Blue, Red and Green channel, what each one does and what White ~ Grey ~ Black Defines.
White = Very Shiney? Black = No Effect?<!--QuoteEnd--></div><!--QuoteEEnd-->
Each channel in a normal map defines an axis. I.e. Red = X axis which is normally left and right in cartisan space, Green = Y which is normally up and down and Blue = Z which is towards and away.
If you look through the channels individually, you can see how the channels are individually lit from the axis mentioned above.
In specular maps white = shiny and black is matte.
If you still want to paint your normal maps in photoshop, you need to paint on a new layer in a mid-tone grey, then paint any indents in blacks and any bumps in white, then run it through the filter, duplicate the layer and Gaussian blur it, then change the blending mode to overlay and continuing the duplicating blurring and overly until the normal map as enough information to describe the shape. Finally collapse all the layers then run it through the normal map filter again with the 'normalize' button checked.
Thank you Ark for the explenation it was far more clear to understand than the tutorials I was trying to read.
Oh btw, Exporting to DXT1 results in bad suface illumination, Your textures Illuminate like the Grey Dev textures do, unless you save with DXT5 then you wont get the result I got for my texture above.
Firstly: I have tried searching but I cant seem to properly answer the question of what is the job of the Blue, Red and Green channel, what each one does and what White ~ Grey ~ Black Defines.
White = Very Shiney? Black = No Effect?
Secondly: Whats the correct approach, I have made made a copy of the TSA logo as a tester to learn with as Photoshop vector so I have that with no background to work from.
For this texture I put the Bump in the image it's self but I should have the raised look of it done purely by the Normal Map... right?<!--QuoteEnd--></div><!--QuoteEEnd-->
Normal maps use RGB to control the direction of each pixel (and how much light each will receive) giving the illusion of more surface detail or curvature. Although each shader handles normal maps differently, generally the red channel handles the X axis (telling normals to point left or right), green channel handles the Y axis (up and down), and the blue channel handles the Z axis (outwards). On a normal map, each pixel pretends to be a polygon. Note that there's a difference between a bump map and a normal map even though they do the same thing - a bump uses a grey scale image while a normal uses RGB channels.
White, gray, and black could mean a couple things, Ambient Occlusion for example, but you're probably referring to a specular map: it's used to determine how bright a surface is (and in turn how much light it reflects). White represents 100% brightness, gray 50%, black 0%.
You're image wouldn't be diifficult to generate a normal map for. All you'd need to do is desaturate the image, ensure the middle logo is maybe 70-80% brightness (white) with the background at about 10-30% darkness. Save as a .dds normal and you should be G2G.
Of course, but I wasn't going for anything fancy this was more of a tutorial to show where the plugin for Photoshop is and how to create the material files necessary for Spark to see it. ;)
Other than that its a good tutorial and I would have not been able to make a DDS so easily as without it I would have been pushing all the buttons spending ages on how to work it ;)
Other than that its a good tutorial and I would have not been able to make a DDS so easily as without it I would have been pushing all the buttons spending ages on how to work it ;)<!--QuoteEnd--></div><!--QuoteEEnd-->
Ok I see your point, I'll make sure to add this to my original post. Thanks!
<a href="http://www.modwiki.net/wiki/DDS_(file_format)" target="_blank">http://www.modwiki.net/wiki/DDS_(file_format)</a>
Why should I have to write whole path as;
"materials/(yourfoldername)/(yourfilenamehere).dds"
instead of writing
"(yourfilenamehere).dds"
where dds is near by material etc.
or within a directory where is in the directory of "*.material" file. And also we should able to use "//" or "../../" etc.
If i rename directory i should also edit all .material files. This is pointless.
All files should be included in a custom directory of creator and files so this should be arranged for this.
Otherwise there will be much more unknown file errors in .material files as seen some 3d objects in Spark.
Please make material files arranged for the custom directories. This directory may be on the desktop and can be used without any missing file errors.
Depending on your setup/system/os, you may have to change your settings to "Show file ending" or whatever it is called. Your file will be called filename.material.txt. Simply delete .txt.
Alternatively, you may be able to do it by using "Save as...", selecting "All files" as file type and then writing out the filename (eg. filename.material).
If your problems persist, you may have to supply some basic information about your OS and the editor you use. Like, what OS are you using, are you using notepad, etc.
Just copy an existing .material file and edit that, much simpler.
Oh. Right.
/facepalm
Should have thought of that =D