魔改存读档界面
Luckykeeper 2022/5/10
本节文档介绍如何制作存读档界面，本篇难度较高，强烈建议搭配源码学习
官方文档1：https://www.renpy.cn/doc/gui.html#
官方文档2：https://www.renpy.cn/doc/screen_special.html#main-menu
官方文档3：https://www.renpy.cn/doc/screen_special.html?highlight=save#save
# 前置知识
GUI 界面知识，见“制作主菜单”一节
别慌，这个要比“制作主菜单”一节简单一些，只需要会照着改就行
# 需求描述
默认的存读档界面在同一个页面内，我们需要改成两个页面出来
# 修改代码
# 默认实现
先来看 Ren'Py 的存读档默认实现
# 参考 ver1.0 screen.rpy 1062-1147行
# 雀食有点复杂。但是不需要会，只需要知道写了一个 file_slots() 方法就好
screen save():
tag menu
use file_slots(_("Save"))
screen load():
tag menu
use file_slots(_("Load"))
screen file_slots(title):
default page_name_value = FilePageNameInputValue(pattern=_("第 {} 页"), auto=_("AutoSave"), quick=_("QuickSave"))
use game_menu(title):
fixed:
## 此语句确保输入控件在任意按钮执行前可以获取“enter”事件。
order_reverse True
## 页面名称，可以通过单击按钮进行编辑。
button:
style "page_label"
key_events True
xalign 0.5
action page_name_value.Toggle()
input:
style "page_label_text"
value page_name_value
## 存档位网格。
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}%Y-%m-%d %H:%M"), empty=_("空存档位")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
key "save_delete" action FileDelete(slot)
## 用于访问其他页面的按钮。
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)”给出 1 到 9 之间的数字。
for page in range(1, 10):
textbutton "[page]" action FilePage(page)
textbutton _(">") action FilePageNext()
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
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
# 修改
参考以下实现
# 参考 ver1.0 screen.rpy 1185-1393行
### 魔改存读档界面
screen game_save():
tag menu
add "gui/saveload/back_save.png" # 背景图片
default page_name_value = FilePageNameInputValue(pattern=_("第 {} 页"), auto=_("AutoSave"), quick=_("QuickSave"))
fixed:
## 此语句确保输入控件在任意按钮执行前可以获取“enter”事件。
order_reverse True
## 页面名称，可以通过单击按钮进行编辑。
button:
style "page_label"
key_events True
xalign 0.5
action page_name_value.Toggle()
input:
style "page_label_text"
value page_name_value
## 存档位网格。
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 FileSave(slot)
has vbox
add FileScreenshot(slot) xalign 0.5
text FileTime(slot, format=_("{#file_time}%Y-%m-%d %H:%M"), empty=_("莫得存档")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
key "save_delete" action FileDelete(slot)
## 用于访问其他页面的按钮。
hbox:
style_prefix "page"
xalign 0.5
yalign 1.0
spacing gui.page_spacing
textbutton _("<") action FilePagePrevious()
key "mousedown_4" 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)”给出 1 到 9 之间的数字。
for page in range(1, 21):
textbutton "[page]" action FilePage(page)
textbutton _(">") action FilePageNext()
key "mousedown_5" action FilePageNext() # 添加鼠标滚轮控制向下
vbox:
xalign 0.90
yalign 0.95
imagebutton: # 返回按钮
idle "gui/saveload/btn_back_base.png"
hover "gui/saveload/btn_back_onMouse.png"
selected_hover "gui/saveload/btn_back_onClick.png"
action Return()
vbox:
xalign 0.95
yalign 0.90
imagebutton: # 回到主菜单按钮
idle "gui/saveload/btn_title_base.png"
hover "gui/saveload/btn_title_onMouse.png"
selected_hover "gui/saveload/btn_title_onClick.png"
action MainMenu()
vbox: # 这个 vbox 是最下面的文字，可以删除
xalign 0.1
yalign 0.95
text "这是存档界面哦\n热知识: 在本页面内，将鼠标放在已经有存档的格子上，按键盘上的“Delete”键就可以删除已有存档啦~"
# 读档界面，写法参考上面存档界面注释
screen game_load():
tag menu
add "gui/saveload/back_load.png"
default page_name_value = FilePageNameInputValue(pattern=_("第 {} 页"), auto=_("AutoSave"), quick=_("QuickSave"))
fixed:
## 此语句确保输入控件在任意按钮执行前可以获取“enter”事件。
order_reverse True
## 页面名称，可以通过单击按钮进行编辑。
button:
style "page_label"
key_events True
xalign 0.5
action page_name_value.Toggle()
input:
style "page_label_text"
value page_name_value
## 存档位网格。
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 FileLoad(slot)
has vbox
add FileScreenshot(slot) xalign 0.5
text FileTime(slot, format=_("{#file_time}%Y-%m-%d %H:%M"), empty=_("莫得存档")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
key "save_delete" action FileDelete(slot)
## 用于访问其他页面的按钮。
hbox:
style_prefix "page"
xalign 0.5
yalign 1.0
spacing gui.page_spacing
textbutton _("<") action FilePagePrevious()
key "mousedown_4" 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)”给出 1 到 9 之间的数字。
for page in range(1, 21):
textbutton "[page]" action FilePage(page)
textbutton _(">") action FilePageNext()
key "mousedown_5" action FilePageNext()
vbox:
xalign 0.90
yalign 0.95
imagebutton:
idle "gui/saveload/btn_back_base.png"
hover "gui/saveload/btn_back_onMouse.png"
selected_hover "gui/saveload/btn_back_onClick.png"
action Return()
vbox:
xalign 0.95
yalign 0.90
imagebutton:
idle "gui/saveload/btn_title_base.png"
hover "gui/saveload/btn_title_onMouse.png"
selected_hover "gui/saveload/btn_title_onClick.png"
action MainMenu()
vbox:
xalign 0.1
yalign 0.95
text "这是读档界面捏\n热知识: 在本页面内，将鼠标放在已经有存档的格子上，按键盘上的“Delete”键就可以删除已有存档啦~"
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210