I want to create a “gradual colour change” effect in Godot.

eg: some_set_font_color_func(Color8(255,n,n) where n gradually decreases to make the text fade from white to red.

I can’t figure out what function I would use in place of some_set_font_color_func to change a font’s colour.

Godot themes are somewhat confusing. Given some var var UI:control how would I set the colour of any font(s) contained within that node?

  • popcar2@programming.dev
    link
    fedilink
    arrow-up
    7
    ·
    9 months ago

    Godot 4 released this year so most of what ChatGPT is spitting out is Godot 3 code which is usually not compatible. That is if it doesn’t just give you complete nonsense. I wouldn’t recommend using it much.

    What you’re looking for is a Tween. This can slowly change one value to another, and you can use it for colors. Something like:

    var tween: Tween = create_tween()
    tween.tween_property($RichTextLabel, "modulate", Color.BLUE, 1)
    

    This will change the label’s color from what it is now to blue over the course of one second. You can mess around with set_ease() and set_trans() to make the effect smoother if you need to.

  • Mac@programming.dev
    link
    fedilink
    arrow-up
    2
    ·
    edit-2
    9 months ago

    You can edit font colors from the theme, theme override or by using modulate

    Theres a function called set_color in the theme

    docs: https://docs.godotengine.org/en/stable/classes/class_theme.html#class-theme-method-set-color

    Canvas items have a modulate property that can be set to a new color to tint the element

    docs: https://docs.godotengine.org/en/stable/classes/class_canvasitem.html#class-canvasitem-property-modulate

    For this I would do the modulate route

  • s12@sopuli.xyzOP
    link
    fedilink
    arrow-up
    1
    arrow-down
    2
    ·
    9 months ago

    Tried copying this post into chatGPT:

    In Godot, you can achieve a gradual color change effect for a font by using the modulate property of the ColorRect or NinePatchRect (used in Control nodes) that contains the Label node. This property allows you to multiply the color of the node and its children, providing a way to create a color tint.

    Here’s an example of how you could achieve the gradual color change effect using a Label node within a Control node:

    extends Control
    
    var label: Label
    var color_change_speed: float = 1.0
    var current_color: Color = Color(1, 1, 1, 1)  # Initial color (white)
    
    func _ready():
        label = $Label  # Assuming your Label node is named "Label"
        label.modulate = current_color
        # Call a function to start the gradual color change
        start_color_change()
    
    func start_color_change():
        # Schedule a function to be called every frame
        # The function `_process(delta)` will be called continuously
        set_process(true)
    
    func _process(delta):
        # Gradually decrease the red component of the color
        current_color.r -= color_change_speed * delta
        # Set the modified color to the label
        label.modulate = current_color
    
        # Check if the red component has reached a certain threshold (e.g., 0)
        if current_color.r <= 0:
            # Stop the color change
            set_process(false)
    

    In this example, the _ready function sets up the initial state, and the start_color_change function initiates the gradual color change by enabling the _process function. The _process function is then called continuously, updating the label’s color each frame.

    Adjust the color_change_speed variable to control the speed of the color change. You can modify this example to suit your specific requirements.

    Helpful or counterproductive? I’ll give it a try later.