GUI Picture Transparency

Hello,



I created a simple loading screen for the project I am working on and I would like it to be able to fade away when loading is done.

To do so, I can simply change the transparency level of the picture over a fixed amount of time, but I’m not sure what is the best way to change the transparency.

I could override the Picture class in order to make it use a new material which has an Alpha multiplier parameter.



However, since GUI transparency is probably used a lot, I am wondering if there is a simpler way to change the transparency of an Picture attached to the GUI node.

You could use nifty. just creating a popup and display an image on it while the programm loads.

nifty itself can fade elements but it’s just the same as your way. u just need to set the alpha value for the start and the end.

might be an easier approach than overriding the picture class, setting materials and permanently redefine the alpha value.

I don’t have time to look up the details at the moment… but if it were me trying to do this, I’d look into:



Make a quad and give it the unshaded material.

Set the image as the texture for the material.

Give the material a white color with alpha at 1.

Set the texture blend mode to modulate (I think).



After that, setting the material color’s alpha should control transparency.



It’s very likely I have the details wrong but I’ve done this before myself long ago. Then again, I just stared at a “Build successful” line for 20 seconds waiting for my build to complete… so I maybe should just go to bed.

1 Like

Setting the BlendMode to Alpha should do it. Modulate multiplies the colors and alpha is not used there

funny, i actually just did this 10 minutes ago :P, not for pictures tho, but should work none-the-less.

https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:materials_overview#transparency



Something like this:

[java]Picture p = new Picture(…);

Material mat = p.getMaterial().clone();

mat.setColor("Color", new ColorRGBA(1,0,0,0.5f)); // Red with 50% transparency

mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);

p.setMaterial(mat);

[/java]



On a side note, is it possible to introduce ColourRGBA which is an alias of ColorRGBA?:P, wxWidgets employs this. not all of us are american :frowning:

Momoko_Fan said:
Setting the BlendMode to Alpha should do it. Modulate multiplies the colors and alpha is not used there


And that will change the overall transparency of the entire picture? ie: if you had an opaque picture of a horse then you can set a color with 0.5 alpha to make the horse 50% opaque?

My understanding is that the original poster wants to fade out the entire image like nifty does with screen transitions.

I thought modulate multiplied all four color values... thus alpha would be included. But maybe there is some magic in Picture's material that I don't understand.
Momoko_Fan said:
Setting the BlendMode to Alpha should do it. Modulate multiplies the colors and alpha is not used there

wezrule said:
funny, i actually just did this 10 minutes ago :P, not for pictures tho, but should work none-the-less.
https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:materials_overview#transparency
Something like this:
[java]Picture p = new Picture(....);
Material mat = p.getMaterial().clone();
mat.setColor("Color", new ColorRGBA(1,0,0,0.5f)); // Red with 50% transparency
mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);
p.setMaterial(mat);
[/java]

This worked very well, using a white background color and progressively changing the color's alpha allowed me to obtain the desired effect.
Thanks!
pspeed said:
And that will change the overall transparency of the entire picture? ie: if you had an opaque picture of a horse then you can set a color with 0.5 alpha to make the horse 50% opaque?

Yes. The equation for alpha blending is "(1 - srcAlpha) * dstColor + srcAlpha * srcColor", if dstColor is black and alpha is 0.5, then the result will be "srcColor * 0.5"

pspeed said:
I thought modulate multiplied all four color values... thus alpha would be included. But maybe there is some magic in Picture's material that I don't understand.

Modulate's equation is "srcColor * dstColor" and it includes alpha. Since alpha buffer is not used in jME3, then the alpha result is discarded. If using the example I gave above then the result will be black since dstColor is black
Momoko_Fan said:
Yes. The equation for alpha blending is "(1 - srcAlpha) * dstColor + srcAlpha * srcColor", if dstColor is black and alpha is 0.5, then the result will be "srcColor * 0.5"


Yes, I understand how alpha works when blending with the background color of the scene. I just didn't realize that the material that Picture uses blends Color with the Picture's image this way. I'd remembered the picture image being a sort of alpha'd decal over the background color but in retrospect that makes no sense... since it's just using Unshaded and unshaded would mix them.