GUI Health Bar Tests

Questions
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:

2 Likes
3

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

1 Like
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

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

1 Like
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:

1 Like
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

1 Like
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