Hello, i have a question about Ui

Godot Version

4.4

Question

hello, i want to add a health bar and other stuff like a phone that will act as inventory and map.

the thing is i want them to only appear when the player presses a button.

the idea is that the veins will be like the health bar and well the phone is the phone it would be like if the character was checking his body for any wounds

but im not sure how to set the pngs as this


the pngs are only like basic examples of how it would look in game, later i will make better ones

You would just use a TextureRect node for this. Then you could hook up a script to it that makes it visible whenever you hit a button.

1 Like

There are self_modulate properties on a lot of nodes that let you set a modulation color for that node. The modulation color can include an alpha channel (that is, translucency), so you could play with both the color of the veins and how visible they are just by poking appropriate colors into self_modulate.

1 Like

do you know a good video tutuorial?

do you know some good tutorials

I don’t really know much of what’s out there tutorial-wise, but we can walk you through things here if you like. My suggestion would be first get everything set up for (say) visible veins, and then post it.




How do you want this to look if (say) health is at 50%? Or 25%?

i wanted the red to be less and be replaced by the black if it got lower on health,
the blue and others is just concept

Are you wanting to cross-fade the color from black to red, or do you want the red to (say) fill the arm from, bottom to top?

If you want to change the color, I’d have two images; the arm and (separately) the veins. Have each in a Sprite2D, one on top of the other, so the veins draw on top of the arm. Make the veins white, on a transparent background. You can then change the color by writing on the self_modulate property of the vein sprite; set self_modulate to red, it’ll be red. Set it to black, it’ll be black. Set it to Color(0xFF00FF7F) and you’ll get translucent magenta veins.

If you want to have red fill the arm and replace the black like a health bar, you might look at TextureProgressBar.

here its only the blood and veins



and this one is just the arm png

so if i put an empty arm and leave it with the red fill and as i lose life the black fill goes in from the hand to the arm pit on the texture progress bar


like this?

Exactly.

Edit: You probably don’t want “left to right” for fill mode, though.

1 Like

did i put them on the correct places?

I think you might want to lay them out slightly differently; you want the arm with either the red or the black baked in for the “under” image, and then the veins in the opposite color in the progress image where you have them.

The “under” image is drawn behind everything, the "over image is drawn over top of everything. The main reason for the “over” image is if you want to (say) put a glassy shine on top of it all, or if your “health bar” is something like a syringe and you want a numbered gradient over top of it. Over is for foreground stuff.

1 Like

i see and the “control” is like the full screen?

It can be; controls can be children of other controls, so you can position and size them in various ways.

1 Like