[Easy Tutorial] Getting Custom Textures into the Spark Editor

MegahaloMegahalo Join Date: 2005-01-06 Member: 33009Members
edited November 2009 in NS2 General Discussion
<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>
«1

Comments

  • NeXuZNeXuZ Join Date: 2003-08-12 Member: 19594Members
  • DawormDaworm Join Date: 2009-06-22 Member: 67900Members
    For those that don't have photoshop.

    <a href="http://www.getpaint.net/" target="_blank">Paint.Net</a> allows you to save straight to .DDS format, and it's free!
  • borgkingborgking Join Date: 2009-11-24 Member: 69504Members
    You don't even have to save as a dds...
    tga works as well ;)
  • doesephdoeseph Join Date: 2009-11-22 Member: 69467Members, NS2 Playtester, Subnautica Playtester
    edited November 2009
    Good tutorial. And.dds with DXT1 has 8:1 compression making it a smaller file size than targas.
  • TychoCelchuuuTychoCelchuuu Anememone Join Date: 2002-03-23 Member: 345Members
    Awesome job man. My favorite part is how even your sample texture has some work put into it, with the pretty gradient/glow/etc on the stripes :D
  • ThaldarinThaldarin Alonzi&#33; Join Date: 2003-07-15 Member: 18173Members, Constellation
    You're really crazy about getting NS2Dev posted every where on your images for some reason.

    Nice to see someone putting up a how to which is cool.
  • ArkArk Join Date: 2009-08-15 Member: 68489Members
    edited November 2009
    Id recommend using DX5 over DX1 as it doesn't compress the image as much (4:1 instead of 8:1), you get a bit of banding with DX1. You'll need the interpolated alpha for things with proper transparency.

    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.
  • EldritchEldritch Join Date: 2003-02-28 Member: 14126Members
    <!--quoteo(post=1741165:date=Nov 28 2009, 04:22 AM:name=Daworm)--><div class='quotetop'>QUOTE(Daworm @ Nov 28 2009, 04:22 AM) <a href="index.php?act=findpost&pid=1741165"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->For those that don't have photoshop.

    <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
  • MegahaloMegahalo Join Date: 2005-01-06 Member: 33009Members
    <!--quoteo(post=1741165:date=Nov 28 2009, 03:22 AM:name=Daworm)--><div class='quotetop'>QUOTE(Daworm @ Nov 28 2009, 03:22 AM) <a href="index.php?act=findpost&pid=1741165"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->For those that don't have photoshop.

    <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 ;)
  • NeXuZNeXuZ Join Date: 2003-08-12 Member: 19594Members
    <!--quoteo(post=1741284:date=Nov 28 2009, 07:39 PM:name=Megahalo)--><div class='quotetop'>QUOTE(Megahalo @ Nov 28 2009, 07:39 PM) <a href="index.php?act=findpost&pid=1741284"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->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 ;)<!--QuoteEnd--></div><!--QuoteEEnd-->


    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.
  • Lord SchnitzelLord Schnitzel Join Date: 2008-11-04 Member: 65377Members
    Nice tutorial. Anybody know if ns2 will come with a tool that let's you convert pictures (bmp, jpg, etc) into textures easily? Not everybody owns Photoshop or wants to pirate it ;)
  • EldritchEldritch Join Date: 2003-02-28 Member: 14126Members
    <!--quoteo(post=1741454:date=Nov 29 2009, 09:33 AM:name=Lord Schnitzel)--><div class='quotetop'>QUOTE(Lord Schnitzel @ Nov 29 2009, 09:33 AM) <a href="index.php?act=findpost&pid=1741454"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Nice tutorial. Anybody know if ns2 will come with a tool that let's you convert pictures (bmp, jpg, etc) into textures easily? Not everybody owns Photoshop or wants to pirate it ;)<!--QuoteEnd--></div><!--QuoteEEnd-->


    Scroll up. ;)
  • SgtBarlowSgtBarlow Level Designer Join Date: 2003-11-13 Member: 22749Members, NS2 Developer
    How do we make proper Normal Maps, I can generate one with the nVidia Plugin but it aint the results you want is it or is it?

    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" />
  • CoolCookieCooksCoolCookieCooks Pretty Girl Join Date: 2003-05-18 Member: 16446Members, NS1 Playtester, Contributor, Constellation
    You can still use the raised look in the texture map, but ideally to create proper normal maps you should be rendering the textures in a 3d environment.
  • SgtBarlowSgtBarlow Level Designer Join Date: 2003-11-13 Member: 22749Members, NS2 Developer
    Darn, Well Does anyone know if they made a tool for making these maps or if they used something else?
  • CoolCookieCooksCoolCookieCooks Pretty Girl Join Date: 2003-05-18 Member: 16446Members, NS1 Playtester, Contributor, Constellation
    Theres plenty of tutorials around online for creating bump/normal maps, there isnt any complex bumping involved in the texture you want so i reckon you could get away with following a photoshop tutorial.
  • ArkArk Join Date: 2009-08-15 Member: 68489Members
    There baking their normal maps from 3ds max. Theres plenty of free tools, Xnormal being one of the best, that can generate them.
    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.
  • TychoCelchuuuTychoCelchuuu Anememone Join Date: 2002-03-23 Member: 345Members
    Something like CrazyBump or XNormal is often your best bet if you're not going to make 3d geometry with a modeling program.
  • SgtBarlowSgtBarlow Level Designer Join Date: 2003-11-13 Member: 22749Members, NS2 Developer
    edited November 2009
    Thank you very much people, that was much more informative than some of the stuff I found on google, i will pluck throught what you all suggested.
    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.
  • doesephdoeseph Join Date: 2009-11-22 Member: 69467Members, NS2 Playtester, Subnautica Playtester
    edited November 2009
    <!--quoteo(post=1741474:date=Nov 29 2009, 08:48 AM:name=SgtBarlow)--><div class='quotetop'>QUOTE(SgtBarlow @ Nov 29 2009, 08:48 AM) <a href="index.php?act=findpost&pid=1741474"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->How do we make proper Normal Maps, I can generate one with the nVidia Plugin but it aint the results you want is it or is it?

    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.
  • MegahaloMegahalo Join Date: 2005-01-06 Member: 33009Members
    <!--quoteo(post=1741487:date=Nov 29 2009, 10:30 AM:name=SgtBarlow)--><div class='quotetop'>QUOTE(SgtBarlow @ Nov 29 2009, 10:30 AM) <a href="index.php?act=findpost&pid=1741487"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->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.<!--QuoteEnd--></div><!--QuoteEEnd-->

    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. ;)
  • SgtBarlowSgtBarlow Level Designer Join Date: 2003-11-13 Member: 22749Members, NS2 Developer
    Of course but you need to see it from a newbies point of view, I could not figure out why my texture had such bad lighting, i was mesing with the nomral maps and other things at first.
    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 ;)
  • MegahaloMegahalo Join Date: 2005-01-06 Member: 33009Members
    <!--quoteo(post=1741564:date=Nov 29 2009, 04:33 PM:name=SgtBarlow)--><div class='quotetop'>QUOTE(SgtBarlow @ Nov 29 2009, 04:33 PM) <a href="index.php?act=findpost&pid=1741564"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Of course but you need to see it from a newbies point of view, I could not figure out why my texture had such bad lighting, i was mesing with the nomral maps and other things at first.
    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!
  • ScardyBobScardyBob ScardyBob Join Date: 2009-11-25 Member: 69528Forum Admins, Forum Moderators, NS2 Playtester, Squad Five Blue, Reinforced - Shadow, WC 2013 - Shadow
    You can also convert to .dds files using a plugin with GIMP
    <a href="http://www.modwiki.net/wiki/DDS_(file_format)" target="_blank">http://www.modwiki.net/wiki/DDS_(file_format)</a>
  • ewatkinsewatkins Join Date: 2009-08-13 Member: 68449Members
    hmmm my only problem is how do i create a .material file? i have created a wordpad document with the extension .material after my save but i still cant get my texture, your picture says you file ttype is material but mine just says its a text document.... sorry completely new at this one :) thanks!
  • yimmasabiyimmasabi Join Date: 2006-11-03 Member: 58318Members
    edited November 2009
    A serious question !

    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.
  • SilverwingSilverwing bulletsponge Join Date: 2003-11-23 Member: 23395Members, Constellation
    <!--quoteo(post=1741649:date=Nov 30 2009, 03:00 AM:name=ewatkins)--><div class='quotetop'>QUOTE(ewatkins @ Nov 30 2009, 03:00 AM) <a href="index.php?act=findpost&pid=1741649"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->hmmm my only problem is how do i create a .material file? i have created a wordpad document with the extension .material after my save but i still cant get my texture, your picture says you file ttype is material but mine just says its a text document.... sorry completely new at this one :) thanks!<!--QuoteEnd--></div><!--QuoteEEnd-->


    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.
  • ArkArk Join Date: 2009-08-15 Member: 68489Members
    <!--quoteo(post=1741649:date=Nov 30 2009, 08:00 AM:name=ewatkins)--><div class='quotetop'>QUOTE(ewatkins @ Nov 30 2009, 08:00 AM) <a href="index.php?act=findpost&pid=1741649"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->hmmm my only problem is how do i create a .material file? i have created a wordpad document with the extension .material after my save but i still cant get my texture, your picture says you file ttype is material but mine just says its a text document.... sorry completely new at this one :) thanks!<!--QuoteEnd--></div><!--QuoteEEnd-->

    Just copy an existing .material file and edit that, much simpler.
  • SilverwingSilverwing bulletsponge Join Date: 2003-11-23 Member: 23395Members, Constellation
    <!--quoteo(post=1741668:date=Nov 30 2009, 04:28 AM:name=Ark)--><div class='quotetop'>QUOTE(Ark @ Nov 30 2009, 04:28 AM) <a href="index.php?act=findpost&pid=1741668"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Just copy an existing .material file and edit that, much simpler.<!--QuoteEnd--></div><!--QuoteEEnd-->

    Oh. Right.

    /facepalm

    Should have thought of that =D
  • ewatkinsewatkins Join Date: 2009-08-13 Member: 68449Members
    Awesome. started using notepad ++ working wonders :D got it moving now which is great. thanks guys.
Sign In or Register to comment.