Author Topic: Updated 9/16/16 Material Coding for Beginners! Glow, metal, transparent, more!  (Read 143730 times)

Offline WhiteLightHeart

  • iTrumpet~<3
  • Elder Grey Pelt
  • ****
  • Posts: 2,845
  • Country: us
  • Floof-O-Meter: 230
  • Seems legit
    • WhiteLightHeart
    • View Profile
Anytime, floof<3 You're a wonderful teacher. ^.^
|| ~Avatar by Kikiorylandia, Sig commissioned by Wolf_Memories~ ||
|| Thank you. <3 ||

Offline Ruby1234

  • Mean Tutorial Queen
  • Elder Grey Pelt
  • ****
  • Posts: 2,794
  • Country: us
  • Floof-O-Meter: 297
  • aka Phloxenfree.
    • View Profile
Transparent && Semi-Transparent
« Reply #61 on: April 04, 2013, 03:07:19 pm »
EDIT January 31st, 2022: This tutorial is being updated and moved to Google! Please refer to the new version wherever possible, as it has better optimisation & overall clarity.
https://docs.google.com/document/d/1otpZc7OyhgXwbK8KPFEl4ogVCACvSptYVBNI-uuFdac/edit?usp=sharing


Transparent
-Oh, the wonders of making body parts disappear!

Start with your preset/object.

(This is preset 2 for the purpose of this tutorial, but I repeat, IT'S NOT MINE. Kay? Kay. c:)

Now, all you do is open your preset in Photoshop or GIMP, like you would any other time.
But this time, we need to make sure you have an alpha channel of transparency enabled. To do this, simply go to Layers >> Transparency >> Add Alpha Channel, like so for GIMP;

Fullsize Image
If the option is not available, it usually means you already have it enabled, so you should be all good!
Now just erase the part(s) you want to be gone. I'm going to erase the midsection.

Now, and this is important, save your image, AS A .PNG. Why, you might ask? First of all, I always use .png just because .jpg doesn't always look as well on presets, but second, .jpg DOES NOT support transparency. And look at that, we just used transparency! So guess what, we need a .png. c:
Once you've saved as a .png, open your material code, which should look something like this as default;
Code: [Select]
material preset_#_bodyMatL
{
technique
{
pass
{
texture_unit
{
texture preset_#body.jpg
}
}
}
}
material preset_#_bodyMatR
{
technique
{
pass
{
texture_unit
{
texture preset_#body.jpg
}
}
}
}
material preset_#_headMatL
{
technique
{
pass
{
texture_unit
{
texture preset_#head.jpg
}
}
}
}
material preset_#_headMatR
{
technique
{
pass
{
texture_unit
{
texture preset_#head.jpg
}
}
}
}
material preset_#_eyeMatL
{
technique
{
pass
{
cull_hardware none
cull_software none
texture_unit
{
texture preset_#eye.jpg
}
}
}
}
material preset_#_eyeMatR
{
technique
{
pass
{
cull_hardware none
cull_software none
texture_unit
{
texture preset_#eye.jpg
}
}
}
}
material preset_#_tailMat
{
technique
{
pass
{
texture_unit
{
texture preset_#tail.jpg
}
}
}
}
material preset_#_maneMat
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#mane.png
}
}
}
}
Now, you need to change whatever part is using transparency to .png instead of .jpg, but for me, all my stuff is in .png anyway, so I'm going to go ahead and switch it all.
Code: [Select]
material preset_#_bodyMatL
{
technique
{
pass
{
texture_unit
{
texture preset_#body.png
}
}
}
}
material preset_#_bodyMatR
{
technique
{
pass
{
texture_unit
{
texture preset_#body.png
}
}
}
}
material preset_#_headMatL
{
technique
{
pass
{
texture_unit
{
texture preset_#head.png
}
}
}
}
material preset_#_headMatR
{
technique
{
pass
{
texture_unit
{
texture preset_#head.png
}
}
}
}
material preset_#_eyeMatL
{
technique
{
pass
{
cull_hardware none
cull_software none
texture_unit
{
texture preset_#eye.png
}
}
}
}
material preset_#_eyeMatR
{
technique
{
pass
{
cull_hardware none
cull_software none
texture_unit
{
texture preset_#eye.png
}
}
}
}
material preset_#_tailMat
{
technique
{
pass
{
texture_unit
{
texture preset_#tail.png
}
}
}
}
material preset_#_maneMat
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#mane.png
}
}
}
}
Now, before we save and test, we should make sure that we have the actual transparency code in there, which is this simple line;
alpha_rejection greater_equal 128
which gets placed above all the texture_unit lines. Or at least all the ones you're using transparency on.
So, you can do that manually if you're only doing a few body parts, but if you're doing them all, then take it from me;
Code: [Select]
material preset_#_bodyMatL
{
technique
{
pass
{
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#body.png
}
}
}
}
material preset_#_bodyMatR
{
technique
{
pass
{
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#body.png
}
}
}
}
material preset_#_headMatL
{
technique
{
pass
{
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#head.png
}
}
}
}
material preset_#_headMatR
{
technique
{
pass
{
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#head.png
}
}
}
}
material preset_#_eyeMatL
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#eye.png
}
}
}
}
material preset_#_eyeMatR
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#eye.png
}
}
}
}
material preset_#_tailMat
{
technique
{
pass
{
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#tail.png
}
}
}
}
material preset_#_maneMat
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#mane.png
}
}
}
}
Quote from: Me
Now press Ctrl+H, or go to Edit->Replace...
And type _# in the "Find what:" section.
Then in the "Replace with:" section, put an underscore:
_
and then put your preset's actual number after that. Then click Replace all.
^ Only if you're using the code I just gave you, because I use # signs in it where your actual preset's number should be.
So since I'm using preset 2, this is what I'd be doing;

But you'd be using whatever number preset you're doing.

Now, make sure you SAVE your material file, then go ahead and close it. Once we take a look ingame, you should have something like this! - Eep!

Have fun with it!

-

Semi-Transparent
-Similar to the Ghost code, but not quite as glowy, and it actually uses transparency, instead of giving the feel of it.

Start with this guy again.
But this time, we're going to make him slightly see-through. To do this, we are going to open the textures, and change the opacity. It is completely up to you what you do with the opacity. But as said above, we are going to make sure we have an alpha channel for transparency, like so;

Fullsize Image
And then we are going to change the opacity. Like so;

Fullsize Image
Now we save as a .png. Yes, it MUST BE a .png, kay? Kay. c:
After we've saved all of that, (and by "all of that" I mean, go through and do it to all the parts you want to be see through. You can experiment with just using the eraser tool at a lower opacity to do this just for markings.) open your material file. Replace the current code with this one;
Code: [Select]
material preset_#_bodyMatL
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#body.png
}
}
}
}
material preset_#_bodyMatR
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#body.png
}
}
}
}
material preset_#_headMatL
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#head.png
}
}
}
}
material preset_#_headMatR
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#head.png
}
}
}
}
material preset_#_eyeMatL
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#eye.png
}
}
}
}
material preset_#_eyeMatR
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#eye.png
}
}
}
}
material preset_#_tailMat
{
technique
{
pass
{
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#tail.png
}
}
}
}
material preset_#_maneMat
{
technique
{
pass
{
cull_hardware none
cull_software none
depth_check on
depth_write off
scene_blend alpha_blend
texture_unit
{
texture preset_#mane.png
}
}
}
}
Then
Quote from: Me
Now press Ctrl+H, or go to Edit->Replace...
And type _# in the "Find what:" section.
Then in the "Replace with:" section, put an underscore:
_
and then put your preset's actual number after that. Then click Replace all.
So you should be doing something like this;

But you probably aren't using preset 2, so it'd be whatever number you're using.
Now, SAVE your material file, then you may close it, or leave it open, whatever floats your boat, and lets go take a look in-game.

It's certainly.. different, right?
Haha, obviously this code works better for just markings, or objects, but hey, I believe you guys can make it work!
Good luck!
« Last Edit: February 03, 2022, 09:55:52 am by Ruby1234 »

Offline Ruby1234

  • Mean Tutorial Queen
  • Elder Grey Pelt
  • ****
  • Posts: 2,794
  • Country: us
  • Floof-O-Meter: 297
  • aka Phloxenfree.
    • View Profile
Updated with some code fixes. c:

Offline Silver-Scratch

  • Experienced Traveler
  • **
  • Posts: 119
  • Floof-O-Meter: 6
  • 3 Easy Payments of $19.99...
    • View Profile
Absolutely flawless tutorials! These helped a lot, thank you.
...Plus Shipping and Handling. | in-game user: silver-scratch

Art by Kikiorylandia! <3

Offline Ruby1234

  • Mean Tutorial Queen
  • Elder Grey Pelt
  • ****
  • Posts: 2,794
  • Country: us
  • Floof-O-Meter: 297
  • aka Phloxenfree.
    • View Profile
Absolutely flawless tutorials! These helped a lot, thank you.
Aaa, thanksss. ;u;

Sir Equius

  • Guest
I had a question regarding the scrolling markings on presets. if I wanted the scrolling to be vertical, instead of scrolling horizontally like in your demonstration, what would I need to do with the coding?

Offline Ruby1234

  • Mean Tutorial Queen
  • Elder Grey Pelt
  • ****
  • Posts: 2,794
  • Country: us
  • Floof-O-Meter: 297
  • aka Phloxenfree.
    • View Profile
Tutorial: Glowing Markings
« Reply #66 on: October 12, 2013, 03:21:16 am »
EDIT January 31st, 2022: This tutorial is being updated and moved to Google! Please refer to the new version wherever possible, as it has better optimisation & overall clarity.
https://docs.google.com/document/d/1otpZc7OyhgXwbK8KPFEl4ogVCACvSptYVBNI-uuFdac/edit?usp=sharing


Glowing Markings
-Because you all asked.

Once again, I shall ask you to start with a preset. If you haven't one already, make one before following this tutorial.



(Preset 2 is being used for the purpose of this tutorial, as it is easy to recognize, but you'll need your own.)

The basic code for every preset is set at a default of something like this;
Code: [Select]
material preset_#_bodyMatL
{
technique
{
pass
{
texture_unit
{
texture preset_#body.jpg
}
}
}
}
material preset_#_bodyMatR
{
technique
{
pass
{
texture_unit
{
texture preset_#body.jpg
}
}
}
}
material preset_#_headMatL
{
technique
{
pass
{
texture_unit
{
texture preset_#head.jpg
}
}
}
}
material preset_#_headMatR
{
technique
{
pass
{
texture_unit
{
texture preset_#head.jpg
}
}
}
}
material preset_#_eyeMatL
{
technique
{
pass
{
cull_hardware none
cull_software none
texture_unit
{
texture preset_#eye.jpg
}
}
}
}
material preset_#_eyeMatR
{
technique
{
pass
{
cull_hardware none
cull_software none
texture_unit
{
texture preset_#eye.jpg
}
}
}
}
material preset_#_tailMat
{
technique
{
pass
{
texture_unit
{
texture preset_#tail.jpg
}
}
}
}
material preset_#_maneMat
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#mane.png
}
}
}
}

(This has the mane fix applied, which you'll need if you plane to make a mane other than the Fluffy Mane.)

Now, you'll need to make a transparent texture to go over the top of your preset's other texture. This will be glowing marks area. And it needs to be a format that supports transparency, I use .png.
For example;
this texture is the body base texture;


and this is a texture I've made to be the glowing marks on top of the other texture;

(really basic 'cause I'm lazy)

Now all we need to do is layer this onto the preset, from the coding.
There are two things I'm going to change here.
First, the way the bodypart reacts to the light, making it more sensitive, and second, making the actual markings glow.

The first part is easy, for all we need to add to the code is the ambient code, which I set usually at 0.5 for each value, so it's not overwhelming;
ambient 0.5 0.5 0.5 1
would go above the texture_unit line.
Then we need to create a second pass to be able to separate the effects, add a scene blend, and then the emissive code, which controls the glow. Normally I set it to
emissive 1.0 1.0 1.0 1
for full effect.

Overall, your code at the end should be like this;
Code: [Select]
material preset_#_bodyMatL
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#body.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#bodyglow.png
}
}
}
}
material preset_#_bodyMatR
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#body.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#bodyglow.png
}
}
}
}
material preset_#_headMatL
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#head.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#headglow.png
}
}
}
}
material preset_#_headMatR
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#head.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#headglow.png
}
}
}
}
material preset_#_eyeMatL
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#eye.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#eyeglow.png
}
}
}
}
material preset_#_eyeMatR
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#eye.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#eyeglow.png
}
}
}
}
material preset_#_tailMat
{
technique
{
pass
{
ambient 0.5 0.5 0.5 1.0
texture_unit
{
texture preset_#tail.jpg
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#tailglow.png
}
}
}
}
material preset_#_maneMat
{
technique
{
pass
{
cull_hardware none
cull_software none
alpha_rejection greater_equal 128
texture_unit
{
texture preset_#mane.png
}
}
pass
{
emissive 1.0 1.0 1.0 1.0
scene_blend alpha_blend
texture_unit
{
texture preset_#maneglow.png
}
}
}
}
(If you choose to copy/paste my code from above, you'll need to press Ctrl + H in notepad to bring up the replace menu, then have it replace
_#
with an underscore;
_
and then whatever number your preset is, for me it would be _2.)

You should end up with something like this;



You can see where the ambient makes the body react differently to light, and how the markings stay their constant color.
Though you may need to do some adjusting to get it how you want it.
Feel free to message me if you have any more questions.
Hope this helped, have a good one.
-Ruby
« Last Edit: February 03, 2022, 09:55:59 am by Ruby1234 »

Offline OreoHeroz

  • Taco-Hat
  • Elder Grey Pelt
  • ****
  • Posts: 3,225
  • Country: 00
  • Floof-O-Meter: 142
    • View Profile
- flails - Thank you very much for this guide, Ruby! I've been wondering how to do those things, and here's my answer c: +floof for all your work and help

Offline Ruby1234

  • Mean Tutorial Queen
  • Elder Grey Pelt
  • ****
  • Posts: 2,794
  • Country: us
  • Floof-O-Meter: 297
  • aka Phloxenfree.
    • View Profile
You are welcome, my dear!~
And thanks for the floof.?

Offline Emberflame

  • Ancient Silver Mane
  • *****
  • Posts: 3,636
  • Country: 00
  • Floof-O-Meter: 27
    • WatcherMagic
    • View Profile
these are awesome, thx! :) +floof one question, is there anyway to combine the scroll and ghost codes to make a ghostly scrolling preset?
« Last Edit: October 16, 2013, 07:43:12 pm by Firespirit »