Ren's Py 中文文档翻译计划--自定义GUI向导
Ren'Py
具有一个开箱即用,可自定义的并如果有必要可以完全替换的GUI系统。本向导旨在阐释如何进行简单和中级的GUI自定义。
更高级的自定义部分请参见 styles
和 screen
部分。
这表示您正在使用新款的 Ren'Py
GUI(包含在 gui.rpy
文件中)。旧版的GUI(使用 screens.rpy
文件)被当做是高级特性。
简单GUI自定义
一些简单的GUI自定义可以对所有简单的视觉小说适用。这些简单修改的共性就是不需要修改 gui.rpy
。这些修改基本上不会对GUI进行较大的改动
改变大小和颜色
对GUI自定义最简单的部分就是修改大小和颜色了。 Ren'Py
在初次创建项目的时候将会弹窗提示,在 启动器中的 Change/Update GUI
将可以改变您的选择。
当通过启动器修改GUI时, Ren'Py
会弹窗或更新 gui.rpy
。两种选择都会覆盖大部分的图片文档,并覆盖 gui.rpy
。
Option.rpy
在 option.rpy
中有许多变量用于控制GUI代码。
config.name
: 给予该游戏一个人类可读的名字。被用于窗口标题或GUI中任何需要现实游戏名的地方。gui.show_name
:将此变量设为False
从而在主菜单中隐藏标题和版本号。config.version
:该游戏的版本号。gui.about
:加到关于视图中的额外文字。如果想包含多个段落,可以使用\n\n
进行分段。
一个简单的小例子:
define config.name = _('Old School High School')
define gui.show_name = True
define config.version = "1.0"
define gui.about = _("Created by PyTom.\n\nHigh school backgrounds by Mugenjohncel.")
为了方便起见,也可以对 gui.about
直接使用一个三引号字符串,这样将会保留原有的字符串格式。
define gui.about = _("""\
Created by PyTom.
High school backgrounds by Mugenjohncel.""")
游戏及主菜单背景图片
GUI中所使用的图片可以在 game/gui
目录中找到,也可以在启动器选项 Open Directory: gui
中选择打开。相关文件如下:
gui/main_menu.png
:用于主菜单的背景图片。gui/game_menu.png
:用于游戏菜单的图片。
窗口图标
替换 gui/window_icon.png
来更换窗口图标。
如果想要更改Windows中的可执行文件和Mac应用的图标,详见 build documentation
。
中级GUI自定义
我们可以更改游戏中的颜色,字体和图片。总的来说,中级自定义还保持之前的游戏布局,只不过增加了一些新功能。
这些修改都可以通过编辑 gui.rpy
实现。举个例子,我们可以放大对话的字体:
define gui.font_size = 22
或者缩小:
define gui.font_size = 20
默认值可以通过改变游戏选择的大小和颜色。当要设定某个值时,最好还是搜索 gui.rpy
中的变量。
图片文件只有在图片文件本身更新的情况下才能生效,或者您可以点选启动器中的 Change GUI
来重新生成图片文件。(这么做会覆盖您已经修改的文件)
您可能想要在临近完成游戏的时候再自定义 gui.rpy
。旧版的 gui.rpy
将会在新版中生效。
对话
一些简单的修改可以对对话使用。首先是更改文字框。
gui/textbox.png
: 改文件包含了文字窗口的背景,作为对话屏幕的部分显示。对话只会显示在屏幕中部的60%,在两边预留20%的边框。
一些变量也可以修改对话框。
define gui.text_color = "#402000"
define gui.default_font = "ArchitectsDaughter.ttf"
define gui.text_size = 33
define gui.name_text_size = 45
可以修改文字颜色,默认字体,文字大小以及角色名字文字大小。
character
函数也可以对角色名字颜色自定义:
define e = Character("Eileen", who_color="#104010")
选择分支菜单
两个图像文件可以自定义分支背景:
gui/button/choice_idle_backgroud.png
: 设置未被聚焦的选支背景gui/button/choice_hover_backgroud.png
: 设置鼠标悬浮时的选支背景
文字将会占据选支框的75%,也可以对选支内文字自定义:
define gui.choice_button_text_idle_color = '#888888'
define gui.choice_text_hover_color = '#0066cc'
修改了选支窗口未被聚焦和鼠标悬浮是的文字颜色.
遮罩图片
遮罩图片用来增亮或减暗背景图片而使按钮等元素显得更加显眼。在 overlay
文件夹中我们可以看到这些图片:
gui/overlay/main_menu.png
:用于主菜单的遮罩图片gui/overlay/game_menu.png
:用于游戏中菜单的遮罩图片gui/overlay/confirm.png
:在确认屏幕中暗化背景的图片
颜色,字体和字体大小
除了之前提到的 gui.text_color
, gui.choice_idle_color
和 gui.choice_hover_color
,还可以定义如下变量:
define gui.accent_color = '#000060'
define gui.idle_color = '#606060'
define gui.idle_small_color = '#404040'
define gui.hover_color = '#3284d6'
define gui.selected_color = '#555555'
define gui.insensitive_color = '#8888887f'
define gui.interface_text_color = '#404040'
define gui.muted_color = '#6080d0'
define gui.hover_muted_color = '#8080f0'
define gui.interface_font = "ArchitectsDaughter.ttf"
define gui.glyph_font = "DejaVuSans.ttf"
define gui.interface_text_size = 36
define gui.label_text_size = 45
define gui.notify_text_size = 24
define gui.title_text_size = 75
gui.accent_color
在GUI大多数地方都有用到,包裹标题和标签gui.idle_color
用于大多数未被聚焦的按钮gui.idle_small_color
用于一些未被聚焦的小文字(例如日期及存档名)。gui.hover_color
用于鼠标悬浮文字的颜色gui.selected_color
用于按钮被点选的颜色gui.nsensitive_color
用于对用户输入不敏感的按钮颜色gui.interface_text_color
用于游戏界面的静态文字,例如帮助和关于gui.muted_color
用于状态条上的值表示gui.interface_font
界面的字体gui.glyph_font
图标字体gui.label_text_size
标签字体大小gui.notify_text_size
提示字体大小gui.title_text_size
游戏标题字体大小
边框
许多GUI元素例如按钮和进度条使用可缩放的背景来配置边框对象。
一个框架将一张图片分为九部分,四个角,四个边,一个中心。四个角总是相同大小,左右边可以垂直缩放,上下面可以水平缩放,中心部分均匀缩放。
一个边框对象基于四个边大小,如图:
代码如下:
Borders(40, 40, 40, 40)
一种可能的情况如图:
边框也允许被填充,包括负填充可能导致子元素覆盖边框。代码如下:
Borders(40, 40, 40, 40, -20, -20, -20, -20)
可以用两种方法自定义框窗口。第一种是直接修改背景图片文件 giu/frame.png
, 另一种可以使用自定义变量
define gui.frame_borders = Borders(15, 15, 15, 15)
define gui.confirm_frame_borders = Borders(60, 60, 60, 60)
define gui.frame_tile = True
按钮
Ren'Py
包含了大量的按钮,各种按钮也有不同的用途和大小,展开如下:
button: 基本按钮,用于用户界面导航
choice_button: 用于游戏内选单
quick_button: 用于快速开启游戏菜单
navigation_button: 由于主菜单或游戏菜单中切换屏幕或开始用细
page_button: 用于载入和保存屏幕切换
slot_button:代表文件槽,一般包含缩略图,保存时间和可选保存名
radio_button: 用于用户偏好中的多选菜单
check_button: 用于用户偏好中的单选菜单
test_button: 用于测试音频
help_button: 用于选择帮助
confirm_button:用于确认是否
nvl_button:用于开启nvl模式
以下图片可以用于自定义按钮背景:
gui/button/idle_background.png: 未被聚焦的按钮背景
gui/button/hover_background.png: 被鼠标悬浮的按钮背景
gui/button/selectedidlebackground.png: 被选择但未被聚焦的按钮背景
gui/button/selectedhoverbackground.png:被选择且鼠标悬浮的按钮背景
还有相关的按钮前景:
gui.button/checkforeground.png, gui/button/radioforeground.png:单选和多选的前景图片
gui/button/checkselectedforeground.png, gui/button/radioselectedforeground.png: 被选中的单选和多选前景图片
设置以下按钮变量:
define gui.button_width = None
define gui.button_height = 64
define gui.button_borders = Borders(10, 10, 10, 10)
define gui.button_tile = True
define gui.button_text_font = gui.interface_font
define gui.button_text_size = gui.interface_text_size
define gui.button_text_idle_color = gui.idle_color
define gui.button_text_hover_color = gui.hover_color
define gui.button_text_selected_color = gui.accent_color
define gui.button_text_insensitive_color = gui.insensitive_color
define gui.button_text_xalign = 0.0
define gui.navigation_button_width = 290
define gui.radio_button_borders = Borders(40, 10, 10, 10)
define gui.check_button_borders = Borders(40, 10, 10, 10)