Update:
I have managed to get the button to animate ONCE. So the first time you hover over a button, it works, but then the rest of the game the button swaps like usual.
I want my default button to be blank, so it's currently a blank png. A box appears behind the buttons when the menu pops up instead. Please see attached screenshot. However, you can see the default button background is still appearing! I cannot figure out where to disable these
The new GUI stuff seems really difficult to customise (unless simple re-skin job).
Anyway, here is my current screen (please ignore "grey" right now as I'm not yet using this):
Code: Select all
screen choice(items):
style_prefix "choice"
add "menubox" xalign 0.5 yalign 0.4
vbox:
for i in items:
if " (grey)" in i.caption:
button:
action i.action
style "menu_choice_grey_button"
text i.caption.replace(" (grey)", "") style "menu_choice_grey_text"
else:
button:
xysize (575, 80)
action i.action
text i.caption #style "menu_choice_text"
if (timeout_label is not None) and persistent.timed_choices:
bar:
xalign 0.5
ypos 400
xsize 740
value AnimatedValue(old_value=0.0, value=1.0, range=1.0, delay=timeout)
timer timeout action Jump(timeout_label)
## When this is true, menu captions will be spoken by the narrator. When false,
## menu captions will be displayed as empty buttons.
define config.narrator_menu = True
style menu_choice_grey_button:
background "gui/button/choice_idle_background_grey.png"
hover_background "gui/button/choice_hover_background_grey.png"
xalign 0.5
style menu_choice_grey_text:
idle_color "#000"
hover_color "#FFF"
properties gui.button_text_properties("choice_grey_button")
yalign 0.5
style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text
style choice_vbox:
xalign 0.5
ypos 405
yanchor 0.5
spacing gui.choice_spacing
style choice_button:
properties gui.button_properties("choice_button")
background "gui/menuchoice_blank.png" ## I added this
hover_background "hover_anim" ## I added this
xalign 0.5
yalign 0.5
style choice_button_text is default:
properties gui.button_text_properties("choice_button")
Below are my new images and hover animation:
Code: Select all
image menuchoice = "gui/menuchoice.png"
image menuchoice_blank = "gui/menuchoice_blank.png"
image hover_anim:
"menuchoice_blank" with Dissolve(1.0)
1.0
"menuchoice" with Dissolve(1.0)
And GUI.rpy:
Code: Select all
## Choice Buttons ##############################################################
##
## Choice buttons are used in the in-game menus.
define gui.choice_button_width = 575
define gui.choice_button_height = 80
define gui.choice_button_tile = False
#define gui.choice_button_borders = Borders(150, 8, 150, 8) ## I have removed this right now as text was squished
define gui.choice_button_text_font = gui.text_font
define gui.choice_button_text_size = gui.text_size
define gui.choice_button_text_xalign = 0.5
define gui.choice_button_text_yalign = 0.5
define gui.choice_button_text_idle_color = "#51504b"
define gui.choice_button_text_hover_color = "#f7f7f6"
define gui.choice_button_xalign = 0.5
define gui.choice_button_yalign = 0.5
From my screenshot, you can also see text is left aligned, not central/ 0.5 as I have set up. I don't know why this is, but even my say_screen text has been aligned to 0.58 to appear central... Something somewhere is overriding everything, but I don't know what. At least the hovered button background is central as desired!
I can't seem to find much on the forums about customising the new GUI, only re-skinning what is there. I really need help