Ren'Py引擎从入门到放弃(16)——GUI定制化之快捷菜单

BuErShen

Ren'Py引擎从入门到放弃(16)——GUI定制化之快捷菜单

世上无难事，只要肯放弃。

这是入门介绍的第十六篇，主要内容是GUI定制化，这次内容是非常简单的快捷菜单(quick_menu)。

再次感谢cexo同学提供的方案和素材。


第一个问题：快捷菜单有什么特点？

答：一般来说GAL或者VN都会设计一个快捷菜单，作为一些常用操作的入口。例如cexo的原案中，包含了6个功能入口(按钮)，分别是：Skip(跳过)、Autoplay(自动播放)、Save(存档)、Load(读档)、Log(查看对话记录)和System(配置选项)。比项目默认生成的快捷菜单功能少一些，挺好的～

快捷菜单的特点是“快捷”(等于没说)，所以通常会始终显示在画面上，界面的zorder值需要大一些，确保引擎最后绘制，避免被其他界面覆盖的情况。当然，也可以设定一块区域，仅在鼠标移动到这块区域时显示快捷菜单，本篇会实现这个效果。


第二个问题：怎么搞？

答：这个界面只有一堆按钮，按钮的行为(action)都是Ren'Py内置的，只需要改改按钮的样子和布局就行了。

还是先来看看项目默认的 quick_menu 界面是怎么写的：

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

# PC端快捷菜单界面，移动端界面在另一个variant "touch"中
screen quick_menu():

    ## 确保该菜单出现在其他界面之上，
    zorder 100

    if quick_menu:

        hbox:
            style_prefix "quick"

            xalign 0.5
            yalign 1.0

            textbutton _("回退") action Rollback()
            textbutton _("历史") action ShowMenu('history')
            textbutton _("快进") action Skip() alternate Skip(fast=True, confirm=True)
            textbutton _("自动") action Preference("auto-forward", "toggle")
            textbutton _("保存") action ShowMenu('save')
            textbutton _("快存") action QuickSave()
            textbutton _("快读") action QuickLoad()
            textbutton _("设置") action ShowMenu('preferences')


## 此语句确保只要玩家没有明确隐藏界面，就会在游戏中显示“quick_menu”界面。
init python:
    config.overlay_screens.append("quick_menu")

default quick_menu = True

先解释下最后一句，quick_menu是个布尔值，不是screen名称。默认值设置为True的话，在screen quickmenu()定义的if语句里才会执行绘制各个按钮的代码。在某些不希望显示快捷菜单的场景时，可以设置该布尔值为False实现。例如，希望开场剧情不允许跳过、也不允许存档，就可以在script.rpy中写一行：

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

$ quick_menu = False

过了这段剧情，允许存档时再将这个值改为True：

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

$ quick_menu = True

(同时注意，需要禁用或删除键盘Esc键和鼠标右键调出游戏内菜单的功能，防止玩家绕道存档。)

quick_menu界面的其他部分都简单明了，我们只需要根据UI素材把按钮替换，并略微调整布局即可。

按钮的图片在这里会多次复用，所以在之前创建的button_config.rpy文件中创建一个配置项：

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

define gui.button_defaut_image = "gui/button/button_default.png"

图片还是复用之前的黑白图：

黑白图

先把 Skip 和 Auto 按钮加上：

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

screen quick_menu():

    ## 确保该菜单出现在其他界面之上，除了confirm界面
    zorder 100

    if quick_menu:

        hbox:

            # 改为显示在画面上方
            xalign 0.5
            yalign 0.0

            # skip
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_skip_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("SKIP", xalign=0.5, yalign = 0.5, size = 15)
                action Skip() alternate Skip(fast=True, confirm=True)
            # autoplay
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_auto_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("AUTO", xalign=0.5, yalign = 0.5, size = 15)
                action Preference("auto-forward", "toggle")

此时，我们会遇到需求层面的两个小问题。

第一个需求问题是，skip和auto按钮在被选中状态后需要显示不同于idle和hover状态的第三种颜色。办法是用 if-else 语句添加不同图像：

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

            # skip
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                if (renpy.is_skipping() == True):
                    add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_skip_selected_idle_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5)
                else:
                    add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_skip_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("SKIP", xalign=0.5, yalign = 0.5, size = 15)
                action Skip() alternate Skip(fast=True, confirm=True)
            # autoplay
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                if (preferences.afm_enable == True):
                    add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_auto_selected_idle_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5)
                else:
                    add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_auto_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("AUTO", xalign=0.5, yalign = 0.5, size = 15)
                action Preference("auto-forward", "toggle")

两个if语句中的判断条件是Ren'Py内置的函数和变量，分别表示“skip状态中”和“自动前进状态”，详见官方说明文档。

第二个需求问题是，skip按钮遇到没有看到过的(unseen)内容时，默认是不可用状态(insensitive)。默认的文本按钮会在这种状态下显示为灰色，并且不接收和处理hover、idle等事件。因为在没有可skip的内容状态下，hover不会显示高亮颜色，也可以认为此按钮是不可用状态，不处理也没问题。较真的同学如果一定要在按钮insensitive状态下显示不同的色彩，可以把按钮改为imagebutton类型，每个按钮都设为frame子组件(解决background透明度问题)，给imagebutton设置单独的insensitive图片。这里我就偷懒不弄了……

修改后效果如图：


继续把其他4个按钮也加上去：

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

            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_save_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("SAVE", xalign=0.5, yalign = 0.5, size = 15)
                action ShowMenu("save")
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_load_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("LOAD", xalign=0.5, yalign = 0.5, size = 15)
                action ShowMenu("load")
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_log_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("LOG", xalign=0.5, yalign = 0.5, size = 15)
                action ShowMenu("history")
            button:
                background im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_bg_fill_color, gui.button_bg_stroke_color) * im.matrix.opacity(gui.button_bg_alpha), xalign=0.5, yalign = 0.5)
                add im.MatrixColor(gui.button_default_image, im.matrix.colorize(gui.button_system_hover_color, gui.button_default_stroke_color), xalign=0.5, yalign = 0.5) at button_fadeinout
                foreground Text("SYSTEM", xalign=0.5, yalign = 0.5, size = 15)
                action ShowMenu("preferences")

齐活……


除了skip和auto，其他按钮会使用ShowMenu动作调用其他界面，那些界面的定制化是后面几篇的内容。目前点击它们会出现项目默认的界面。


第三个问题：说好的“鼠标移动到某块区域时显示快捷菜单”呢？

答：突然想起来cexo提供的素材里还有一张快捷菜单的背景图。不过原案设计菜单按钮是在屏幕下面的，我需要先把图处理一下，命名为 quick_menu_bg.png……以及写一个显示和隐藏的transform：

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

transform quick_button_base_fade:
    alpha 0.0
    on show:
        linear 0.5 alpha 1.0
    on hide:
        linear 0.5 alpha 0.0

hbox也写一个transform，效果是显示时从画面上方移入，消失时从画面上方移出：

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

transform quick_menu_buttons_transform:
    #背景图高度36，所以比36稍微多几个像素值
    yoffset -40
    on show:
        linear 0.5 yoffset 0
    on hide:
        linear 0.5 yoffset -40

整个quick_menu界面的开头和结尾修改为：

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

screen quick_menu():

    zorder 100

    if quick_menu:
    
        add "gui/quick_menu_bg.png" at quick_button_base_fade


        hbox:
            xalign 0.5
            yalign 0.0

            # 按钮定义略
            # 按钮定义略

            at quick_menu_buttons_transform

界面的动画已经基本完成，接着需要指定一块mousearea来检测鼠标位置并放在一个新的screen中：

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

screen quick_menu_show_area():
    # 在quick_menu上层，保证比quick_menu更早获取鼠标位置
    zorder 101
    
    mousearea:
        area (0, 0, 1.0, 100)
        hovered Show("quick_menu")
        unhovered Hide("quick_menu")

最后一步，把原来固定显示quick_menu的那句python改成固定显示quick_menu_show_area：

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

init python:
    config.overlay_screens.append("quick_menu_show_area")

完成效果：
快捷菜单效果


总结一下，主要工作是在换图片……

整体来说还是挺简单的……吧？

预告部分：下一篇可能是存档/读档，也可能是历史记录界面。等我看看哪个容易先做哪个……