Page 1 of 1
How to bring hovered imagebutton on top?
Posted: Wed Sep 28, 2016 8:21 am
by 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)
Re: How to bring hovered imagebutton on top?
Posted: Wed Sep 28, 2016 8:30 pm
by 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.
Re: How to bring hovered imagebutton on top?
Posted: Thu Sep 29, 2016 4:06 am
by Ocelot
Solved it. Here is what I have done:
- 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.
- Creates completely transparent image to be used as insensitive state.
- 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.
Re: How to bring hovered imagebutton on top?
Posted: Thu Sep 29, 2016 12:52 pm
by 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
"?"