Looking for help and knowledge about customizing and editing choice menus [Updated]

[lyre]

Hi! I have some questions regarding how I would go about customizing the choice menu to my liking. Essentially instead of separate lines for the choices to pop up, I want them to appear in just one background image that I can then select and highlight from. The best example of what I'm essentially trying to replicate is Persona 3's choice box[see attachment].

I'm fairly new to using the program and my knowledge of Python is limited at the moment but I'm open to learning any and all possible ways of doing this. I've been working around swapping the images in the folders and messing with some of the code under the Choice Screen section of the screens.rpy file as well as trying to alter lines under the choice buttons section on gui.rpy but for the most part all I seem to accomplish is making the background of the asset vanish rather than move on the screen if I don't just get an error saying it's an invalid line of code.



Update: Thanks to the help I received here and the through my googling I was able to align the choice menu where I wanted it with a style like P3. The only issue I'm having now is that the hover background for the text is not in the right position [see attachment 2]. I feel like there has to be a way to just realign the hover highlight to the text but I just can't come up with a way to do it by messing with any of the settings already in scripts.

[rayminator]

first in your screens.rpy look for screen choice

and add this below screen choice add "gui/your_image.png"

should llok like this

Code: Select all

screen choice(items):
    add "gui/your_image.png"
    style_prefix "choice"

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

and in your gui.rpy find and play around with it

Code: Select all

define gui.choice_button_width = 790
define gui.choice_button_height = None
define gui.choice_button_tile = False
define gui.choice_button_borders = Borders(100, 5, 100, 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 = "#ff5c33"
define gui.choice_button_text_insensitive_color = "#ffad99"

[RicharDann]

You'll want to modify the choice screen so it doesn't use RenPy's default styles but the one you provide instead.

Code: Select all

screen choice(items):
    # remove the line with style_prefix "choice" so Ren'Py doesn't use the default styles.

    frame: #add a frame that will contain the choice buttons. 
        xalign 0.8 # set the position so it appears to the lower right part of the screen
        yalign 0.8
        background "grey_frame.png" # add a background image for the frame
        vbox:
            for i in items:
                textbutton i.caption action i.action hover_background "gui/button_hover_back.png" #add a button background that will appear when it's hovered

Check the documentation on screen language and the tutorial game for a detailed explanation and more examples of how to customize screens.

[lyre]

You'll want to modify the choice screen so it doesn't use RenPy's default styles but the one you provide instead.

Code: Select all

screen choice(items):
    # remove the line with style_prefix "choice" so Ren'Py doesn't use the default styles.

    frame: #add a frame that will contain the choice buttons. 
        xalign 0.8 # set the position so it appears to the lower right part of the screen
        yalign 0.8
        background "grey_frame.png" # add a background image for the frame
        vbox:
            for i in items:
                textbutton i.caption action i.action hover_background "gui/button_hover_back.png" #add a button background that will appear when it's hovered

Check the documentation on screen language and the tutorial game for a detailed explanation and more examples of how to customize screens.

So once I make a frame to overwrite RenPy's defaults would that also mean I have to find a way to call changes back to the text (e.g. color and font) in that area of code then? Once I incorporated your suggestion into my script I was able to line the box and text up in the place I wanted but was unable to make any changes when altering the text properties for the button in the gui.rpy

[RicharDann]

Yes, you can alter any style property (like text and color) for each screen element (frames, buttons, text) by adding those properties as part of the code block where you define them. You can also define styles if you want to reuse properties for many different screens without repeating code, but note they are a bit more advanced, though once grasped they are easy to use.
The default screens use styles, and each screen has a style_prefix property that tells Ren'Py to look for styles with that name and use them to set the look of their screen elements. The default styles are those found in gui.rpy, but you can also create your own.

Code: Select all

# here we create a variable that contains a color string
default my_color = '#c422ed' 

# this is a simple style statement containing some text properties
style my_text:
    size 50
    color '#ae3454'

screen test():
    vbox:
        text "Hello World":
            size gui.text_size #this text takes its size property from the gui.text_size variable found in gui.rpy

        text "Hello again":
            size 34 #this one takes its text size property directly from what you type
            color my_color #and its color from the variable defined previously

	text "Hello one more time":
            style 'my_text' # this one takes all of its properties from the style previously defined 

I believe you can also use a style and then overwrite some properties with your own.

Code: Select all

text "Hello one more time":
            style 'my_text' 
            size 34 # this would replace only the size defined in my_text, the rest will be maintained

This didn't work on my previous testing, and that's why I suggested to remove that line, but I didn't realize I was using an old ren'py version on another computer, so that may have been the cause. If you want you can restore the style_prefix 'choice' to be able to modify the properties from gui.rpy and then try adding the frame properties and positions you want.
Sorry if I made this needlessly confusing.