Temporary filling and button delay

Help
, ,
1

Godot Version

Godot 4.3.1

Question

How to visually make a gradual coloring of the button
P.S.
I’m trying to make a game about fighting, where each button will be responsible for a certain action, how would you recommend implementing a time delay and gradual filling?

2

Maybe you can use a TextureProgressBar that is a child of the Button? The anchors need to be set to Full Rect and the mouse filter set to pass or ignore.

3

There are several ways you could do this, depending on what “filling” means:

  • you could play with self_modulate to change the tint, including opacity
  • you could use an animated sprite and hand-manage which frame is displaying based on time
  • as @paintsimmon says, a TextureProgressBar could do it
  • probably others…
4

you can set up a theme. create one theme in the first control node, all children will inherit this theme.

you can use any normal button or a progressbar, I would avoid texturedbutton or texturedprogressbar.

create a theme for Button or ProgressBar
create a new style for each state of the button or each element of progressbar in the theme. these can be StyleBoxFlat or StyleBoxTexture. StyleBoxEmpty can be used to make that state invisible.

Flat: supports rounded corners, colors, shadow, borders and skewing.
Texture: supports most features of flat but can also use a texture in scale or 9slice mode, it can also tile.

for this I would use images for the button or progressbar and set them using StyleBoxTexture.

for a more complex, maybe animated look, it is better to use a shader. a shader would not benefit from theming, but the shader_parameters of the material can be changed and it can animate on its own.

I would also use a texture, or maybe a godot’s gradient texture, and another uniform for moving it, and uniforms for setting the colors.

quick example:

shader_type canvas_item;

uniform vec2 UVshift;

void vertex() {
  UV += UVshift;
}

void fragment() {
  COLOR = texture(TEXTURE, UV);
}

you could use this to move a gradient left and right.

another way is to use tweens. the values of a GradientTexture for example can be animated.

it depends on what you need. an image or drawing would help us understand better what you want for your specific case.