Text transparent you will be ... YES, but depending on the angle of the camera you will be :( (too)

Troubleshooting graphics
1

Hello everybody,

I have a strange thing here :

I use a text, and of course, I want the backroung to be transparent.

So I am doing this (name is a string) :



[java]// text

BitmapFont guiFont = assetManager.loadFont(“Interface/Fonts/Default.fnt”);

BitmapText playerNameText = new BitmapText(guiFont, true);

playerNameText.setSize(FONT_SIZE);

playerNameText.setText(name);

playerNameText.setLocalTranslation(-playerNameText.getLineWidth()/2, playerNameText.getLineHeight()+2, 0);

playerNameText.setQueueBucket(Bucket.Transparent);

nodeLife.attachChild(playerNameText);[/java]



this is working, and I add a background behind, that uses a box, and a texture transprent too:

[java]Box boxParchemin = new Box( x+5, FONT_SIZE *2 , 0.1f);

Geometry imageParchemin = new Geometry(“parchemin”, boxParchemin);

Material matParchemin = new Material(assetManager, “Common/MatDefs/Misc/Unshaded.j3md”);

Texture texParchemin = assetManager.loadTexture(“Textures/entities/parchemin.png”);

matParchemin.setTexture(“ColorMap”, texParchemin);

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

imageParchemin.setMaterial(matParchemin);

imageParchemin.setQueueBucket(Bucket.Transparent);

imageParchemin.setLocalTranslation(0, 2, -3);

nodeLife.attachChild(imageParchemin);[/java]



And it works … almost … because when I change the angle of the camera I have this :

Yes it sucks ...1731×670


As you can see on the picture, for an angle that makes the text looking little from the side, we can see behind the parchemin box => we can see the texture of the skybox …



Any idea about something wrong?

I have to do something equivalent to setBlendMode(BlendMode.Alpha) for text?

And why it works partially depending on the angle?

2

My quick guess… both the text and the thing behind it are in the transparent bucket. When looking at an angle then they get sorted differently since the background is closer to the camera, it gets drawn last but the text has already filled the Z buffer at that location.



There aren’t too many good options for resolving this, unfortunately.

3

ok but thanks to your reply, I think I will have a way to fix it:



I will create rectangles (quad) where the middle of the label is opaque (red zone) and the border will be transparent. As the text transparency should never overlap on the red zone (transparent as well) it should solve the problem.

like this :



And moreover, it will allow me to make a more dynamic size for the label.



Thanks for your help pspeed!