[SOLVED] How to create a scrollable save/load menu (2 cols X 3 rows)

[alexei]

I'm trying to create a scrollable save/load menu. Any idea how to achieve this?

Here's the default renpy code.

Code: Select all

screen file_slots(title):

    default page_name_value = FilePageNameInputValue(pattern=_("Page {}"), auto=_("Automatic saves"), quick=_("Quick saves"))

    use game_menu(title):

        fixed:

            ## This ensures the input will get the enter event before any of the
            ## buttons do.
            order_reverse True

            ## The page name, which can be edited by clicking on a button.
            button:
                style "page_label"

                key_events True
                xalign 0.5
                action page_name_value.Toggle()

                input:
                    style "page_label_text"
                    value page_name_value

            ## The grid of file slots.
            grid gui.file_slot_cols gui.file_slot_rows:
                style_prefix "slot"

                xalign 0.5
                yalign 0.5

                spacing gui.slot_spacing

                for i in range(gui.file_slot_cols * gui.file_slot_rows):

                    $ slot = i + 1

                    button:
                        action FileAction(slot)

                        has vbox

                        add FileScreenshot(slot) xalign 0.5

                        text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                            style "slot_time_text"

                        text FileSaveName(slot):
                            style "slot_name_text"

                        key "save_delete" action FileDelete(slot)

            ## Buttons to access other pages.
            hbox:
                style_prefix "page"

                xalign 0.5
                yalign 1.0

                spacing gui.page_spacing

                textbutton _("<") action FilePagePrevious()

                if config.has_autosave:
                    textbutton _("{#auto_page}A") action FilePage("auto")

                if config.has_quicksave:
                    textbutton _("{#quick_page}Q") action FilePage("quick")

                ## range(1, 10) gives the numbers from 1 to 9.
                for page in range(1, 10):
                    textbutton "[page]" action FilePage(page)

                textbutton _(">") action FilePageNext()

when I change the col/rows, no scrollbar is shown, hiding the last row. Any idea how to fix this? I tried a bunch of things but nothing worked.

[Syrale]

Try using a "vpgrid" instead of simply a "grid"
https://www.renpy.org/doc/html/screens.html?#vpgrid

[alexei]

So here's how I did it. I added a viewport with a child size. You need to have both and specify their width and height.

Code: Select all

            fixed:

                ## This ensures the input will get the enter event before any of the
                ## buttons do.
                order_reverse True

                viewport:
                    child_size (1850, 1200)

                    scrollbars "vertical"

                    mousewheel True
                    draggable True

                    ## The grid of file slots.
                    grid gui.file_slot_cols gui.file_slot_rows:

                        style_prefix "slot"

                        xalign 0.90
                        yalign 0.28

                        spacing gui.slot_spacing

                        for i in range(gui.file_slot_cols * gui.file_slot_rows):

                            $ slot = i + 1

                            button:
                                action FileAction(slot)

                                has vbox

                                text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                                    style "slot_time_text"

                                text FileSaveName(slot):
                                    style "slot_name_text"

                                add FileScreenshot(slot) xalign 0.5 ypos -20

                                key "save_delete" action FileDelete(slot)

                    ## Buttons to access other pages.
                    hbox:
                        style_prefix "page"

                        xalign 0.785
                        yalign 1.0

                        spacing gui.page_spacing

                        if config.has_autosave:
                            textbutton _("{#auto_page}A") action FilePage("auto")

                        if config.has_quicksave:
                            textbutton _("{#quick_page}Q") action FilePage("quick")

                        ## range(1, 9) gives the numbers from 1 to 8.
                        for page in range(1, 9):
                            textbutton "|[page]|" action FilePage(page)