Giovedi wrote:I'm having trouble messing around with the choice menu buttons. I know how to get rid of the button background/frame and change the font, but that's it.
How would I go about repositioning or reskinning the buttons? This isn't for anything specific; I just wanna know for reference since I'm brushing up on my GUI-making skills.
Thanks!
You begin by going to the Cookbook section of the forum where all the tutorials are stored and reading this tutorial:
[Tutorial] Customizing Menus. This will give you all the basics of how ALL the buttons can be changed, including the Choice buttons.
Changing the choice buttons to your personal graphics is as simple as making your graphic and adding it in right UNDER the screen choice code.
Code: Select all
###################################################################
init -2:
$ config.narrator_menu = True
## ----- Button Background -------------------------------------
style menu_choice_button is button:
background Frame("ui/choice_bg_idle.png",0,0)
hover_background Frame("ui/choice_bg_hover.png",0,0)
# Sets Max Widths
xminimum int(config.screen_width * 0.45)
xmaximum int(config.screen_width * 0.45)
#Sets minimum height -- recommend exact height of your button image
yminimum 60
ypadding 5
xpadding 5
Positions for the buttons are adjusted in screens.rpy. here:
Code: Select all
screen choice:
window:
style "menu_window"
xalign 0.5
yalign 0.5
If you want Two Rows of buttons, like this:
You'll need to change your 'screen choice' code to something like this:
Code: Select all
##############################################################################
# Choice
screen choice:
window:
style "menu_window"
xalign 0.5
yalign 0.5
$i = 0
hbox:
spacing 2
vbox:
style "menu"
spacing 2
for caption, action, chosen in items:
$i += 1
if i % 2 == 1:
if action:
button:
action action
style "menu_choice_button"
text caption style "menu_choice"
else:
text caption style "menu_caption"
if i % 2 == 0:
$i = 1
else:
$i = 1
vbox:
style "menu"
spacing 2
for caption, action, chosen in items:
$i += 1
if i % 2 == 1:
if action:
button:
action action
style "menu_choice_button"
text caption style "menu_choice"
else:
text caption style "menu_caption"
screen choice2:
window:
style "menu_window"
xalign 0.5
yalign 0.5
vbox:
style "menu"
spacing 5
for caption, action, chosen in items:
if action:
button:
action action
style "menu_choice_button"
text caption style "menu_choice"
else:
text caption style "menu_caption"
##########################################################################
init -2:
$ config.narrator_menu = True
# Menu Choice Buttons -----------------------------------
## ----- Menu Choice Background -----------------
# The frame around the buttons.
style menu_window:
is default
## ----- Button Text ------------------------------
style menu_choice is button_text:
# font "fo/AZOTE.TTF"
size 22
color "#ffcc66"
hover_color "#ffffff"
xalign 0.5
yalign 0.5
outlines [(1, "#330000", 0, 0)]
hover_outlines [(1, "#660066", 0, 0)]
drop_shadow [(2, 2)]
drop_shadow_color "#663300"
## ----- Button Background -------------------------------------
style menu_choice_button is button:
background Frame("ui/choice_bg_idle.png",0,0)
hover_background Frame("ui/choice_bg_hover.png",0,0)
# Sets Max Widths
xminimum int(config.screen_width * 0.55)
xmaximum int(config.screen_width * 0.55)
#Sets minimum height -- recommend exact height of your button image
yminimum 60
ypadding 5
xpadding 5