Customizing Choice Menu? How do?

[Giovedi]

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!

[OokamiKasumi]

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

[Giovedi]

Thanks -- the cookbook tutorials confused me, see, because I'm not all that good at this stuff. I appreciate your explanation!