Background for transparent PNG (texture, image) on the guiNode and box node

Hi all,

I’m a newcoming user to JME. I was looking for a solution on the forum, but without any luck. I think i don’t know how to ask right question in jme terminology and thus nothing so far got me into solution.

I am trying to load a transparent png image and put it on the box or gui node. I want to have solid background (e.g. solid white/green etc.) and on this background i want to place the loaded image. This is because i want to distinguish the image from the background and other nodes. I’ve tried and created solution that the box (or image in gui node) is transparent but there is no background. Without creating transparent bucket for the node the texture is all black. The example code for GUI and for Box node is below. Can anyone suggest me how can i achieve this (i can’t change the source image - it has to be with transparent background).

thanks ! Slawek

[java]
userImage = new Picture(“User”);
userImage.setWidth(32);
userImage.setHeight(32);
userImage.setPosition(settings.getWidth() - 130, 10);
userImage.setImage(assetManager, “assets/pictures/user.png”, true);

guiNode.attachChild((userImage);
[/java]

The code for the transparent box:

[java]
Node buttonNode = new Node(“FUNCTION1”);
Box box = new Box(0.15f, 0.15f, 0.15f);
Geometry geometry = new Geometry(“function”, box);
Material mat = new Material(assetManager, “Common/MatDefs/Misc/Unshaded.j3md”);
mat.setColor(“Color”, ColorRGBA.Gray);
geometry.setMaterial(mat);
geometry.setLocalTranslation(loc.add(new Vector3f(0, 2.7f, 0.5f)));
buttonNode.attachChild(geometry);

newmat = new Material(assetManager, “Common/MatDefs/Misc/Unshaded.j3md”);
newmat.setColor(“Color”, ColorRGBA.Green);
newmat.setTransparent(true);
newmat.setTexture(“ColorMap”, “assets/image.png”);
newmat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);

buttonNode.getChild(0).setQueueBucket(Bucket.Translucent);
buttonNode.getChild(0).setMaterial(newmat);
supportNode.attachChild(buttonNode);
[/java]

Images:

You looking ofr alpha discard threashold by any chance?

buttonNode.getChild(0).setQueueBucket(Bucket.Transparent);

Use transparent, not translucent. It isn’t the same.

Yep, I either transparent not translucent is not working.

Basically i want a solid green Box (not translucent, transparent) with the provided sign on each side of the Box. The image has transparency and i want to use it in that way, that the solid color of the Box will be shown instead of transparency.

In that way I can show additional information with the box by different background colors.

@slawek.mikula said: Yep, I either transparent not translucent is not working.

Basically i want a solid green Box (not translucent, transparent) with the provided sign on each side of the Box. The image has transparency and i want to use it in that way, that the solid color of the Box will be shown instead of transparency.

In that way I can show additional information with the box by different background colors.

There are no default JME shaders that work this way. You would have to modify an existing shader to support this in-shader blending or write your own from scratch.

Thanks for explanation ! I’ll try to create smaller box inside the transparent one to provide such functionality. The shader modification is not for me (with my jme3 knowledge right now).

Thanks !

@slawek.mikula said: Thanks for explanation ! I'll try to create smaller box inside the transparent one to provide such functionality. The shader modification is not for me (with my jme3 knowledge right now).

Thanks !

You can reuse the same mesh and just give them a different material. On the outer material, set the additional render state’s depth test to equals. This will prevent Z-fighting with the “inner” box.