How to render labels whitout mixing the colors with the background

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Pikmaan
:warning: Old Version Published before Godot 3 was released.

Hi guys. I’m Implementing a game in which dialogs among characters are showed upon their heads. I put a label inside the character node so it follows him around and shows the text each time he has to speak. The problem Is that label mixes with background rendering, Lighs2D nodes and CanvasModulate nodes, whatever blend mode i use. I tried to use CanvasLayer but two different layers have 2 different transformations and this is not good because the label has to follow the character and I cant put them in two different layers. Is there a way to solve the problem? I saw that most people use fixed panels on the screen to show dialogs but I don’t like this solution.

Enabling shadow as outline is not enough?
You can play with the shadow offsets too, but depends a lot on the font style too.

Also try some of the options like “disable filter” when importing the font and sometimes distance field fonts looks worse than bitmap, try different options with both types.

And change the light mask too, to prevent lights from affecting it.

eons | 2017-02-16 22:47

It’s more readable but It’is not enough. If I walk over a light, it’s rendered upon the label and the text became white (the color of the light)
I will try something with light mask…

Pikmaan | 2017-02-17 16:43

:bust_in_silhouette: Reply From: Zylann

If the problem is just that the color mix makes it hard to read text in all situations, then you could add a background to your text which is the same size as the label.

An alternative is to add an outline to your text so it becomes more readable.
One way to do this is to have 4 child labels drawn behind it with the same text, all being offset by a small amount to the left, right, up and down directions.
A better way is to use a font that has an outline already, but I’m not sure Godot supports that. Freetype can produce outlines from normal fonts when rasterizing them but Godot also doesn’t uses that feature AFAIK…

I already tried to add a background (even if i don’t like it so much) but it doesn’t work because lights2D and CanvasModulate nodes still affect the label color. Anyway it is more readable so i decided to give it a try.
The problem is that the label text is dinamic and I ended up having the same background dimensions for 2 lines of text or 10 lines of text and this is not good. I tried to adjust the background dimensions according to the text length… for example to compute the background height i used the formula below:

(get_line_height()+get_constant("line_spacing")) * get_line_count()

the problem here is that if you use line_wrapping, the function “get_line_count” will always return 1 and you cannot compute the height.
Maybe i will try with outlines and I’m sure the text will be more readable but this will not solve the problem.

Pikmaan | 2017-02-16 15:45

:bust_in_silhouette: Reply From: Pikmaan

I solved by changing the light mask as eons suggests in the comments. I set the label blend mode to “mix” and also I added a light affecting only the text so it can be as bright as possible reguardless the background. Of course, as I said in the comments, outlines helps a lot but light mask did the trick.

thank you all :slight_smile: