GUI Health Bar Tests


#1

Hey everyone, this is just a continuation of my post from the old forum.

This thread will be about testing new GUI methods for health bars.


#2

I bet @Wingnut will come up with some new demos soon :slight_smile:


#3

hahaha i bet he will!
He always comes up with some great solutions!


#4

Alright here is a new test

This shows exactly how i want the health/bars to decrease!


#5

I am also wondering.

Is there a way to change the colour of an GUI image ?

Similar to the way i change the colour of this texture?

But with gui images?


#6

Not that I am aware of.

In your sample could you use two images ? one for the background with the external shape and one for the bar that grows accordingly to health ?


#7

That is my goal actually. I want to make the background one grayed out. then have the whole image update.

Here is somewhat what you wanted i think:
https://www.babylonjs-playground.com/#7EPK2H#11


#8

I was thinking to something like this: https://www.babylonjs-playground.com/#7EPK2H#12


#9

Ah, that is much better!
I couldnt find the image on the web, and i know nothing of photoshop, so i hit a dead end.


#10

Back on the other part i was wondering about.
Changing the colour of a GUI Image. Maybe could i take the source dom image then somehow change that instead of the GUI image?
All through code i mean.


#11

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


#12

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!)


#13

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?


#14

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


#15

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:


#16

Wow this is phenomenal!
Thank you very much!!


#17

Here is another test for moving the position!

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


#18

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.


#19

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

The animation would cost a lot.


#20

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