[Solved] Custom in-game menu - any code examples?

[DrGonzo]

Hi,
I've been trying to have a custom choice menu with buttons horizontally aligned near the bottom of the screen, instead of the default vertically centered menu.

Does anyone have a code example for this?
And please, just a link to the docu isn't helping. I've looked at it.

Thanks!

http://www.kaysievert.com/share/images/RenPyCustom.jpg

[epadder]

in screen.rpy the default is:

Code: Select all

## Choice screen ###############################################################
##
## This screen is used to display the in-game choices presented by the menu
## statement. The one parameter, items, is a list of objects, each with caption
## and action fields.
##
## https://www.renpy.org/doc/html/screen_special.html#choice

screen choice(items):
    style_prefix "choice"

    vbox:
        for i in items:
            textbutton i.caption action i.action


## 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 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 is default:
    properties gui.button_properties("choice_button")

style choice_button_text is default:
    properties gui.button_text_properties("choice_button")

Try replacing it with something like:

Code: Select all

## Choice screen ###############################################################
##
## This screen is used to display the in-game choices presented by the menu
## statement. The one parameter, items, is a list of objects, each with caption
## and action fields.
##
## https://www.renpy.org/doc/html/screen_special.html#choice

style c_choice:
	#images are in the image folder, use whatever name/format you want have a small bit of padding
        background Frame("customgui/generic_idle.png",10,10)
        hover_background Frame("customgui/generic_hover.png",10,10)
        selected_background Frame("customgui/generic_selected_idle.png",10,10)
        selected_hover_background Frame("customgui/generic_selected_hover.png",10,10)
        yminimum 71 # default y size of the button image with no text
        xminimum 318 # default x size of the button image with no text

style c_choice_text:
        font "SomeFont.fontext" #if you want to change the font otherwise not needed
        color "#FFFFFF" 
        xalign 0.5 #center alignment
        xsize 295 #slightly smaller than the background of the 'button'
        size 24 # fontsize
        
screen choice(items):
    style_prefix "choice"

    hbox:
    	xalign 0.5 yalign 0.85 # play with the values
        for i in items:
            textbutton i.caption style "c_choice" textstyle "c_choice_text" action i.action


## 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

    

That SHOULD work... I'll let you test it, I use parts of this code to make custom text buttons to navigate around in my current project.

[Quonix]

Find this in your code:

Code: Select all

style choice_vbox:
    xalign 0.5
    ypos 225
    yanchor 0.5

    spacing gui.choice_spacing

Add yalign 1.0 and remove ypos then change vbox to hbox then go to screen_choice(items): and change the vbox to hbox there too.

Now go to gui.rpy and find this:

Code: Select all

define gui.choice_button_width = 658
define gui.choice_button_height = None
define gui.choice_button_tile = False
define gui.choice_button_borders = Borders(84, 5, 84, 5)
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_idle_color = "#ffffff"
define gui.choice_button_text_hover_color = "#0099cc"

There you can change the width so more than one button can fit on the screen, and you can stylize the choice buttons and text however you want.

[DrGonzo]

Great - thanks to the two of you for the quick replies! I really appreciate it.

Quonix, I tried you suggestion first and it already was exactly what I was looking for.

Again, thank you very much to the two of you.

[kivik]

Just a heads up you're going to run into trouble quickly if your choices aren't short text answers. Essentially, you can't have long text choices anymore by overwriting the default choice menu's styles.

With that in mind you may want to create your own choice screen entirely AND use custom styles as epadder suggested.

To use a custom choice screen, you need to use the renpy function: renpy.display_menu (https://www.renpy.org/doc/html/statemen ... splay_menu)

Here's the tutorial of how to use it in action: https://renpy.org/wiki/renpy/doc/refere ... splay_menu

It works quite differently as you don't use the normal menu syntax, instead you test for the result afterwards, but you can achieve the same result generally speaking - without breaking your default choice menu.

Just something to consider.

[DrGonzo]

Thanks for the suggestion, I'll check it out.
Always good to have an alternative way of doing things.