Solved! -- Images in Menu Stylization

[Groundbird]

I am a huge newbie here, but I think I'm, generally, doing a pretty good job with all of this, but this is something I absolutely cannot figure out. Basically, I would like my in - game option selection to look like this:



Look at these beautiful mock-ups, haha.

Is this a possible thing to do? And if it is, could someone explain the code to me? Thanks a ton!

[SinnyROM]

If you keep in mind how you created the mockup with your graphics editing program, especially if you used layers, it'll be easier to learn how to compose your screen in Ren'Py. So far I can distinguish these, starting from the background:

• Layer for the choice container
• Layer for each choice button
• Layer for the protagonist's head

The choice container can be a solid gray background or an image. You can export the one created for your mockup and use it if you want. Then inside that frame we have the choice buttons stacked vertically and inside are the buttons containing text. Then the character's head can be a regular image displayable (http://www.renpy.org/doc/html/displayables.html) placed on top of everything.

Your design follows the default one from options.rpy close enough, so I modified that a bit. I added comments so you have an idea of where things go, but remember to look through the documentation for more options, particularly here (http://www.renpy.org/doc/html/style_properties.html) as the statements I added are style properties.

Code: Select all

screen choice(items):

    window:
        style "menu_window"
        xalign 0.3  # off centre
        yalign 0.6  # off centre
        xsize 0.8  # width 80%
        background "#ccc8"  # light gray at 50% opacity
        xpadding 25 ypadding 25  # padding 25px
        vbox:
            style "menu"
            spacing 2

            for caption, action, chosen in items:

                if action:

                    button:
                        action action
                        style "menu_choice_button"
                        xsize 1.0  # width 100%
                        idle_background None  # transparent
                        hover_background "#f66"  # pink
                        xpadding 50 # padding 50px

                        text caption:
                            style "menu_choice"
                            color "#f66"
                            hover_color "#fff" 
                            xcenter 0.0  # align left

                else:
                    text caption style "menu_caption"

    # add the displayable
    add "choice_protag" xalign 0.8 yalign 0.6

init:
    # protag image displayable
    image choice_protag:
        Image("placeholder.png", xsize=100, ysize=100)

You may want to customize menus further in the future. If you plan on using pure images for your buttons, here's a tutorial: http://lemmasoft.renai.us/forums/viewto ... 51&t=22565
For imagemaps: http://lemmasoft.renai.us/forums/viewto ... =51&t=9812
For simple interfaces like this one, pure screen language (what I posted) works - just replace the backgrounds with images and do a little resizing/repositioning. Documentation on screen language: http://www.renpy.org/doc/html/screens.html

[Groundbird]

-snip-

Thank you so much! This was easy to understand, and you definitely helped with all of the reference links and the notes. I appreciate this incredibly, and I'll get to testing this and tweaking it right away.

-- edit --


I got it! I'll have to figure out how to adjust it for longer option menus, but this is fantastic, thanks super much!