How to mark a button as already selected in Renpy


So, since User Interface works as a slightly longer Groundhog Day, I decided it would be an excellent idea to let the players know when they have already selected an option.  

Quality of life improvements!

So, for that, you have to go to the screens.rpy file (Which has to be autogenerated by the Renpy app creator) and find the Choice screen.

The Choice Screen is basically what you call when you use the menu special label. It should look like this:

screen choice(items):
    style_prefix "choice"
    vbox:
        for i in items:
            textbutton i.caption action i.action

As per documentation (https://www.renpy.org/doc/html/screen_special.html#choice) items has several parameters and objects. The one which actually matters to us now is chosen, which is True when the option had already been selected in any case, even in a different playthrough. To accommodate those changes, you do a simple if statement

screen choice(items): 
    style_prefix "choice"
    vbox: 
        for i in items:
            if i.chosen: 
                textbutton i.caption action i.action 
            else: 
                textbutton i.caption action i.action

Now we need to style them differently, because, for the moment, they look exactly the same. 

SO. Just below the code for the screen choice you are going to find the styles for the Screen Choice. It should look like this:

style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text
style choice_vbox:
    xalign 0.5
    ypos 0.1
    spacing 4
style choice_button is default:
    properties gui.button_properties("choice_button")
style choice_button_text is default:
    properties gui.button_text_properties("choice_button")

This has to do with object oriented programming, but what is happening here with the line style choice_button is button, is the fact all the buttons from the screen choice use by default all the styles from button, which are defined way up in the same file. That way choice_button is a button as well :). Which is happening at style choice_button is default is that choice_button is calling the properties which are the defined at the gui.rpy file.  Since all I want to do is a small change so people will know if they had already clicked a button, I don't need to go there, but if you want you can do a masterpiece by fooling around that file. 

The thing is, we need to create a style which has all the properties of choice_button but a slight change to indicate it's different, so we need to create our own style, which I called:

style choice_chosen_button is choice_button:
    color "#9999cc"

Then we add the style to the screen choice, like this:

screen choice(items): 
    style_prefix "choice"
    vbox: 
        for i in items: 
            if i.chosen: 
                textbutton i.caption style "choice_chosen_button" action i.action 
            else: 
                textbutton i.caption action i.action

As you can see, choice_chosen_button is a choice_button, meaning it inherited all the styles from choice_button and since choice_button is a button, choice_chosen_button also inherited those styles. YAY. 

What the statement color is doing is re-asigning the style text color from button and choice_button, meaning now it has the new color instead the one which inherited. 

And you fire up this and it doesn't work. :(

The Renpy Style system works with a variable naming scheme, meaning that, for instance my style choice_chosen_button is only affecting the container of the button and not its text. For affect the text, I need to create another style on top the style already created, called choice_chosen_button_text. (i.e: <the name of the style created>_text)

style choice_chosen_button is choice_button
style choice_chosen_button_text is choice_button_text:
    color "#9999cc"

You must declare choice_chosen_button even if it's empty. Now, finally, it should work. 

Here's all the code you can find at my Github, eventually. Probably already on develop: 

## 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: 
            if i.chosen: 
                textbutton i.caption style "choice_chosen_button" action i.action
            else: 
                textbutton i.caption style "choice_button" 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 0.1
    spacing 4
style choice_button is default: 
    properties gui.button_properties("choice_button")
    activate_sound "music/fx/shop_purchase.wav"
    hover_sound "music/fx/shop_select.wav"
style choice_button_text is default: 
    properties gui.button_text_properties("choice_button")
style choice_chosen_button is choice_button
style choice_chosen_button_text is choice_button_text:
    color "#9999cc"

Get User Interface

Comments

Log in with itch.io to leave a comment.

thank you so much i was searching everywhere-