How to combine a Button and a ProgressBar into one scene?

[ethanberko]

Godot Version

4.1.1

Question

I am trying to make a resuable scene that combines a button node and a progressbar node. It should also have the text from the button visible (or maybe have a seperate label if that's easier).

What is the best way to approach this?
-Button containing a progressbar child?
-Progressbar containing a button child?
-Control node with both as children?

I'm having a difficult time building these scenes to be reusable and versatile. I've made a scene that is a combo of two buttons and text before, but it is difficult to resize the elements later, and the buttons needed to be attached to a control node with a script in order to access everything properly. Is that always needed? I feel like I'm missing something important about how these nodes interact.

Thank you!

[wchc]

I’d make it a Button parent with a ProgressBar child, then you can easier connect to the button’s signals.

The ProgressBar needs to have a mouse_filter property set to Ignore, or Pass, so that it doesn’t block the mouse event for the Button undearneath.
It also needs to have anchors_preset property set to Full Rect, unless that’s not what you want.

I also made the Button flat, so that all the background visuals come from the ProgressBar.

extends Button

@onready var progress_bar: ProgressBar = $ProgressBar

func _pressed() -> void:
	progress_bar.value += 10.0