Vertical Skill Progress Bar?

[dvemail]

I want to use custom art to show character statistics. I'd like these to display as ancient Roman columns of height proportional to the statistic. The range of stats is from 1 to 100 normally, but can go negative from injury, and over 100 from special bonuses. I have an image for the column top, tiling-middle, and base:
That's the top
The bottom
and there's a small slice for the middle that should tile upwards.

Here's my question - is there an example of this kind of representation somewhere in the cookbook? I dont want to scale/stretch the column middle as it'll distort. The way I want to have the column work is to always show the base - I could change the art to show a cracked/broken base for negative values, and to only show the top when the value reaches 95 or higher. So it's not always the same set of art.

Any suggestions?

[PyTom]

You'll want to use a bar in conjunction with a frame.

Code: Select all

vbar:
    value StaticValue(75, 100)
    xsize 75
    top_bar Null()
    bottom_bar Frame("column.png", 0, 150, 0, 40, tile=True)
    top_gutter 150
    bottom_gutter 40
    bar_resizing True

Something like that. This is assuming the top part is 150px high, and the bottom part is 40 px high. The frame contains the image and tiles the middle part, the gutters make sure the bar is a minimum size, and the bar_resizing resizes the frame rather than cropping it.

[Divona]

Use LiveTile, perhaps something like this:

Code: Select all

default character_morale = 50

screen character_stats():

    # Assume that full height of the bar is the size of screen height.
    # Find the full height of the middle bar by minus 178 pixel of the 'top.png' and 21 pixel of the 'bottom.png'
    default middle_bar_height = config.screen_height - (178 + 21)
    
    # Find the middle bar by percentage.
    default val = middle_bar_height * (character_morale / 100)

    # Assembling the stat bar.
    vbox:
        yalign 1.0
        xsize 75

        add "top.png"
        add LiveTile("middle.png", ysize=val)
        add "bottom.png"

EDIT: PyTom beat me to it with probably a much better method...

[dvemail]

I played with Tom's code, and it did not produce what I expected. I'll clarify.

I have three images, the base, the middle, and the top of a column.
The base should always be present. I can change it for specific situations like a negative skill.
The middle gets tiled up based on skill value.
The top shows up when the skill reaches X value.

When I used the code suggested, it tiled the image in the middle of the column, but how do I add the bottom and top?

[dvemail]

edited comment above to show current issue

[PyTom]

You need to merge all three into a single image.

[dvemail]

Okay, guess I'm still missing something. Will the top clip off? It shouldn't show until the skill/stat reaches a certain point
for example, at 0 skill only the bottom base of the column would show. At 50, the base and 1/2 the column but no top, and at 100, the full height and includes the top.

[PyTom]

Oh, I'm confused. If you want to just clip the column like that, you can just use a normal bar. Just tile the image yourself to make a full size one.