Key

Tired of messing around with boring old normal-people skins? How about trying your hand at Shaders?... heh heh heh. Introduction to Shaders Why hello there! If you came here with the intentions of learning the functions of Shaders, then you've come to the right place! As far as being positive about this, I'm going to be frank - it's as complicated as it looks. It takes some time getting a grasp on how Shaders work. They're very particular, but when done correctly they are without a doubt the most rewarding part about skins. I'm sure any skinner will agree with me on that one.So if you read my tutorial on skinning, you'll be pleased to know we'll be visiting revisting Mr. Fyarr again today. As if going "joker-style" on his pretty face wasn't enough, he's going to receive some more punishment. Please note, it's imperative that you pay attention and read all instructions / explanations to better your understanding of how Shaders work. Like always, I will give help wherever you need it. Don't be afraid to ask questions. What You'll Need Note, I'm just going to copy what I said about these programs over from my skinning guide since there's no difference. If you read my skinning guide, you can skip to section 1! Alright, so there are some things you're going to need to get started. Firstly, any program that can accurately edit images. Secondly, a program that can open, read and save PK3 files - just to make things easier. As Jawfin has pointed out, PK3's are basically .Zips with a different name. I prefer to use PakScape just because it helps me see things more clearly. It's up to you! Image Editing Software Paint.Net [free] Download GIMP [free] Adobe Photoshop PK3 Management Pakscape [free] Download Shader Knowledge http://toolz.nexuizninjaz.com/shader/ (Probably the most valuable tool here - an online manual.) Others PK3 Template Download (Courtesy of Senbou) ModView Download Your brain (like always) Can of Coke (like always) Barbeque Flavored Lay's Potatoe Chips (like always) Note, I'm just going to copy what I said about these programs over from my skinning guide since there's no difference. If you read my skinning guide, you can skip to section 1! Modview will easily allow you to view your progress as you model/skin your mods! Hence the reason it's called MODview. I would recommend Paint.Net over GIMP, based on past experiences. Paint.Net is free - I use it for things that are too difficult or lengthy to do in Photoshop (these things seem to be much easier to accomplish in Paint.Net when dealing with time). Over all, I use Adobe Photoshop and would recommend you buy it if you're interested enough. It can be overwhelming but once you get comfortable using it, it's not hard to do other things. If you're going to only be skinning and nothing more, might as well get Paint.Net This tutorial will be done in Photoshop, but I will list the equivalent functions (if they are different) of Paint.Net. I highly dislike GIMP and therefore I will not be giving directions specifically on how to use it. Section 1 A: Small Recap For New Skinners Back again for more, are we? Well if you're new here - you definitely need to learn the basics of skinning before moving on. No exceptions. My introduction to skinning can be found here. Seriously, I won't let you continue unless you know how to do basic skinning. Stop reading. Really, this isn't a joke, you'll be so lost your head will turn inside out and start singing R&B/Soul music. Yeah, makes no sense does it? That's right, that's exactly what this tutorial will be like for you if you just started now. Mhm, no go on.Anyways, welcome back to all the newly made skinners. Let's jump into this head first with, as this section suggests, a small recap. If it helps, which it should, download the PK3 template that Senbou provided, which can be found in the "Others" part of the tool list. What we're going to do though, for this tutorial, is use the exact skin we made in my other tutorial. If you got rid of it, don't fret, you can do it with any other skin and follow the same steps. I just figured it'd be fun to continue torturing Galak. Okay, so a skin's/model's PK3 folder spread should look like this inside: models -> players -> SKIN NAME -> Skin's texture images, .SKIN, .GLM, and icon. sounds -> chars -> SKIN NAME -> misc -> Sound files. GFX -> effects -> Shader texture images. shaders -> .SHADER file. So there's 2 new folders here, the GFX folder and the Shaders folder. The GFX folder contains the folder "effects" which holds all the shader's texture images. The Shaders folder holds the actual .SHADER file. 1. Go ahead and open PakScape, then load your skin you want to put some fancy-shmancy shaders on. I'm going to use my funky "epic_galak" skin. I suggest you do the same to minimize any confusion, unless of course you never made one. 2. Create the two new folders, "GFX" and "Shaders" in the same place where "models" and "sounds" are. If you forget how to do this in PakScape, just right click and select New Directory then folder. 3. Open your GFX folder and make another new folder named "effects", then go back to the main part of the PK3 where all the other folders are. Section 1 B: Visualization This isn't entirely something we can run into blindfolded, we have to set a goal of what we want to accomplish. Once you become good enough to skin/shader on your own, you can more easily go at it with not entirely sure of where you're going. Anyways, in this tutorial we're going to cover a very basic form of shader and a tad more complex. Both will be explained in full, of course. The first part we're going to do is add a glowing flourish design on Galak. The second part we're going to do is give this lad a pair of shoes the galaxy itself will be jealous of. I must remind you, it's very important you read all directions and explanations. Without further ado, let's continue! 1. So you should already have PakScape open with the skin you're going to be adding a shader to. If not, do that now. Refer to the directions in section 1 A if you need to. Your first official bit of instructions is to open your original folder where you saved all of your uncompressed work. According to my other tutorial, it should be in a folder in My Documents named "My Skinz". So go there and find your "Epic Galak" skin. For those of you using another skin, make sure you copy all the content from the PK3 into a seperate folder - Adobe Photoshop and *I think* Paint.Net do not read JPG's opened from PakScape. They have to be outside. 2. Speaking of Paint.Net/Adobe Photoshop, open your image editing software now. 3. In your other window, where you should have the folder opened for the skin you're editing, open "Models" 4. Now open "players" 5. Now open "NAME OF SKIN" which in my case is "epic_galak" 6. Welcome back to the inner workings of the skin! Find the texture image that refers to the torso of the skin. For those of using your Epic Galak skin, it'll be named "Galak_Torso.jpg". Drag it over to your photo editing software to open it. So here's what I've got on my screen: http://i48.tinypic.com/2cwx7vr.jpg Those of you using another skin, it should look something similar. This is the part of the skin known as the "torso", the .GLM (actual body model) and .SKIN file both refer to this image for the texture which will wrap around that part of the model.We're going to end this section so we can continue with a different, more approriate name. Section 2: Get Out The Plasma Oh how fun, we're going to do a LOT in one section! So if you missed out a bit on Section 1, which you shouldn't have, since it's important you read everything, we're going to be giving Galak a glowing, white flourish design placed on his back. Note, if you're an experienced skinner or are making a skin of your own, you can skip this section. However, if this is the first time you're learning about skinning/shadering, I highly recommend you continue reading this section. 1. You should have the torso texture image opened up in your image editing software. What we're going to do first is find some random vector image on the internet to help out. This is the one I'll be using, I've done some editing to it for easier use: http://i45.tinypic.com/2cnghz7.png 2. Save it, or copy it by right clicking on the image, then put it into your image editing software over the skin's texture. It should come on and look like this (somewhat): http://i47.tinypic.com/4smfld.jpg 3. Nice. I'm going to rotate the image so it's upside down and then move it up KR's clan tag logo. Feel free to do whatever you want / put it wherever you want. Keep in mind, if you put it somewhere else - you may have to adjust your player camera in-game to see it in action. Here's my almost-final product: http://i48.tinypic.com/13yl7k0.jpg 4. Now the final step. Since we're going to be using an "add" GL blend function, the rest of the image needs to be black so when it's put onto the skin, only the white will show/glow. Create a new layer under the design and fill it entirely with black. For Photoshop users, press SHIFT+F5 to open the fill menu. Paint.Net users simply use the paintbucket tool - just make sure you're on the correct layer. This is what it should look like: http://i48.tinypic.com/2hdtvfq.jpg Cool! Now note I'm instilling in you a very basic and useful tool for Shaders. Namely the standard glowing-object technique. Yes, it's an ancient art passed down through generations. Yes, you just learned how to do it. This is a very very very very very significantly useful technique because it's the very bottom line when creating effects that don't include simple color remapping and blending. Long story short, just remember how to create images like this (ones with highlights like this design atop a black background). 5. Saving time. So click File, then Save As. Pay attention! You're going to want to give the name of this file something unique - something no other skin would ever use. That means, no, you should most definitely NOT name the effect "torsoglow". I'll tell you why, don't get fussy!The effects folder is a "public" folder, meaning even though you're in your own little world with that skin - the game refers to the same gfx/effects directory no matter where it's at. If you had another skin, which also had a "torsoglow" image in it's gfx/effects folder, you'd have some conflict - there's no directory that differentiates the two (like how in models/players you have your next folder named "Epic Galak", which is a seperate directory since it has a specific name). So for those of you following the tutorial skin, let's name the .JPG (make sure it's a .JPG) as "eg_torso_glow". You're going to want to save it in the new folder you made earlier in your skin's open (uncompressed) folder: gfx/effects. It should be the only texture image in there now, unless you've made other ones - which you can if you feel confident enough. But if there's the same effect for the same texture image, then might as well put them all onto the same shader image. If you're confused about what I meant by a "public directory", please refer to the Brief Lessons at the bottom of this tutorial. 6. Okay, as a review, in your folder you made back in Section 1, you should have saved this newly created shader. It should be in My Documents/My Skinz/Epic Galak/gfx/effects. Or something similar, depending on where you saved your skins. Section 3: Get Out the Radioactive Plasma Remember those fancy boots I was talking about earlier? Guess what - it's time. Now, instead of a glow function (we'll talk more technical stuff later to help you understand), we're going to do a wavey-wave style of blending. Of course we can make it glow in the dark too - because after all it IS radioactive plasma. For this next part, you don't need to open anything. Now, as you may have realized, the image we're going to be applying this shader to is named "boots_hips", meaning it holds the parts for both the boots AND the hips. His little skirty-skirt is going to receive a wavey-wave as well. This is one thing you should constantly be aware of whilst skinning, because not all skins (as we see here) will be as well organized. Most of the JKA/JK3 skins are much more efficiently mapped out than the JK2 skins. Which many of said skins have just been ported from JK2 with miniscule changes if any. 1. So now we're going to create a different type of shader image. Either create a new document or use the example I have provided - it can be only certain sizes - just keep reading, you'll see. If you are going to use my example, skip to step 3. If you are creating a new one, it can be any size as long as it's divisble by two. Once you find an appropriate size, you should stick with it. For this tutorial, and as I highly recommend, we are going to make the image 256x256 pixels. For other cases, this can be variable - it depends on the effect you're trying to pull off. 2. Now to be able to make an appealing pattern, you have to be pretty crafty / decent at photoshop/paint.net. Start out by making the image entirely black using the paintbucket tool (or CTRL+F5 -> black, if you're feeling like a pr0 and using PS). Make a new layer and fill it with whatever color you want, I am going to be using green. Erase portions of the image so you get an effect similar to mine - see the example below. There will be another tutorial on how to create much more fancy shader patterns in the future. http://i45.tinypic.com/34s0acz.jpg 3. Save the image as "eg_bh_glow" (as a .JPG) in your gfx/effects folder - if you decided not to create your own, save the above image in the same manner. 4. Now, as review, these two files should be in your gfx/effects folder: "eg_bh_glow" "eg_torso_glow" Saved in the directory of My Documents/My Skinz/Epic Galak/gfx/effects. Or something similar, depending on where you saved your skins. Section 5: He's Code, She's Code, We're All Code Now, my little schfizlekwats, we write the shader. This is the most important part of the entire tutorial, you must pay attention. I will be here to hold your hand all the way through - and after if you still need help. Don't be afraid to ask! 1. Open Notepad and crack your fingers. In order to begin applying effects, we need to identify which part of the skin texture is going to receive a facelift. (Reference to previous skinning tutorial, har har har.) First, we're going to attack the flourish design glow. 2. Start out the line like this: models/players/epic_galak/galak_torso { This tells the shader to look in that specific location for that specific image file so we can, specifically, map a shader to it. 3. We're going to add to that, so either copy/paste what I have below or continue writing it. models/players/epic_galak/galak_torso { { map models/players/epic_galak/galak_torso rgbGen lightingDiffuse } Okay STOP. Let's talk about what's going on here. So with the first line, we identify the target of the shader. The second line is a bracket, opening it up to be edited. The third line is another bracket, this part is here because we are going to put multiple effects onto one target - it's necessary as you'll see later. The fourth line uses the command "map" which takes the directed image (which is actually the same as what we're targetting) and blends it with the original image. The fifth line tells the shader what kind of coloring/blending we're using - the command rgbGen is used for editing the light on the image; we're using lightingDiffuse which is the standard lighting for all non-map objects (like our playermodel in this case). The final line signifies the end of that portion of coding, closing the first effect placed onto the skin. Now we'll add the second effect. 4. Add to your shader as follows: models/players/epic_galak/galak_torso { { map models/players/epic_galak/galak_torso rgbGen lightingDiffuse } { map gfx/effects/eg_torso_glow blendFunc GL_ONE GL_ONE glow rgbGen Identity } } STOP again! Don't forget that right-bracket at the end to clarify it's the closing of that target's shader effects. Let's take another moment to talk about what's happening. We closed off the first portion in step 3, now we made a new one - this one is what adds the shader image we made to the target texture. As you see, the map command allows the ep_torso_glow in gfx/effects to be the texture of our target. Well, if you recall, that image was just black and white. SO, we have "blendFunc GL_ONE GL_ONE" which will remove the black and highlight the other colors. Depending on how far away on the grayscale the color is from black (example - dark green is closer to black than true green) the more will be come translucent / dark. The glow function does exactly what it says - makes the texture have no light requirement to be visible (it's the brightest light source in the game because it's not affected by anything else including darkness.) The rgbGen this time is Identity, which means all the colors (red, green, and blue) are set to full brightness. Don't worry about that too much unless you're shadering for an entire game. Always use rgbGen Identity with glow lighting. 5. Cool, we have the first portion of the shader done. Now we're going to do those booties. Add the following part to the bottom of your script. models/players/epic_galak/galak_torso { { map models/players/epic_galak/galak_torso rgbGen lightingDiffuse } { map gfx/effects/eg_torso_glow blendFunc GL_ONE GL_ONE glow rgbGen Identity } } models/players/epic_galak/boots_hips { { map models/players/epic_galak/boots_hips rgbGen lightingDiffuse } Alright so what I did here was add another target for the shader to hunt down. This time, it's "boots_hips". And like before, we're going to give it an rgbGen of lightingDiffuse. If you can't remember what any of this means, refer to step 2. 6. At a little faster pace, I'm going to add in the rest of the shader so you may do the same. Once you've copied it, continue on to read what it means. models/players/epic_galak/galak_torso { { map models/players/epic_galak/galak_torso rgbGen lightingDiffuse } { map gfx/effects/eg_torso_glow blendFunc GL_ONE GL_ONE glow rgbGen Identity } } models/players/epic_galak/boots_hips { { map models/players/epic_galak/boots_hips rgbGen lightingDiffuse } { map gfx/effects/eg_bh_glow blendFunc GL_ONE GL_ONE glow tcGen Environment tcMod Scroll 0.2 -0.2 } } Most of it should be familiar to you now, apart from the two "tc" functions. 4. Okay, so, the command tcGen comes with three functions. Base, lightmap and environment. Base is the opposite of environment, as it draws from the original texture's coordinates to generate lighting spots. We want environment, which takes from... well the environment. Like to determine shadows - we need the game to know that there's a lightsource (like a lamp or something) nearby and that the shader must compensate for this rather than just making static shadows/highlights on the body. tcMod also comes with a plethora of fun and exciting things - see the brief lessons below to learn more about them. Right now we're going to go over the function of scroll. Two variables must be put into the scroll to make it dance about his booties. The first number is your x coordinate (left and right), the second is your y coordinate (up and down). So we'll be moving it the left and down at a speed of .2 units per second. If you ever do more than one tcMod, always do scroll last - it may interupt other processes. Please note, as an extra precaution, always insert another empty space after the very last line (in the Shader). Sometimes a game will ignore the very last line. If the very last line is a bracket like that above, which is necessary to the Shader, it could mess some things up. 5. Now we must save it! So click File -> Save As. Now navigate to your skin's "shaders" folder (My Documents/My Skinz/Epic Galak/shaders). Change the filetype to "All Files" - this is very important. Now save the file as "EG_player.SHADER", with the ".SHADER" on the end. Oh look how good you are at following instructions! Section 6: Compress to Impress (The Sequel) Oh goodness, you're on the final section! I'm such a brilliant teacher. I'm so proud of you as well, shaders are the fiesty little ferrets of the Skinning Art. Once you have mastered them, they will make you their king! Anyways, by now y'all should be pr0's at compressing. As you should all have at least made a .PK3 for the skin you're currently adding a .SHADER file too, I won't be going into depth in this section on how to do it. If you know how to compress already and you're positive of what your abilities - skip to step 7. 1. Open PakScape. 2. In another window, find your Epic_Galak.PK3 and drag it into PakScape. 3. Open your uncompressed Epic Galak folder (in your My Skinz folder) and select all the folders. You can do this by either pressing CTRL+A, clicking the first one and then holding CTRL+SHIFT and clicking the last one, or individually do step 4 for each folder. 4. Drag the folders into your opened .PK3 in PakScape. When it asks to overwrite, select "Yes To All" or "Yes", depending on which version of PakScape you're using. 5. Save your PK3. 6. Copy the PK3 with CTRL+C then navigate ot the JKA's base folder directory and paste the file (CTRL+V). 7. Open your can of Coke. 8. Open your bag of Lays Baked Barbeque Potato Chips. 9. Start JKA. 10. Select your skin in-game. 11. Enjoy seizure from skin / eat potato chips / drink Coke. *TEST VIDEO COMING SOON!!! Slow internet = horrible uploading speeds * If you're having difficulties understand / getting something to work properly - please contact me ASAP. We're all very willing to help here, and of course we're super friendly about it. Don't be afraid to ask questions either. Support on this matter is appreciated! You can reach me via this forum if you need help! Brief Lessons Lesson 1: "Public Directory" Theory Unfortunately, this isn't a theory. It's reality!! Anyways, for those of you who were confused by what I meant when I first described it - think of it like this:When a shader refers to the gfx folder, it doesn't matter what PK3 it's in. No matter which it does exist in, the shader may still refer to it. The game will read all the files and find it, provided it's in main holding tank of a PK3/folder or the base. Lesson 2: tcMod There are a lot of functions that can be used by the tcMod. The one we used is known as scroll. You may find some of the others listed below: rotate [degrees per second] scale [x] [y] These will be the more common ones, the others aren't going to be used unless under very specific conditions. Please see the "Shader Knowledge" for a full list of all Shader functions. (Above under TOOLS) Lesson 3: Glow Function Extra Notes 1. Glow's will always make part of the skin stand out no matter the level of lighting in the environment. Including pitch black. It'll always be the same level of alpha. 2. Usually if there's more than one part of the skin you want to have a glow, they can all be on the same shader (as long as they're all static - by the way, if this confuses you, don't be afraid to ask. Please!) 3. You generally want brighter colors so they come out more apparent - it doesn't have to be white. Note that the closer the color is to black, the less vibrant it'll be on the actual skin.