存档读档GUI定制教程

blackpineapple

效果：


存档读档的代码在screens.rpy这个文件里。

save 界面是存档，load 界面是读档。

[RenPy] 纯文本查看 复制代码

screen save():

    tag menu

    use file_slots(_("save"))


screen load():

    tag menu

    use file_slots(_("load"))

tag
（https://doc.renpy.cn/zh-CN/screens.html?highlight=use#screen）

文档里的说明：

被当作一个变量名处理，而不是一个表达式。该特性指定一个与界面关联的图像标签(tag)。显示某个界面会替换带用相同图像标签的其他界面。这可以用来确保在相同的上下文环境下，同一时间只有显示一个菜单界面。

在这里，这个tag 是menu，所有带有tag menu的界面不会同时显示。如果你有一些界面，不想让他们同时显示，比如这里的菜单，就可以用tag把他们标记成一样的名字。



Use
（https://doc.renpy.cn/zh-CN/screens.html?highlight=use#use）

可以在一个界面里用另外定义好的界面。比如存档读档界面，里面有一些重复的东西，就可以专门定义一个另外的界面，这里是file_slots这个界面，可以减少重复代码，维护起来也比较方便。有点类似于python里的函数。

界面file_slots

实际上存档读档的界面代码主要在file_slots界面里面。

[RenPy] 纯文本查看 复制代码

screen file_slots(title):
    ## 决定标题显示的是存档还是读档
    add "gui/" + title + ".jpg"

    fixed:
        ## 返回的图像按钮，点击直接返回上个页面。
        imagebutton:
            pos (0.9, 0)
            auto "gui/return_%s.png"
            action Return()


        ## 存档位网格，这是一个2列，3行的网格，下面的数值是在gui.rpy这个文件里。
        grid gui.file_slot_cols gui.file_slot_rows:
            style_prefix "slot"

            xalign 0.5
            yalign 0.55

            spacing gui.slot_spacing

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

                $ slot = i + 1

                ## 存档按钮
                button:
                    action FileAction(slot)

                    ## 因为UI存档位置里有几个是粉色的，位于0，3，4位置的是粉色的所有特别处理。
                    ## 数字上虽然是1，2，3，4，5，6，但是在代码里的索引是0-5.
                    if i in [0, 3, 4]:
                        background "gui/button/slot_pink.png"
                        hover_background im.MatrixColor(
                            "gui/button/slot_pink.png", im.matrix.brightness(0.03))
                    else:
                        background "gui/button/slot_blue.png"
                        hover_background im.MatrixColor(
                            "gui/button/slot_blue.png", im.matrix.brightness(0.03))
                    hbox:
                        xalign .14
                        yalign .47
                        spacing 50

                        ## 添加存档缩略图。
                        add FileScreenshot(slot)
                        python:
                            text_color = "2e4689"
                            if i in [0, 3, 4]:
                                text_color = "f76896"

                        vbox:
                            ## 存档的编号
                            text "NO." + FileSlotName(slot,
                                gui.file_slot_cols * gui.file_slot_rows):
                                style "slot_name_text"
                                color text_color

                            ## 存档时间显示，可以通过修改format后面的字符串形式改这个
                            ## 时间的格式
                            text FileTime(slot, format=_("{#file_time}%Y-%m-%d %H:%M"), empty=_("")):
                                style "slot_time_text"
                                color text_color

                            ## 存档名字的显示
                            text FileSaveName(slot):
                                style "slot_name_text"
                                color text_color


        ## 位于底部切换页数的按钮
        hbox:
            style_prefix "page"

            xalign 0.5
            yalign 1.0

            spacing gui.page_spacing

            ## 上一页按钮
            imagebutton:
                auto "gui/previous_page_%s.png"
                hover_sound "audio/button_hover.ogg"
                action FilePagePrevious()

            hbox:
                ypos -10
                ## 自动存档
                if config.has_autosave:
                    imagebutton:
                        auto "gui/index_base_%s.png"
                        hover_sound "audio/button_hover.ogg"
                        foreground Text(text="A", color="#fff", size=40,
                            xalign=0.5, yalign=0.5)
                        action FilePage("auto")

                ## 快速存档
                if config.has_quicksave:
                    imagebutton:
                        auto "gui/index_base_%s.png"
                        hover_sound "audio/button_hover.ogg"
                        foreground Text(text="Q", color="#fff", size=40,
                            xalign=0.5, yalign=0.5)
                        action FilePage("quick")

                ## “range(1, 10)”给出1到9之间的数字。
                for page in range(1, 10):
                    imagebutton:
                        auto "gui/index_base_%s.png"
                        hover_sound "audio/button_hover.ogg"
                        foreground Text(text=str(page), color="#fff", size=40,
                            xalign=0.5, yalign=0.5)
                        action FilePage(page)

            ## 下一页按钮
            imagebutton:
                auto "gui/next_page_%s.png"
                hover_sound "audio/button_hover.ogg"
                action FilePageNext()

关于具体文件操作相关的代码解释，可以参考（https://doc.renpy.cn/zh-CN/screen_actions.html#file-functions）
关于界面语言imagebutto，grid， button的具体解释可以参考，也可以参考后续的GUI教程中的例子。
（https://doc.renpy.cn/zh-CN/screens.html?highlight=use#）

删除存档按钮的写法

[RenPy] 纯文本查看 复制代码

textbutton "save_delete" action FileDelete(slot)

显示/可修改页面名称

[RenPy] 纯文本查看 复制代码

button:
    style "page_label"

    key_events True
    xalign 0.5
    action page_name_value.Toggle()

    input:
        style "page_label_text"
        value page_name_value

最后关于存档读档GUI的定制，还需要修改gui.rpy里关于存档的部分。

[RenPy] 纯文本查看 复制代码

## 存档按钮 ########################################################################
##
## 存档按钮是一种特殊的按钮。它包含一个缩略图和描述该存档内容的文本。存档使用
## gui/button 中的图像文件，就像其他类型的按钮一样。

## 存档位按钮。
## 按钮宽度
define gui.slot_button_width = 780
## 按钮高度
define gui.slot_button_height = 262
define gui.slot_button_borders = Borders(15, 15, 15, 15)
## 按钮字大小
define gui.slot_button_text_size = 30
## 按钮字居中
define gui.slot_button_text_xalign = 0.5

## 按钮没有被按时候的字体颜色
define gui.slot_button_text_idle_color = gui.idle_small_color

## 按钮被选中但是鼠标不在上面的字体颜色
define gui.slot_button_text_selected_idle_color = gui.selected_color

## 按钮被选中鼠标在上面的字体颜色
define gui.slot_button_text_selected_hover_color = gui.hover_color

## 存档所用缩略图的宽度和高度。
define config.thumbnail_width = 290
define config.thumbnail_height = 165

## 存档网格中的列数和行数。
define gui.file_slot_cols = 2
define gui.file_slot_rows = 3