[Solved]Creating 'combat game'-type screen

[Brandom]

I have been trying to mess with this for a while, but seem to get stuck at one specific point; getting part of the text (label) right aligned.

Basically, what I'm trying to achieve: see attachment. The bars would be the respective parties' health @ 100%, regardless of what the HP number will be - changing as levels increase, etc.
The number (either located at @@@ or ###) would be each actual HP. The bars would 'empty' towards the sides. If the player loses HP, the bar would empty towards the left, like a normal bar, if you will. The enemy's bar should empty towards the right, in the example attachment, the enemy is damaged more than the player.

I am most likely using the wrong methods to achieve this and I'm not even sure if the text alignment specifically this way is possible? I've tried toying with various instances of xalign, for example, but to no avail. As can be seen in the following code; it's very messy using absolute numbers as well, rather than relative ones. But I'm not able to make this work otherwise

Code: Select all

screen fight_overlay:
    frame:
        ypos 678
        xminimum 1280
        vbox:            
            hbox:
                label "{color=#ff0000}{size=-5}[[player_name]{/size}{/color}" ypos -30
                bar range max_p_hp value p_hp xmaximum 620 xpos -165
        vbox:
            hbox:
                label "{color=#ff0000}{size=-5}[randomevent]{/size}{/color}" xpos 1200 ypos -30
                bar range max_m_hp value m_hp xmaximum 620 xpos 635

Results in: see attachment.
The 'B' is a temporary placeholder in a sequence of events, randomly generated every time 'during exploring'. Idea is to have a full list of events, ranging from enemy encounters to finding loot, every time a certain 'exploration' action is started, one of the events is generated. Amongst which would be the enemy encounter.
I could 'hardcode' the location in this case for the 'B', but if that changes to for example 'Alien' or 'Villain', the length changes, therefore the position would change as well.

I hope the above makes sense - any help would be greatly appreciated.

PS: Everything else is very minimal so far - first trying to get the 'basics' solved and done before I work on the graphics

[indoneko]

Perhaps something like this...?

Code: Select all

screen fight_overlay:
    frame:
        yalign 0.99
        ymaximum 45
        background None
        hbox:           
            vbox:
                label "{color=#ff0000}{size=-5}[[player_name]{/size}{/color}" ypos -30
                bar:
                    left_bar Solid("#0d0")
                    right_bar Solid("#090")
                    range max_p_hp 
                    value p_hp 
                    xmaximum 620 
                    ypos -25
            frame:
                label "{color=#d33}VS{/color}"
                background None
            vbox:    
                label "{color=#ff0000}{size=-5}[randomevent]{/size}{/color}"  xalign 1.0 ypos -30
                bar: 
                    left_bar Solid("#090") 
                    right_bar Solid("#0d0") 
                    bar_invert True 
                    range max_m_hp 
                    value m_hp 
                    xmaximum 620 
                    ypos -25   
    

[Brandom]

That looks pretty much spot on!
Now I'm just trying to understand the differences and checking to see why the xalign wouldn't work for me. I am thinking it's the set up of the 'grid' or construct of the frames/boxes, so will have a closer look at that.

But thanks for this! Much appreciated!