Search code examples
godotgdscript

How can I add color to elements with GDScript?

I want to ask you how I can add color to elements with GDScript, I am referring to something similar to the CSS of web development, but in this case it is for menus and buttons of the Godot project.

In my case I want to use it for the menus and buttons of the project and since I have CSS knowledge I think it would be something similar, although it is obviously not a web application.

Is it possible or is there another way?

As I see in the Godot documentation, it is possible to do something similar with code similar to this:

var blue = Color.html("#0000ff")

var green = Color.html("#0F0")

var col = Color.html("663399cc")

But I'm not sure if it will meet my expectations.

Solution

  • I'm familiar with css so I understand your point of view.

    I want to ask you how I can add color to elements with GDScript

    When you say elements I think you mean nodes, Like elements in HTML there are nodes in godot and you can change the color of these nodes through various ways:



    1. Modulate or Self Modulate on any node

    You can either do this by manually setting the value from the Inspector:

    enter image description here

    You can learn about modulate and self modulate here: modulate & self_modulate
    To put it simply, modulate is the color tint added to your node, self modulate is the same thing except it doesn't pass down to it's children.
    ( You can think of modulate as the same as this in css )

    Since u wanted it done in Gdscript, You can attach a script to the node your working with (in this case, Sprite) and add this code:

    extends Sprite

func _ready():
    self.modulate = Color("#56d333")
    # self.self_modulate = Color("#56d333")

    This won't immediately change the color like it would in css, rather when the game starts the _ready() function is invoked which assigns the color to the modulate via gdscript
    ( You can think of it like setting the color via javascript )



    2. Adding Theme (i.e. custom styling) to buttons

    With buttons it gets a little tricky, sure you could use modulate or self_modulate but that would give you something ugly & 11/10 times you're not going to want to use this:

    enter image description here

    Luckily there is another way, You can use Theme or Theme Overrides

    enter image description here

    This gives you much more fine tune control over the styling and covers your basic css equivalents like border, border-radius, color, background-color, font-family, box-shadow, etc

    & you can also set the css equivalent pseudo classes :hover in themes:

    enter image description here

    Just to show you an example of how good using theme can look:

    enter image description here

    enter image description here

    Similar to buttons, you can add themes to other widgets as well, happy exploring!

    But I'm not sure if it will meet my expectations.

    Coming from a web dev background, Godot should be good enough to cover all your basic use cases but if you want to create something really out of the box you can also look into TextureButton & how it works

    Note:
    All of what I've written was the case for godot version 3.5, the new godot 4.x should also have these features but they just might look different or be in different places so don't worry.