Color Changing Progress/Health Bars

Troubleshooting gui
1

Hello all,

My google-fu may be weak today, but is there a way to create a nifty progress bar that changes color as it progresses (i.e. red when health is low, green when at full health)? I read the progress bar example, but that stretches a static image, obviously, so it’s not quite what I’m looking for. I looked in Nifty’s manual as well, and read about effects, and the closest I could come up with was the pulsateColor effect, but that’s not all that helpful since I want to have control based on a variable and not a bar that flashes over time.

Thanks!

2

Take the progress bar example that stretches a static image but change that image depending on the current value. So just write some pixels with the right color into that texture and update it.

3

Or… alternatively, you could use something like this:

[video]http://youtu.be/10VO2sAE2g8[/video]

4

You could do it using ImagePainter to modify the image…

…or you could do it by swapping the image yourself.

…or you may be able to do something with an ImageOverlay.

In HeroDex we have bars that change colour buts its abrupt transition (green, yellow, red) in those cases we switch the image being displayed (by modifying the image element).

5
@t0neg0d said: Or... alternatively, you could use something like this:

That’s exactly what I’m looking for. Which method did you use? Repainting the image like @Dodikles said?

And thanks all for the contributions!

6
@zarch said: You could do it using ImagePainter to modify the image...

…or you could do it by swapping the image yourself.

…or you may be able to do something with an ImageOverlay.

In HeroDex we have bars that change colour buts its abrupt transition (green, yellow, red) in those cases we switch the image being displayed (by modifying the image element).

My first thought was to switch out images, but I wanted something smoother. I can’t believe I didn’t even think to just make the image in Java ;O . Anyways, I’m still curious as to whether there is anything “built-in” for this.

7

She’s using a different GUI, not nifty. See the tonegodgui threads on the forum.

8
@ptblduffy said: That's exactly what I'm looking for. Which method did you use? Repainting the image like @Dodikles said?

And thanks all for the contributions!

Sooo sorry for not answering this. I didn’t get a notification on this.

Yeah… what @zarch said. I’m not using Nifty… I threw the above together in about 2 minutes after reading your post.

In case you ever feel like screwing aroundwith the GUI… here is the code to make the above.

[java]
final Indicator ind1 = new Indicator(screen, “ind1”, new Vector2f(200, 35), Indicator.Orientation.HORIZONTAL) {
@Override
public void onChange(float currentValue, float currentPercentage) {
setIndicatorColor(new ColorRGBA(1.0f*(1.0f-(currentPercentage/100)), 1.0f*(currentPercentage/100), 0.0f, 1.0f));
}
};
ind1.setMaxValue(300);
ind1.setCurrentValue(300);
ind1.setIndicatorAlphaMap(screen.getStyle(“Indicator”).getString(“alphaImg”));
ind1.setIndicatorColor(ColorRGBA.Green);
screen.addElement(ind1);

v1 = new Slider(screen, “v1”, new Vector2f(30, 65), new Vector2f(200,65), Slider.Orientation.HORIZONTAL, true) {
@Override
public void onChange(int selectedIndex, Object value) {
float percent = (((float)(Integer)value)/100);
ind1.setCurrentValue(ind1.getMaxValue()*percent);
}
};
screen.addChild(v1);;
[/java]

9

Ha, read through your docs. Looks awesome. May have to transfer my app over to your GUI.

Thanks a bunch all!

1 Like