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
    8
    ·
    11 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.

    • s12OP
      link
      fedilink
      arrow-up
      1
      ·
      edit-2
      11 months ago

      Oh yeah. I’m using 3. Should have put that in my post. Updated the title.

      I know not to trust GPT output, but I thought it might be helpful to try it, find out if if it’s helpful for learning Godot, and see if the community can tell me if it’s giving me an anti-pattern or not.

  • Mac@programming.dev
    link
    fedilink
    arrow-up
    3
    ·
    edit-2
    11 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

    • s12OP
      link
      fedilink
      arrow-up
      1
      ·
      edit-2
      11 months ago

      I tried set_color, but I couldn’t get it to work. I couldn’t figure out what name and theme_type should be. I imagine name should be "font_color" after creating it in a theme. Would theme_type be like "Control" or "Label"?

      Edit: Ok. Never mind. Seems I was right. Must have had another bug.

  • s12OP
    link
    fedilink
    arrow-up
    1
    arrow-down
    2
    ·
    edit-2
    11 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.

    Update: modulate seems to be a Godot 4 function, so this won’t work for me.

    • s12OP
      link
      fedilink
      arrow-up
      1
      ·
      11 months ago

      ChatGPT doesn’t seem to be too helpful, but I tried a little more. Here’s how it went:

      Me: “Sorry. I’m using gotot 3. Label doesn’t seem to have .modulate.”

      Apologies for the confusion. In Godot 3, you can achieve the gradual color change effect by using shaders. Specifically, you can create a shader material for your Label node and manipulate the color in the shader code.

      Here’s an example of how you could achieve this:

      1. Create a new shader material for your Label node.
      2. Attach the shader material to the Label node.

      In the shader code (GDScript Shader Language), you can create a simple fragment shader that modifies the color over time. Here’s an example shader code:

      shader_type canvas_item;
      
      uniform vec4 base_color : hint_color = vec4(1.0, 1.0, 1.0, 1.0);
      uniform float color_change_speed : hint_range(0.1, 5.0) = 1.0;
      
      void fragment() {
          // Calculate the time-based color change
          float time = mod(TIME, 1.0);
          vec4 modified_color = vec4(1.0, time, time, 1.0);
      
          // Apply the base color and the modified color
          COLOR = base_color * modified_color;
      }
      

      In this shader code:

      base_color is the initial color of your text. color_change_speed controls the speed of the color change. You can modify this shader code based on your specific requirements.

      Remember to set the shader_material property of your Label node to the shader material you created. You can then control the color change speed by adjusting the color_change_speed uniform in your script.

      Me: “What about set_color after giving the control node a theme? Would that be a good way to do this? I haven’t been able to get set_color to work, as I can’t figure out what name and theme_type should be.”

      In Godot, the set_color function is often used to set the color of certain elements, but it requires a valid name and theme_type from the current theme. Unfortunately, working with themes in Godot can be a bit tricky, and it might not be the most straightforward way to achieve a gradual color change effect.

      If you are set on using themes, you could define a custom theme and update it programmatically. However, for your specific case of a gradual color change, using shaders or directly manipulating the color property in your script would likely be more straightforward.

      Here’s an example using the modulate property of a ColorRect containing the Label:

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

      The above code got cut off. Here’s the continuation and completion of the code:

              set_process(false)
      

      In this example, the color change is applied to the modulate property of the ColorRect, which in turn affects the modulate property of the Label. Adjust the speed and conditions based on your specific requirements.

      Remember to replace “ColorRect” with the actual name of your ColorRect node.

      • s12OP
        link
        fedilink
        arrow-up
        1
        ·
        11 months ago

        Me: “I don’t really understand shaders, and I’ve already tried to create a theme. Could you just explain set_color with examples of what name and theme_type may be in case that helps?”

        Certainly! I apologize for any confusion. In Godot, the set_color function is typically used to modify the colors of various theme elements. To use set_color, you need to provide the name and theme_type parameters, which specify the theme element you want to modify.

        Here’s a brief explanation:

        • name: The name of the theme property you want to modify. This could be the name of a color property in the theme.
        • theme_type: The type of theme you are modifying. It could be one of the predefined theme types like Control, Button, etc.

        Unfortunately, as of my last knowledge update in January 2022, Godot’s documentation on theme names and theme types is not exhaustive, and it might have evolved since then. Therefore, you might need to refer to the official Godot documentation or experiment in the editor to find the specific names and types you need.

        Here’s a generic example using set_color:

        # Assuming 'UI' is your Control node
        UI.set_color("font_color", "Label", Color(1.0, 0.5, 0.5))  # Example values, adjust as needed
        

        In this example:

        • “font_color” is the name of the color property you want to modify.
        • “Label” is the theme type, specifying that you want to modify the font color of a Label.

        To find the specific names and types, you may want to experiment with the Godot editor or refer to the Godot documentation. Keep in mind that themes can be a bit finicky, and not all properties may be easily accessible or adjustable programmatically. If themes prove too cumbersome, consider other approaches like shaders or direct color manipulation.

        Me: “Don’t worry. Godot 3 is an older LTS version, so it’s documentation probably won’t get update much. Jan 2022 knowledge is fine.”

        Me: “That solved my problem. Thank you.”

        You’re welcome! I’m glad to hear that it solved your problem. If you have any more questions or run into any issues in the future, feel free to reach out. Happy coding in Godot!

        It’s scary how good AI is getting.