+3 votes

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

enter image description here

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?

in Engine by (1,570 points)

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.

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

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

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

@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, 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.

Thanks for sharing.

2 Answers

+1 vote

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: https://github.com/libgdx/libgdx/wiki/Hiero

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

enter image description here

by (16 points)

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.

Thanks for the information.

+3 votes

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

by (438 points)
edited by
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.