Half Shader Help?

The_Duskitty

Basically I have some fonts i want to have half shaded based on the Mockup i did i have no idea if i would use shaders or what but it's frustraiting me to death if anybody could help that would be great Here's what i mean by "Half Shaded" [img width=615 height=552]http://i.imgur.com/IgPw4C1.png[/img]Thanks for the Help If i get any ^{^;}

Megalomaniak

Even with the example I'm not exactly clear on what you want...Do you mean you want the half-shading to be changing dynamically?

The_Duskitty

[quote author=Megalomaniak link=topic=15474.msg16098#msg16098 date=1462333247]Even with the example I'm not exactly clear on what you want...Do you mean you want the half-shading to be changing dynamically?[/quote]Well think of it like this, I have The base colour, (Being the darker red) and the text is all in a label, and i was wondering if it would be possible with shaders to make it so i can do the half thing (Because the text is going to be like, typed out as it's shown, ) But i dont know if that would be possible or not

Megalomaniak

Considering how the fonts seem to all be textures in godot, I'm inclined to say it should or at least very well might be indeed possible, however I haven't yet tested. Certainly interesting for shiny UI purposes, though!Then again, why else would it feature a material override in the inspector, right? :)

The_Duskitty

[quote author=Megalomaniak link=topic=15474.msg16119#msg16119 date=1462396677]Considering how the fonts seem to all be textures in godot, I'm inclined to say it should or at least very well might be indeed possible, however I haven't yet tested. Certainly interesting for shiny UI purposes, though!Then again, why else would it feature a material override in the inspector, right? :)[/quote]Im not quite seeing this "Material Override" thing in the Inspector? Nor would i know how to use it, keep in mind this is a 2D game as well, and i dont quite know how shaders work, but if you could point me in the right direction that would help, Thanks

BinaryOrange

Since this discussion is about shaders, I went ahead and moved it to the Shaders category of the forum. Please make sure you post in the appropriate categories, as it keeps things neat and tidy, and also increases your chances of clearer responses.

Ross

I don't know anything about using fonts and stuff, but to make a gradient shader like that, just plug the UV y coordinates in somewhere. For example: [img width=407 height=437]http://godotdevelopers.org/index.php?action=dlattach;topic=15474.0;attach=2213[/img]

Megalomaniak

[quote author=The_Duskitty link=topic=15474.msg16120#msg16120 date=1462399972]Im not quite seeing this "Material Override" thing in the Inspector?[/quote]Well 2D items such as Label extend from CanvasItem:[center][img width=212 height=253]https://picload.org/image/rgaidwwo/canvasitem.png[/img][/center][quote author=Ross link=topic=15474.msg16126#msg16126 date=1462448450]I don't know anything about using fonts and stuff, but to make a gradient shader like that, just plug the UV y coordinates in somewhere. For example: [img width=407 height=437]http://godotdevelopers.org/index.php?action=dlattach;topic=15474.0;attach=2213[/img][/quote]Now Ross gave some good advice as well, I would only add that from Ross's example you get a gradient, that effectively gives you a direction from which the 'highlight' is blending from. To invert it just subtract the result from 1. To change the smooth blend into a hard edged one use lerp(linear interpolation) and clamping. Finally, you blend the highlight over the texture, typically by multiplying(if its a shadow) over the texture, otherwise addition might work better(if highlight).And learning to use shaders, be it through shader language or shaderGraph is well worth the effort, so at this point I'm tempted not to build the whole example for you, since this should be a fairly simple shader, and a great learning experience!And don't forget to get back to us here in this thread, I already anticipate you will want to ask about UV's(scaling & transforming) next...

Ross

Ah, haha, yeah maybe I should have elaborated more, thanks Megalomaniak. Shaders are awesome, you can do just about anything with them. Cool fire and other effects, refraction, linear or radial value bars, animated texture blends or emissive maps, changing sprites to show team colors, etc. If you're just doing pixel art stuff you may not use them so much, but they're still worth learning about I'd say. The docs give a brief intro: http://docs.godotengine.org/en/latest/tutorials/3d/shader_materials.html I recommend writing text shaders, mostly since the shader node graph is a pain in the butt to navigate, you can't copy-paste, etc. However the node graph is probably easier to get started with if you're unfamiliar with shaders. Once you get the hang of it, any Unreal 4 material or ShaderForge tutorial will easily translate to Godot too. Here's the doc page for the shader language: http://docs.godotengine.org/en/latest/reference/shading_language.html#material-fragmentshader If you decide to use it, just pay attention in the "Built-in Variables" section, make sure you're looking at the 2D shader stuff.

The_Duskitty

[quote author=Ross link=topic=15474.msg16126#msg16126 date=1462448450]I don't know anything about using fonts and stuff, but to make a gradient shader like that, just plug the UV y coordinates in somewhere. For example: [img width=407 height=437]http://godotdevelopers.org/index.php?action=dlattach;topic=15474.0;attach=2213[/img][/quote]Having read all of this...Im more confused than when i started being "How do i even get the UV Gradient to show up" or "What exactly do i need to do to get to this point" and ive looked at the documentation and the tutorials for the shaders stuff and i just dont seem to understand what im looking at, and i looked at mega's tutorial on here has, but that just left me with some broken text that was partially what i wanted but the rest was all deformed/black, so i dont know what to do, im probably getting to be tedious at this point, but it's frustraiting the hell out of me cause it seems when i use the node thing it only takes the top left corner pixel's colour and nothing else, so i kinda just give up, i'll mess around with it for a while and see what i can do i guess, thanks for trying to help though

Megalomaniak

[quote author=The_Duskitty link=topic=15474.msg16147#msg16147 date=1462490044]and i looked at mega's tutorial on here has, but that just left me with some broken text that was partially what i wanted but the rest was all deformed/black, [/quote]I'm assuming it looks broken as in about half(or more) of the text is not visible(top half or bottom). in which case its going as I suspected it will. You need 2 colors 1 would be the solid base color the other the shading you multiply/add over. I suspect the missing/invisible text results from you only rendering the highlight... I can't be sure though since I haven't seen your result. Take screenshots so we too can see your results. :)Lets get those 2 colors working and mixing/blending right then deal with getting the shading to happen per-line. 1 step at a time is a good pace.[quote author=The_Duskitty link=topic=15474.msg16147#msg16147 date=1462490044]but it's frustrating the hell out of me[/quote]Yeah, from my personal experience that's how it goes, you start out real frustrated, but as you keep learning it starts clicking more and more. Until it all makes sense.

The_Duskitty

I have no idea how UV's work, i would assume they're just a map of what's shown on the screen at the time >Screenshot 16<, But When i try to apply a texture that's just basically that texture shown up, it sorta messes it up, (Mind i only have the alpha on to show the individual areas), So i dont know what to do, Would you like me to supply the current part of my project , or would that not really be helpful?

Megalomaniak

hmm, yeah that texture preview looks all wrong somehow. The uv is the texture coordinates. 0 to 1 along each axis, using vector multiply and multiplying by 2 both x and y would get you(with texture repeat on) the texture tiled 2 times over the element surface. If you want to work in screenspace use screen UV.also, since you aren't modifying the alpha you don't need to plug it to the result/output there.Supplying the project always helps. However if there's something you feel proprietorially defensive over perhaps you can just build a simpler example that shows the same issues.In the mean while I wonder what happens if you add a vector math node, set it to multiply, then plug from input node the color into the first input on the vector math node and the output of that texture into the second, then plug vector maths output to color.

The_Duskitty

Well then >.> Mega told me about the text gradient importer thing.... I feel like an idiot now because i didnt know that, but i'd like to continue this post for those who want to try the same thing, cause i have a very little understanding of shaders, and it would probably help to learn about complex things like them

Megalomaniak

[quote author=The_Duskitty link=topic=15474.msg16188#msg16188 date=1462818631]Well then >.> Mega told me about the text gradient importer thing.... I feel like an idiot now because i didnt know that[/quote]Don't sweat it, I was only aware of it because importing a font was literally the first thing I tried to do when I started using godot, and I ran into a problem with it so ended up spending time messing with it quite a lot(the actual issue was a bug not specifically related to fonts it turned out[relative paths on windows]).I would have suggested using the importer from the start had I not thought you had a specific reason for wanting to use shaders for it.I do however suggest using something even simpler as an exercise to start learning shaders now that I know you don't have a specific reason for using shaders on the fonts. TextureSprite(non animated, keep it simple) for an example, since they are essentially just textures.And again, if you have issues take screenshots and post them here for us to see too. Helps figure out what might be going wrong.edit: I mean don't get me wrong, we can come back to this too, however perhaps start off with the same previously mentioned exercise applied to a clearer example first.