GUI Health Bar Tests

Oh another idea would be just make a contianer colour and add the image in the container!

just like this!!

https://www.babylonjs-playground.com/#7EPK2H#13

https://www.babylonjs-playground.com/#7EPK2H#14

https://www.babylonjs-playground.com/#7EPK2H#15 (This one is the best!)

1 Like

so my previous reply doesnt actually answer my question :stuck_out_tongue: it is however what i wanted for the first question.
So now all I need to figure out is:

How can i change the colour of a gui image? I want the color of the bottom image(the image with 0.2 alpha) to be grayed out or blacked out, but i cant figure out a way to do that and have it look nice.

Any ideas?

why not doing it offline in paint.net or gimp ?

As you want to dynamically to do it, I had fun creating a full custom shader based solution to process texture:
https://www.babylonjs-playground.com/debug.html#7EPK2H#18

It is not the first time ppl asked for it so I guess it might help others :slight_smile:

1 Like

Wow this is phenomenal!
Thank you very much!!

Here is another test for moving the position!

https://www.babylonjs-playground.com/debug.html#7EPK2H#21

1 Like

Hey just wondering how stressful is this for a computer/phone to do?
I don’t fully understand whats going on in the function, how expensive is it for my processing power?
It seems to drop my frame rate down. Although it could be something else.

It would be ok if it is not use every frame like you do during the animation.

The animation would cost a lot.

i only call the function once i thought…?
line 83
https://www.babylonjs-playground.com/debug.html#7EPK2H#21

So it is totally fine as it will only run once at load time, it should not change the FPS afterwards

ohhh whoops i forgot to add it into the preload list. hahaha.

Thanks

Is there a way i could somehow add this to my AssetManager?

Im thinking making it an async function then maybe i could add it somehow…

Any ideas?

You will have to manage it your code, there is no custom task in asset manager, they are here to manage remote load.

You could do smthg along those lines: https://www.babylonjs-playground.com/debug.html#7EPK2H#22

1 Like

Hey thanks!

Although the scene._addPendingData was a bit tricky to get working, this all worked phenomenally,
Thank you @sebavan for the help!!!

1 Like

Sorry for the sudden jump in, I just want to mention that its something that I already have implemented in my own personal project. Atm, stuff is wonky due to new changes to babylon source but you can get many health bars updating in realtime on screen with multiple AI agents like so:

bugs1_221218

I hope it helps !

2 Likes

Hey everyone, doing some more work on this, i noticed that when i switch around the unit types it becomes jittery.

https://www.babylonjs-playground.com/debug.html#7EPK2H#23

Any ideas how to fix that?

is there a way to have the image anchored somehow? Such that its still a child(or container.addControl(image) pretty sure that is a parent child relationship) of container, however when container moves, it does not?

Maybe i should be using getParentLocalCoordinates somehow instead…:thinking:

(im currently looking for a way, havent found one yet)

What do you mean?

1 Like

uhm i think i made a mistake, im still lookig into it. I think it is only on my game, not in the playground. What is happenning is that, im trying to this with percent instead of just reducing top by 1 each frame. However i get a jitter, as it goes down, i believe it is because im converting a float to pixels which doesnt work perfectly (from what i understand). However i tried ceiling my units and it has not helped.

Still looking into it, however i believe, it is just a floating point problem not a babylonjs problem.

Sorry for the confusion.