[SOLVED] Trying to make an indicator that moves along a bar

[webryder]

Hi all,

I think that this is a bar question but I'm not sure, so sorry if I'm using the wrong language.

I'm trying to set up a bar, kind of like a number line ranging from -100 to 100, with an indicator that moves based on where the current value of a score variable is. In other words, if the player has -20 on that value the indicator would move to -20 on the bar. If the player gains 30 points their indicator would move to +10. The bar doesn't fill or empty, the indicator moves along the bar showing the score, which can go up or down.

Trouble is I've been reading through all the bar information and I'm kind of lost on how to set this up. It seems like everything is about bars that fill up.

Any advice or suggestions would be greatly appreciated!

Thanks!

[philat]

Just have the bar have one image for both empty and full, then use an appropriate thumb for the indicator.

[webryder]

OK, I got the bar and the indicator to show up, but I'm still having problems. Here is the code I am using in my screens.rpy area to display the bar:

Code: Select all

    bar value VariableValue(PC_Target, 100):
        xalign 0.5 yalign 0.815
        xmaximum 338
        ymaximum 23
        left_bar Frame("art/gui/pc/PCAffinity_Bar.png", 10, 0)
        right_bar Frame("art/gui/pc/PCAffinity_Bar.png", 10, 0)
        left_gutter 4
        right_gutter 4
        thumb "art/gui/pc/PCAffinity_Indicator.png"

PC_Target is a variable defined earlier and it looks like it's working.

Here's what the bar looks like:
[img]Bar_example.png[/img]

The problems seem to be:

1. The bar is supposed to range from -100 to +100. The code is reading the far left position as 0 rather than the middle. How do I tell it that the range is -100 to +100?
2. How do I get the indicator/slider to line up with the bar (it should be a little higher).
3. Why is the indicator hiding the bar? It's a png with a transparent background (and the transparency is working because you can see the mocha color behind it, but for some reason it is hiding the bar.

Thanks!

[philat]

1. You don't, afaik. Make it a range of 0-200 and convert it as needed.

2. Editing the thumb image probably the easiest. It looks like you have blank space on top of the thumb image that makes it longer than it needs to be.

3. http://www.renpy.org/doc/html/style_pro ... umb_offset

[webryder]

Looks like it's working now!

Thanks for the suggestions, philat!