0
\$\begingroup\$

I am trying to design some UI elements using shader graph. In this case specifically a lifebar that is transparent where empty.

For a normal lifebar with a filled and empty color I got it working without much issue. I created my shader using an unlit model, and set it to a material. I set the material on a raw image, and then added it to a canvas.

Now I want to create a lifebar with transparency. It i make the shader transparent, I just get a black box. If i make it opaque i can see the shader, but the transparent (alpha blended) sections of the image are just black. I cannot find any settings to fix this. She shader looks fine outside of UI with the transparency working.

Is there a way to make raw images on a shadergraph shader support transparency even if it is just yes/no per pixel transparency?
Is a raw image the correct way to use a shader on UI?

\$\endgroup\$
0
\$\begingroup\$

You're looking for Alpha Cutoff

Or alpha test.

There are some builtin shaders that do this, but the general idea is to check the alpha value of the texture (which goes from 0% to 100% from one side to the other) and compare that value with a float property (driven by your player's HP). If it's less, output 0. If it's more, output 1.

It tends to leave a jagged edge, though, which is one of the reasons I created these shaders a number of years ago. It treats that boundary a little more fuzzily so that any imperfections in the texture are blurred out, as well as allowing for edges that aren't completely hard. I tend to get the best results with a blend value of about 0.02; small enough that some blurring occurs, but not so strongly that the data precision (i.e. the readability of the graphic) is lost. $2 asset is $2 because that's the lowest non-free price and anyone with understanding of HSLS can create the included shaders themselves in about an hour.

I'm not sure how ShaderGraph would handle this, if there's already a builtin function for it (I'd be surprised if there wasn't), but creating it manually with a few nodes should be easy enough now that you know what the process is.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.