How to add gradient color to fonts?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Diet Estus

I am interested in adding a gradient color to my fonts, similar to what you see in the following image from Metal Slug.

Notice how the fonts in the HUD have nice gradient coloring.

Ideally, I’d like to do this in such a way that I can easily adjust the colors on the fly.

Currently, my font is a ttf that I use in a DynamicFont. I use the font in Buttons and Labels all over my game.

Any ideas how to achieve this effect?

There may be a way to do this. You may be able to set the font to a certain color, and then add a canvas above that which has a rainbow effect on it. Then all you need to do is set the blending of the canvas layer such that it blends with the font below it. You could use a CanvasLayer and change its Image properties. And if you can’t do that, then you may be able to do it with a shader.

Ertain | 2018-10-17 07:08

I was hoping for a more elegant solution, but I’ll try with a shader and write up a solution if I find one.

Diet Estus | 2018-10-18 23:44

Sorry I couldn’t think up a better way. :-/

Ertain | 2018-10-19 00:34

I’m curious if you ended up finding a solution to this?

Maaack | 2020-10-03 17:00

@Maaack, unfortunately no, never managed to figure it out, so I ended up just using plain white font in my game, Primal Light XD

Please update this thread if you figure anything out!

Diet Estus | 2020-10-03 18:30

@Diet_Estus, thanks for the reply. My approach was to rasterize my text into sprites, align them over the dynamic font (to preserve the outline effect), and apply a shader over them. I’m only doing this for a title screen, because that process will not scale well.

Maaack | 2020-10-06 19:35

Thanks for sharing.

Ertain | 2020-10-06 19:47

:bust_in_silhouette: Reply From: shahediqbal13

I tried to use shader with dynamic font but didn’t work as expected. Then I have used bitmap font and able to add gradient and shadow which fulfills my requirement. But I am not sure that this gradient value can be changed on the fly.

I have used a tool from libgdx game framework.
Link of the tool: Home · libgdx/libgdx Wiki · GitHub

Note: This tool saves font file in Angel Code font format which is compatible with Godot.

But I am not sure that this gradient value can be changed on the fly.

You can’t adjust the gradient on the fly, but you can still change the font color on the fly in Label/RichTextLabel nodes using the Custom Colors section or the Self Modulate property.

Calinou | 2021-08-04 22:23

Thanks for the information.

shahediqbal13 | 2021-08-05 05:15

:bust_in_silhouette: Reply From: vnmk8

make a label and create a new CanvasItemMaterial for it, set it’s light mode to light only. add a light2D and in the light texture property create a New GradientTexture, in gradient NewGradient. the good thing about this is you can adjust the gradient colors inside godot with code and in the editor.
you need to expand the gradient bounds because godot shows a flat line when it’s created and i had to rotate the light to look like the Metal Slug example above,
hope this helps.
enter image description here

Is this still posible in Godot 3.5?, i did try it, but im just getting the canvas square with the gradient, no text at all :frowning:

GinoSC | 2023-01-11 14:43

I just tested it works fine, if the text disappears is usually because you added a Dynamic font to the Label and you need to add a Font Data.

vnmk8 | 2023-01-11 20:07

still doesn’t work, i tried with and without a dynamic font (with font data), and it’s the same, no text :frowning:

GinoSC | 2023-01-12 00:32

Then I don’t know what your problem is cause is working fine for me

vnmk8 | 2023-01-12 00:44

Hey - Necro replay but i had the same issue. Once i changed the Layer Min/Max setting on the Light2D setting it worked - i also changed the Item Cull Mask/Light Mask on both the label and Light2D so it didnt light up my texture behind the label, but i guess i could do the same with setting the min layer it effects :man_shrugging: . Hope this helps

what do you need now in godot 4+ is just:
put the texture rect position on where the label is:

but most importantly is to set the Label’s Clip Children to:
and you have it