本文所有配置均位于screns.rpy文件中

参考资料

悬停提示

视频教程

底部菜单自定义

打开screens.rpy文件，你会在228行左右看到如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
## 快捷菜单屏幕 ######################################################################
##
## 快捷菜单显示于游戏内，以便于访问游戏外的菜单。

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

style quick_button is default
style quick_button_text is button_text

style quick_button:
    properties gui.button_properties("quick_button")

style quick_button_text:
    properties gui.text_properties("quick_button")


这里是游戏内的底部菜单，也可以称为快捷菜单，我们对该界面的修改基本只是将textbutton替换为imagebutton，action行为可以不用修改，下面给出示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
## 快捷菜单屏幕 ######################################################################
##
## 快捷菜单显示于游戏内，以便于访问游戏外的菜单。

screen quick_menu():

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

    if quick_menu:

        hbox:
            style_prefix "quick"
            spacing 50
            xalign 0.8
            yalign 1.0
            #存档按钮
            imagebutton:
                idle "gui/save.png"
                #可自行添加hover等属性
                action ShowMenu('save')
            #读档按钮    
            imagebutton:
                idle "gui/load.png"
                action ShowMenu('load')
            #快速存档    
            imagebutton:
                idle "gui/qsave.png"
                action QuickSave()
            #快速读档    
            imagebutton:
                idle "gui/qload.png"
                action QuickLoad()
            #设置按钮    
            imagebutton:
                yoffset -5
                idle "gui/set.png"
                action ShowMenu('preferences')
            #自动按钮
            imagebutton:
                idle "gui/auto.png"
                action Preference("auto-forward", "toggle")
            #快进按钮    
            imagebutton:
                idle "gui/skip.png"
                action Skip() alternate Skip(fast=False, confirm=True)
            #历史按钮   
            imagebutton:
                idle "gui/his.png"
                action ShowMenu('history')
            #隐藏对话框和底部菜单按钮    
            imagebutton:
                idle "gui/hide.png"
                action Call("_hide_windows")

## 此代码确保只要用户没有主动隐藏界面，就会在游戏中显示 quick_menu 屏幕。
init python:
    config.overlay_screens.append("quick_menu")

default quick_menu = True

style quick_button is default
style quick_button_text is button_text

style quick_button:
    properties gui.button_properties("quick_button")

style quick_button_text:
    properties gui.text_properties("quick_button")

相比于源代码，我们添加了隐藏对话框和底部菜单的按钮，删除了用处不大的回退功能，并优化了底部菜单的位置和间距等属性

底部菜单优化

悬停提示

其实到上一步我们的自定义就已经做的差不多了，但我们还可以做一些悬停提示的优化，使用tooltip我们可以很轻松地达到该效果，示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
## 快捷菜单屏幕 ######################################################################
##
## 快捷菜单显示于游戏内，以便于访问游戏外的菜单。

screen quick_menu():

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

    if quick_menu:

        hbox:
            style_prefix "quick"
            spacing 50
            xalign 0.8
            yalign 1.0
            imagebutton:
                idle "gui/save.png"
                action ShowMenu('save')
                tooltip "存档"
            imagebutton:
                idle "gui/load.png"
                action ShowMenu('load')
                tooltip "读档"
            imagebutton:
                idle "gui/qsave.png"
                action QuickSave()
                tooltip "快速存档"
            imagebutton:
                idle "gui/qload.png"
                action QuickLoad()
                tooltip "快速读档"
            imagebutton:
                yoffset -5
                idle "gui/set.png"
                action ShowMenu('preferences')
                tooltip "设置"
            imagebutton:
                idle "gui/auto.png"
                action Preference("auto-forward", "toggle")
                tooltip "自动"
            imagebutton:
                idle "gui/skip.png"
                action Skip() alternate Skip(fast=False, confirm=True)
                tooltip "快进"
            imagebutton:
                idle "gui/his.png"
                action ShowMenu('history')
                tooltip "回顾"
            imagebutton:
                idle "gui/hide.png"
                action Call("_hide_windows")
                tooltip "隐藏对话框"

            $ tooltip = GetTooltip()

    if tooltip:

        nearrect:
            focus "tooltip"
            prefer_top True

            frame:
                xalign 0.5
                text tooltip

## 此代码确保只要用户没有主动隐藏界面，就会在游戏中显示 quick_menu 屏幕。
init python:
    config.overlay_screens.append("quick_menu")

default quick_menu = True

style quick_button is default
style quick_button_text is button_text

style quick_button:
    properties gui.button_properties("quick_button")

style quick_button_text:
    properties gui.text_properties("quick_button")

美化&动画

虽然最后呈现的效果是不错，但默认效果还是有点太过单调，同时，快进按钮没有区分可用/不可用状态，我们稍微修改一下代码，优化一下表现效果，代码示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
## 快捷菜单屏幕 ######################################################################
##
## 快捷菜单显示于游戏内，以便于访问游戏外的菜单。

screen quick_menu():

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

    if quick_menu:

        hbox:
            style_prefix "quick"
            spacing 50
            xalign 0.8
            yalign 1.0
            imagebutton:
                idle "gui/save.png"
                action ShowMenu('save')
                tooltip "存档"
            imagebutton:
                idle "gui/load.png"
                action ShowMenu('load')
                tooltip "读档"
            imagebutton:
                idle "gui/qsave.png"
                action QuickSave()
                tooltip "快速存档"
            imagebutton:
                idle "gui/qload.png"
                action QuickLoad()
                tooltip "快速读档"
            imagebutton:
                yoffset -5
                idle "gui/set.png"
                action ShowMenu('preferences')
                tooltip "设置"
            imagebutton:
                idle "gui/auto.png"
                action Preference("auto-forward", "toggle")
                tooltip "自动"
            imagebutton:
                idle "gui/skip.png"
                insensitive "gui/skip_off.png"#修改图像，将其不透明度改为50%
                action Skip() alternate Skip(fast=False, confirm=True)
                tooltip "快进"
            imagebutton:
                idle "gui/his.png"
                action ShowMenu('history')
                tooltip "回顾"
            imagebutton:
                idle "gui/hide.png"
                action Call("_hide_windows")
                tooltip "隐藏对话框"

            $ tooltip = GetTooltip()

    if tooltip:

        nearrect:
            focus "tooltip"
            prefer_top True

            frame:
                background None
                xalign 0.5
                text tooltip at tip size 25 color "#fff" outlines [(2,"#35ceff",0,0)] 
            
transform tip:
    yoffset 10
    alpha 0.0
    parallel:
        easein 0.5 yoffset 5
    parallel:
        easein 0.5 alpha 1.0 

## 此代码确保只要用户没有主动隐藏界面，就会在游戏中显示 quick_menu 屏幕。
init python:
    config.overlay_screens.append("quick_menu")

default quick_menu = True

style quick_button is default
style quick_button_text is button_text

style quick_button:
    properties gui.button_properties("quick_button")

style quick_button_text:
    properties gui.text_properties("quick_button")

对话框(textbox)和姓名框(namebox)

打开gui文件夹，我们可以在这里看到对话框textbox和姓名框namebox两张图像，建议先拷贝一份留作备用，将我们的素材导入该文件夹进行同名替换即可

问题1: 对话框尺寸不合适

解答：请鼠标右击->属性，修改对话框分辨率，建议与原对话框尺寸保持一致

问题2: 姓名框表现效果不佳

解答: 修改namebox的样式和text显示位置

示例

以我的代码为例，你可以在screens.rpy文件的85行左右看到相关代码，修改后代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
################################################################################
## 游戏内屏幕
################################################################################


## 对话屏幕 ########################################################################
##
## 对话屏幕用于向用户显示对话。它需要两个参数，who 和 what，分别是叙述角色的名字
## 和所叙述的文本。（如果没有名字，参数 who 可以是 None。）
##
## 此屏幕必须创建一个 id 为 what 的文本可视控件，因为 Ren'Py 使用它来管理文本显
## 示。它还可以创建 id 为 who 和 id 为 window 的可视控件来应用样式属性。
##
## https://www.renpy.cn/doc/screen_special.html#say


screen say(who, what):
    style_prefix "say"
    

    
    window:
        id "window"
        
        
        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who" xoffset 45 yoffset -8 
                #由于角色名字会从namebox的左上角展示，为让其适应namebox的表现效果，对文字进行位置调整
        
        text what id "what"


    ## 如果有对话框头像，会将其显示在文本之上。请不要在手机界面下显示这个，因为
    ## 没有空间。
    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0


## 通过 Character 对象使名称框可用于样式化。
init python:
    config.character_id_prefixes.append('namebox')

style window is default
style say_label is default
style say_dialogue is default
style say_thought is say_dialogue

style namebox is default
style namebox_label is say_label

#对话框样式
style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)
#姓名框样式
#由于namebox的pos被占用，我们使用offest来调整namebox的位置，同时将namebox的size改为固定，防止其自适应角色名字长短变化
style namebox:
    xpos gui.name_xpos
    xanchor gui.name_xalign
    xsize 238
    ypos gui.name_ypos
    yoffset -60
    ysize 72

    background Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign)
    padding gui.namebox_borders.padding

style say_label:
    properties gui.text_properties("name", accent=True)
    xalign gui.name_xalign
    yalign 0.5

style say_dialogue:
    properties gui.text_properties("dialogue")

    xpos gui.dialogue_xpos
    xsize gui.dialogue_width
    ypos gui.dialogue_ypos

    adjust_spacing False