To summarize, I’ve already created a health bar over a 3d character using SubViewport. However, now I want to create a similarly vertical bar, which with the help of code will be filled with squares of different colors from two opposite ends (in the future I want to give the squares an image instead of a simple color), after some thought I realized that I just have no idea how to do it in the best possible way
I don’t expect help with the code just want some advice on what combination of nodes is best to use, what a tree of these nodes might look like to create such a bar.
Something like this:
I think for images the best way is to use TextureRect with tilemode. When the bar changes you just increase the size of the texturerect by one “bar”. Duplicate this for the other side and you are done
extends VBoxContainer
@export var progress: float = 0.0
var start_index: int = 0
var end_index: int = 9
func add_point_start() -> void:
if start_index <= end_index:
var block = get_child(start_index)
block.visible = true
block.color = Color.RED
start_index += 1
func add_point_end() -> void:
if end_index >= start_index:
var block = get_child(end_index)
block.visible = true
block.color = Color.DARK_BLUE
end_index -= 1
# Функція для тестування
func _ready() -> void:
fill_bar_alternating()
func fill_bar_alternating() -> void:
while start_index <= end_index:
add_point_start()
await get_tree().create_timer(0.5).timeout # Затримка 0.5 секунди
if start_index <= end_index:
add_point_end()
await get_tree().create_timer(0.5).timeout # Затримка 0.5 секунди
I got it. You just need to create a VBoxContainer and fill it with ColorRect or similar elements with an image and then, as in my case, you can simply repaint them in the desired color to simulate the filling (as it is done in the code). The code contains an example method that fills Progress bar from both sides in turn until it is completely filled.
