How to bring hovered imagebutton on top?

[Ocelot]

I have two buttons on screen defined like that:

Code: Select all

imagebutton auto 'images/menu/door_left_%s.png'  focus_mask "images/menu/door_left_mask.png"  action Quit(False)
imagebutton auto 'images/menu/door_right_%s.png' focus_mask "images/menu/door_right_mask.png" action Quit(False)

The problem is in "hovered" images: they are large and should partially cover other button. However it works properly only with right button. if I hovet on the left one, right door is drawn on top of left door hovered image.

I understand that this is happening because of drawing order of images. So I want to know how can I bring currently selected button to the top when it is in hovered state (and preferably to send it back when it is unhovered)

[PyTom]

There isn't a straightforward way of doing this. A non-straightforward way would be some sort of screen that changes the order of images.

[Ocelot]

Solved it. Here is what I have done:

1. Added another two static images, same as idle state of my buttons, positioned the same way as my buttons, but drawn before them. Essentiallly hidden behind them. On second though I just added them to the background, but this might not be suited for all.
2. Creates completely transparent image to be used as insensitive state.
3. Made buttons to be sensitive only when no other button is focused by using hovered/unhovered actions to set screen variable.

Screen code example:

Code: Select all

default ch = None
background "bg room"
imagebutton auto 'images/menu/door_left_%s.png'  focus_mask 'images/menu/door_left_mask.png'  action Quit(False) insensitive "images/menu/none.png" hovered SetScreenVariable("ch", 'ld') unhovered SetScreenVariable('ch', None) sensitive ch == None or ch == 'ld'
imagebutton auto 'images/menu/door_right_%s.png' focus_mask 'images/menu/door_right_mask.png' action Quit(False) insensitive "images/menu/none.png" hovered SetScreenVariable("ch", 'rd') unhovered SetScreenVariable('ch', None) sensitive ch == None or ch == 'rd'

Alternative approaches are still welcome.

[Alex]

Try something like this

Code: Select all

screen button_one():
    textbutton "Test 1" action [[]] hovered Show("button_one") unhovered Hide("button_one") align (0.45, 0.52)
    
screen button_two():
    textbutton "Test 2" action [[]] hovered Show("button_two") unhovered Hide("button_two") align (0.5, 0.5)
    
screen button_three():
    textbutton "Test 3" action [[]] hovered Show("button_three") unhovered Hide("button_three") align (0.55, 0.48)
    
screen my_scr():
    use button_one
    use button_two
    use button_three
    
label start:
    "..."
    show screen my_scr
    "?"