GUI(图形用户接口)定制化指导 link

Ren’Py的一个特色是，看起来挺萌的GUI系统。有需要的话还可以根据喜好完全替换成定制的GUI。本页内容阐述了如何制作出简单和中级的定制化GUI。

如果需要做更深度的定制化，请参阅样式 (包括样式特性) 和界面 (包括界面行为和特殊界面 )。

这是基于你在使用新样式的Ren’Py GUI为前提(定制化配置包含在gui.rpy文件中)。使用老版本的GUI(使用screen.rpy文件进行定制化配置)的用户，应该把本页内容当作是深度定制化指导。

简单GUI定制化 link

GUI定制化工作包含几个简单部分，对所有项目都适用而不仅仅针对最简单的视觉小说。这些定制化工作的共同点是，都不需要编辑gui.rpy文件。这些定制化会给GUI带来一些微妙的变化，而不是让GUI彻底改头换面。

更改尺寸和颜色 link

改变GUI的尺寸和颜色是最简单的事情。当你第一次创建项目时，Ren’Py会提示你选择尺寸和颜色，在启动器的“更改/更新 GUI”选项中，你可以更改之前的选择。

当你通过启动器更改了GUI的选项后，Ren’Py会进一步提示，你是只修改启动器中选项还是需要更新gui.rpy文件。无论选择何种方式，大部分的图片文件都会重新生成并覆盖。覆盖gui.rpy文件会应用之前对gui.rpy做的修改。

因此，在实行其他的定制化之前，你很可能需要先完成这步工作。

Ren’Py会提示选择项目的默认分辨率和配色主题。选择后GUI就会生效。

Options.rpy文件 link

options.rpy文件中有一堆配置项会被GUI使用。

config.name: 一个字符串，表示该游戏一个“人类可读的”标题名称。这个字符串同时用在窗口标题和GUI需要显示游戏标题的地方。
gui.show_name: 这个配置项应该被设置为False，用于在画面主菜单中隐藏标题名字和版本号。(因为，标题应是被“镶嵌”在主菜单的图片中)
config.version: 一个字符串，表示游戏版本号。这在多个场合都会呈现在用户面前。
gui.about: 在关于(about)界面上的附加文本内容。如果你想要展示多行的credits(制作人员信息)，可以使用 \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的定义使用3个双引号，中间可以包含换行。

define gui.about = _("""\
Created by PyTom.

High school backgrounds by Mugenjohncel.""")

游戏和主菜单背景图像 link

GUI使用的图像文件在game/gui目录下，也可以通过启动器的“打开目录：gui”选项打开对应的目录。比较重要的几个图片文件为：

gui/main_menu.png: 用于主菜单的所有界面背景的图片文件。
gui/game_menu.png: 用于游戏菜单所有界面背景的图片文件。

只有gui/main_menu.png被替换后的主菜单。

“关于(about)”界面可以是游戏菜单(使用gui/game_menu.png文件作为背景)或者主菜单(使用gui/main_menu.png作为背景)。两种菜单可以被设置为同一张图片。

窗口图标 link

正在运行程序都有一个对应的图标显示在某个地方(例如Windows平台的任务栏和mac电脑的dock)。

我们可以通过更换gui/window_icon.png改变窗口图标。

注意，改变gui/window_icon.png后，只对游戏正在运行时的图标有效。想要改变Windows平台的“.exe”文件和mac平台的应用程序图标，我们需要看看生成文档.

中级GUI定制化 link

接下来，我们会演示中级GUI定制化。定位于中等级别，就有可能改变游戏中的配色、字体和图片。大体上，中级定制化基本保留了界面的原样，比如按钮和条(bar)，不过会修改界面并添加一些新功能。

很多修改都可以通过在gui.rpy文件中编辑配置项实现。例如，需要增大字号，可以找到这样一行:

define gui.text_size = 22

增大或者减小字号的话，修改为:

define gui.text_size = 20

注意，一些默认值通常跟这份文档样例中并不一致。在创建游戏项目之初，就可以通过选择尺寸和颜色来修改这些默认值，而gui.rpy文件中的默认值可以看作可扩展GUI定制化的样例。可以搜索“The Question”项目中gui.rpy文件内各种配置项的定义，例如搜索“define gui.text_size”。

接下去说的某些调整，会对部分或者全部对图片文件产生影响。例如在启动器选择“修改/更新 GUI”并要求引擎重新生成图片文件，导致图片文件本身被更新和改变。(但是注意，这种操作会导致你之前修改过的任何图片文件也被重新覆盖。)

你可能会等到游戏接近完成的情况下才考虑对gui.rpy进行定制化修改。老版本的gui.rpy文件可以在新版本的Re’Py中运行，新版本的gui.rpy文件可能会有老版本缺少的功能特性或者缺陷修复。在项目制作前期就定制化GUI可能会导致，很难利用这些改善和提升。

对话(dialogue) link

与“向用户呈现对话相关的定制化”有关的内容有好几项。第一项是文本框(textbox)。

gui/textbox.png: 该文件包含了文本窗口的背景，为say(说话)界面中的一部分。虽然图片大小应该跟游戏分辨率吻合，但是文本内容应该只在中心左右60%的宽度范围内显示，两边各预留20%的边界。

另外，还有另外一些配置项可以定制化，用来改变对话的外观。

define gui.text_color = “#402000” link: 该项设置对话文本颜色。

define gui.text_font = “ArchitectsDaughter.ttf” link

该项设置对话文本、菜单、输入和其他游戏内文字的字体。字体文件需要存在于game目录中。

(译者注：“ArchitectsDaughter”字体不支持中文。后续截图中使用的是类似效果的“方正咆哮体”。)

define gui.text_size = 33 link: 设置对话文本字号。无论增大或缩小字号都需要注意符合文本显示区域的空间限制。

define gui.name_text_size = 45 link: 设置角色名字的文字字号。

define gui.textbox_height = 278 link: 文本框高度。这项应该跟gui.textbox.png文件的高度一致。

角色名字标签(label)默认会使用强调色。定义角色时可以很简单地修改为需要的颜色:

define e = Character("Eileen", who_color="#104010")

一个样例文本框(textbox)图片

使用以上描述定制化配置后的对话

选项菜单(choice menu) link

选项界面使用menu语句向玩家展现选项。同样的，与选项界面的定制化配置有关的配置项有好几个。首先是两个图片文件:

gui/button/choice_idle_background.png: 该图片用作，未获取到焦点时，选项按钮的背景。
gui/button/choice_hover_background.png: 该图片用作，获取到焦点，选项按钮的背景。

默认情况下，文本被放置在这些图片的中心左右75%宽度范围内。还有一堆配置项可能控制选项按钮文本的颜色。

define gui.choice_button_text_idle_color = ‘#888888’ link: 未获取到焦点的选项按钮文本颜色。

define gui.choice_text_hover_color = ‘#0066cc’ link: 获取到焦点的选项按钮文本颜色。

只关注这几个配置项就可以满足简单定制化需求，而不需要改变图片尺寸。对于更复杂的定制化需求，再关注下面这些选项按钮的部分：

gui/button/idle_background.png的一个样例图片。

gui/button/choice_hover_background.png的一个样例图片。

使用以上描述定制化配置后的选择界面样例。

叠加图片(overlay image) link

还有一些叠加图片需要介绍。这些图片用于暗化或者亮化背景图片，使得按钮等其他用户图形组件更醒目。这些图片被放在overlay目录下：

gui/overlay/main_menu.png: 主菜单界面的叠加图片。
gui/overlay/game_menu.png: “游戏菜单类”界面，包括读档、存档、preference(环境设定)、关于(about)、help(帮助)等，使用的叠加图片。在“The Question”游戏中，同一个叠加图像用在包括主菜单等各种界面上。
gui/overlay/confirm.png: 用在选择确认界面暗化背景的叠加图片。

这里有一些叠加图片样例文件，以及使用叠加图片后游戏界面的感观变化。

gui/overlay/main_menu.png图片文件的一个样例。

gui/overlay/game_menu.png图片文件的一个样例。

更换叠加图片后的主菜单界面。

更换叠加图片后的游戏菜单界面。

颜色，字体和字号 link

这里有一些GUI配置项可用于更改文本的颜色、字体和字号。

这些颜色配置项应该总是被设置为十六进制的颜色代码，格式为“#rrggbb”的字符串(或者“#rrggbbaa”这样带有alpha通道的字符串)，类似于在网页浏览器上常用的颜色代码。例如, "#663399"是靓紫色的代码. 现在有不少在线工具用于查询HTML颜色代码，这是其中一个.

除了上面提到的 gui.text_color 、 gui.choice_idle_color 、和 gui.choice_hover_color ，还有下面这些配置项:

define gui.accent_color = ‘#000060’ link: 在GUI很多地方都会使用的强调色，例如使用在标题和标签中。

define gui.idle_color = ‘#606060’ link: 大多数按钮在未获取焦点或未被选择时的颜色。

define gui.idle_small_color = ‘#404040’ link: 鼠标指针未悬停在小型文本上(例如存档槽的日期名字，及快捷菜单按钮的文字)的颜色。该颜色通常需要比idle_color更亮或者更暗，以抵消文字较小不易突出导致的负面效果。

define gui.hover_color = ‘#3284d6’ link: 该颜色用于GUI中获得焦点(鼠标悬停)的组件，包括按钮的文本、滑块和滚动条(可动区域)的滑块。

define gui.selected_color = ‘#555555’ link: 该颜色用于被选择的按钮文本。(这项优先级高于hover鼠标悬停和idle未获取焦点两种情况的颜色设置。)

define gui.insensitive_color = ‘#8888887f’ link: 该颜色用于不接受用户输入的按钮的文本。(例如，一个rollback回滚按钮然而此时并不允许回滚。)

define gui.interface_text_color = ‘#404040’ link: 该颜色用于游戏接口的静态文本，比如在帮助和关于界面上的文本。

define gui.muted_color = ‘#6080d0’ link

define gui.hover_muted_color = ‘#8080f0’ link: 沉默色，用于条(bar)、滚动条和滑块无法正确展示数值或者可视区域时，这些组件某些部分的颜色。(这只会出现在重新生成图片，而启动器中图片无法马上生效的情况下。)

除了 gui.text_font 外,还有以下配置项与文本字体有关。配置的字体文件也应该要被放置在游戏目录中。

define gui.interface_text_font = “ArchitectsDaughter.ttf” link: 该字体用于用户接口元素的文本，例如主菜单与游戏菜单、按钮之类的。

define gui.glyph_font = “DejaVuSans.ttf” link: 该字体用于某种文本的glyph(标志符号)，例如用作跳过提示的箭头标志。DejaVuSans是一个针对这些标志符号的字体，而且已经自动包含在Ren’Py游戏中。

除了 gui.text_size 和 gui.name_text_size 外, 下面的几个配置项控制文本字号。

define gui.interface_text_size = 36 link: 游戏用户接口静态文本的字号，也是游戏接口中按钮文本的默认字号。

define gui.label_text_size = 45 link: 游戏用户接口标签(label)部分的文本字号。

define gui.notify_text_size = 24 link: 通知文本字号。

define gui.title_text_size = 75 link: 游戏标题字号。

定制化文本颜色、字体和字号后的游戏菜单

Borders(边界) link

有一些GUI组件，例如按钮(button)和条(bar)，使用可伸缩的背景的话，还可以配置Borders(边界)对象。在讨论如何定制化按钮和条(bar)之前，我们首先描述一下边界的实现机制。

Borders(边界)是可视组件中 Frame() 类的可选成员。一个Frame对象会使用一个图片，然后分割为9块——4块角落，4个边条及1块中心区域。4个角落总是保持相同的尺寸，左右边条水平对齐，上下边条垂直对齐，中心区域在两个维度上都对齐。

Borders(边界)对象按照“左、上、右、下”的顺序，依次给定了边界的尺寸。所以如果使用了如下边界图片的话:

符合如下定义的Borders(边界)对象:

Borders(40, 40, 40, 40)

一个可能的结果是这样:

如果child文字大小发生变化，背景图片也会跟着变化。

一个Border对象也可以被给定padding(内边距)，包括负值的内边距会让child能超出原有范围叠加在边界上。例如，这样的Borderss:

Borders(40, 40, 40, 40, -20, -20, -20, -20)

允许child能够叠加在边条上。注意，由于overlap(叠加)效果导致了边条变小，因为Borders本身现在也占了更少空间。

Borders(边界)也可以被tiled(复制码放)，而不仅仅是伸缩。这取决于配置项，产生的效果如下：

这些样例图片有一点丑，因为我们需要展现他们的工作机制。在练习环节，系统会产生一些更悦目的成果。一个Frame displayable对象被用于放置用户接口组件的Frame背景，我们将以这种情况作为案例。

主Frame窗口可以采用两种方式实现定制化。第一种方式是，更换背景图片文件：

gui/frame.png: 该图片用作主Frame窗口背景。

而第二种方式是定制化配置项。

define gui.frame_borders = Borders(15, 15, 15, 15) link: 该border用于主Frame窗口。

define gui.confirm_frame_borders = Borders(60, 60, 60, 60) link: 该border常用于confirm(确认)提示界面的frame。

define gui.frame_tile = True link: 若为True，confirm(确认)提示界面的边条和中心会被tiled(复制码放)处理。若为False，做拉伸处理。

gui/frame.png image的一个样例。

使用以上的定制化配置后的确认提示界面。

按钮(button) link

(译者注：为了避免与键盘按键key混淆，文档内的button一律翻译为按钮。)

Ren’Py用户接口包括了大量的按钮(button)，这些按钮(button)具有不同的尺寸及不同的用途。最重要的几类按钮是:

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/selected_idle_background.png: 用于被选择但未获取焦点按钮的背景图片。这个图片属于可选的，仅在idle_background.png图片存在的情况下才有用。
gui/button/selected_hover_background.png: 用于被选择并获取到焦点按钮的背景图片。这个图片属于可选的，仅在hover_background.png图片存在的情况下才有用。

更多特定的背景可以用于对应类型的按钮，是否适用可以通过图片名的前缀判断。例如， gui/button/check_idle_background.png可以用作check button中没有获取焦点选项的背景。

在radio button和check button中，有4个图片文件可以用作前景修饰，用于标识该选项是否被选中。

gui/button/check_foreground.png, gui/button/radio_foreground.png: 这两个图片用于check button或radio button未被选择的选项。
gui/button/check_selected_foreground.png, gui/button/radio_selected_foreground.png: 这两个图片用于check button或radio button被选中的选项。

下面的几个配置项设置了按钮的各类属性:

define gui.button_width = None link

define gui.button_height = 64 link: 按钮的宽度和高度，使用像素作为单位。如果值配置为“None”，系统会基于两项内容自定义一个合适的大小。这两项内容之一是按钮上的文本尺寸，另一项则是下面提到的borders(边界)。

define gui.button_borders = Borders(10, 10, 10, 10) link: borders(边界)以左、上、右、下的顺序围绕一个按钮。

define gui.button_tile = True link: 如果配置为True，按钮背景的中心区域和四条边将增缩自身尺寸，并以tile形式码放。如果配置为False，则中心区域和四边将使用缩放功能。

define gui.button_text_font = gui.interface_font link

define gui.button_text_size = gui.interface_text_size link: 按钮文本的字体与字号。

define gui.button_text_idle_color = gui.idle_color link

define gui.button_text_hover_color = gui.hover_color link

define gui.button_text_selected_color = gui.accent_color link

define gui.button_text_insensitive_color = gui.insensitive_color link: 各种情景下按钮文本的颜色。

define gui.button_text_xalign = 0.0 link: 按钮文本的垂直方向对齐方式。0.0为左对齐，0.5为中央对齐，1.0为右对齐。

define gui.button_image_extension = “.png” link: 按钮图像的扩展名。这项可以修改为“.webp”，使用WEBP图片。

这些变量能以前缀形式，加在某个特定种类的图像特性前面。例如， gui.choice_button_text_idle_color 配置了一个idle状态单选按钮的颜色。

举个例子，我们在样例游戏中将这些变量配置如下：

define gui.navigation_button_width = 290 link: 增加了navigation button的宽度。

define gui.radio_button_borders = Borders(40, 10, 10, 10) link

define gui.check_button_borders = Borders(40, 10, 10, 10) link: 增加了radio button和check button的borders(边界)宽度，为左侧的check mark(选定标记)预留出空间。

这有一个游戏中界面一些元素如何被定制化例子。

gui/button/idle_background.png样例图片。

gui/button/hover_background.png样例图片。

可用作gui/button/check_foreground.png和gui/button/radio_foreground.png的样例图片。

可用作gui/button/check_selected_foreground.png和gui/button/radio_selected_foreground.png的样例图片。

使用本段讨论的各种定制化配置后的环境设定界面。

存档槽位按钮 link

读档和存档界面使用存档槽位按钮，这类按钮展示了一个缩略图以及文件保存时间信息。当用于定制化存档槽位尺寸时，下面这些配置项十分有用。

define gui.slot_button_width = 414 link

define gui.slot_button_height = 309 link: 存档槽位按钮的宽度和高度。

define gui.slot_button_borders = Borders(15, 15, 15, 15) link: 每一个存档槽位的borders。

define config.thumbnail_width = 384 link

define config.thumbnail_height = 216 link: 存档缩略图的宽度和高度。注意这两个配置项的生存期存在命名空间config中，而不在命名空间gui中。通过文件的保存和读取，这些配置才会生效。

define gui.file_slot_cols = 3 link

define gui.file_slot_rows = 2 link: 存档槽位坐标的行数和列数。

这些是用于存档槽位的背景图片。

gui/button/slot_idle_background.png: 未获取焦点存档槽位的背景图片。
gui/button/slot_hover_background.png: 获取到焦点存档槽位的背景图片。

将这些都投入使用后，我们得到了：

gui/button/slot_idle_background.png样例图片

gui/button/slot/slot_hover_background.png样例图片。

应用本节讨论的各项定制化后的存档界面。

滑块(slider) link

滑块(slider)是一类用在环境设定界面的条(bar)，允许玩家可以根据自身喜好调整大量的数值。GUI默认只使用横向的滑块，不过游戏中也往往会用到垂直的滑块。

滑块(slider)可以使用以下图片进行定制化：

gui/slider/horizontal_idle_bar.png, gui/slider/horizontal_hover_bar.png, gui/slider/vertical_idle_bar.png, gui/slider/vertical_hover_bar.png: 用于空闲和指针悬停状态下垂直或水平滑块的背景图片。
gui/slider/horizontal_idle_thumb.png, gui/slider/horizontal_hover_thumb.png, gui/slider/vertical_idle_thumb.png, gui/slider/vertical_hover_thumb.png: 用于条(bar)的thumb(可拖动部分)的图片。

以下配置项也会被用到:

define gui.slider_size = 64 link: 水平滑动块的高度，或者垂直滑块的宽度。

define gui.slider_tile = True link: 若为True，Frame中包含的滑块会被tile样式码放。若为False，则使用缩放模式。

define gui.slider_borders = Borders(6, 6, 6, 6) link

define gui.vslider_borders = Borders(6, 6, 6, 6) link: Frame包含条(bar)图片时使用的borders(边界)。

这是一个我们如何定制化水平滑块的案例。

gui/slider/horizontal_idle_bar.png 样例图片。

gui/slider/horizontal_hover_bar.png 样例图片。

gui/slider/horizontal_idle_thumb.png 样例图片。

gui/slider/horizontal_hover_thumb.png 样例图片。

应用本节提到的定制化后的界面效果。

scrollbar(滚动条) link

scrollbar(滚动条)是用于滚动视点的条(bar)。在GUI中，历史(history)界面是滚动条明显会被用到的地方，但垂直滚动条在其他界面也可能会被用到。

scrollbar(滚动条)可以使用以下图片定制化：

gui/scrollbar/horizontal_idle_bar.png, gui/scrollbar/horizontal_hover_bar.png, gui/scrollbar/vertical_idle_bar.png, gui/scrollbar/vertical_hover_bar.png: 在空闲(未获取焦点)及鼠标悬停状态下，垂直滚动条的背景图片。
gui/scrollbar/horizontal_idle_thumb.png, gui/scrollbar/horizontal_hover_thumb.png, gui/scrollbar/vertical_idle_thumb.png, gui/scrollbar/vertical_hover_thumb.png: thumb(可拖动部分)使用图片——滚动条的可活动滑块部分。

还有下面这些配置项可能会被用到：

define gui.scrollbar_size = 24 link: 水平滚动条的高度，也是垂直滚动条的宽度

define gui.scrollbar_tile = True link: 如果该值为True，包含scrollbar(滚动条)的frame(框架)使用tile样式码放。如果该值为False，则使用scale缩放样式。

define gui.scrollbar_borders = Borders(10, 6, 10, 6) link

define gui.vscrollbar_borders = Borders(6, 10, 6, 10) link: 滚动条使用frame(框架)中包含的border(边界)。

define gui.unscrollable = “hide” link: 当一个滚动条无法滚动(即所有内容都可以在一栏内显示)，该项决定滚动条的展示。“hide”表示隐藏该滚动条，不指定值则表示展示滚动条。

这是一个如何定制化垂直滚动条的例子。

gui/scrollbar/vertical_idle_bar.png 样例图片

gui/scrollbar/vertical_hover_bar.png 样例图片

gui/scrollbar/vertical_idle_thumb.png 样例图片

gui/scrollbar/vertical_hover_thumb.png 样例图片

使用本节中提到的定制化内容后的历史(history)界面。

条(bar) link

最常见的老式条(bar)会向用户展示一个进度数字。条(bar)不会用在GUI中，但会用在创作者定义的(creator-defined)界面中。

通过编辑以下图片可以实现条(bar)的定制化：

gui/bar/left.png, gui/bar/bottom.png: 用于水平和垂直条(bar)的填充图片
gui/bar/right.png, gui/bar/top.png: 用于水平和垂直条(bar)的填充图片

还有一些用于条(bar)的常用配置项：

define gui.bar_size = 64 link: 水平条(bar)的高度，也是垂直条(bar)的宽度。

define gui.bar_tile = False link: 如果该值为True，条(bar)图片以tile样式码放。如果该值为False，条(bar)图片以scale样式缩放。

define gui.bar_borders = Borders(10, 10, 10, 10) link

define gui.vbar_borders = Borders(10, 10, 10, 10) link: 包含在frame(框架)中的border(边界)。

这是一个定制化水平条(bar)的样例。

gui/bar/left.png样例图片

gui/bar/right.png样例图片

经过我们定制化后的条(bar)样例。

跳过(skip)和通知(notify) link

跳过(skip)和通知(notify)界面会同时在主Frame带着信息出现。他们共用frame背景图片：

gui/skip.png: 跳过(skip)提示的背景图。
gui/notify.png: 通知(notify)界面的背景图。

控制这些的配置项如下:

define gui.skip_frame_borders = Borders(24, 8, 75, 8) link: frame中的边界，用在跳过(skip)界面

define gui.notify_frame_borders = Borders(24, 8, 60, 8) link: frame中的边界，用在通知(notify)界面。

define gui.skip_ypos = 15 link: 从窗口顶部算起，跳过(skip)提示的垂直位置，以像素为单位。

define gui.notify_ypos = 68 link: 从窗口顶部算起，通知(notify)提示的垂直位置，以像素为单位。

这是一个定制化跳过(skip)和通知(notify)的样例。

gui/skip.png样例图片。

gui/notify.png样例图片。

定制化后，跳过(skip)和通知(notify)界面的实际情况。

对话(dialogue)-续 link

除了以上提到的简单定制化，还有一些控制对话表现方式的路子。

文本框(textbox) link

对话显示在文本框(textbox)[或者窗口]里。除了更换gui/textbox.png图片之外，下面的配置项也能控制文本框展示效果。

名字(name)和名字框(namebox) link

frame(框架)会使用gui/namebox.png做为名字背景，角色名字则内置在该frame中。并且，有一些配置项控制名字的表现效果。正在说话的角色如果有名字的话，名字框(namebox)是唯一能显示这个名字的地方(包括名字为空“ ”的情况)。

define gui.name_xpos = 360 link

define gui.name_ypos = 0 link: 名字(name)和名字框(namebox)的水平和垂直位置。通常我们会在文本框的左端和上端预留几个像素的空间。把该配置项赋值为0.5，则可以让名字在文本框内居中(见下面的附图)。赋值可以是负数——例如，把gui.name_ypos赋值为“-22”就会使其在超过文本框顶端22个像素。

define gui.name_xalign = 0.0 link: 角色名字水平对齐方式。0.0表左对齐，0.5表示居中，1.0表示右对齐。(常用0.0或者0.5)这个配置项会同时应用在两处：gui.name_xpos相关的名字框(namebox)位置，选择何种对齐方式及对应边框的xpos值。

define gui.namebox_width = None link

define gui.namebox_height = None link

define gui.namebox_borders = Borders(5, 5, 5, 5) link

define gui.namebox_tile = False link: 这些配置项控制包含名字框(namebox)frame的显示效果。

对话(dialogue) link

define gui.dialogue_xpos = 402 link

define gui.dialogue_ypos = 75 link: 实际对话内容的水平和垂直位置。这通常表示从文本框(textbox)的左端或者顶端开始计算，偏离的像素数。如果设置为0.5则会让对话内容在文本框(textbox)内居中(参见下面的内容)。

define gui.dialogue_width = 1116 link: 该配置项给定了每行对话内容的最大宽度，单位为像素。当对话内容达到最大宽度时，Ren’Py会将文本换行。

define gui.dialogue_text_xalign = 0.0 link: 对话内容文本的水平对齐方式。0.0为左对齐，0.5为居中，1.0为右对齐。

样例 link

若要角色名字居中，使用:

define gui.name_xpos = 0.5
define gui.name_xalign = 0.5

若要对话内容文本居中，使用:

define gui.dialogue_xpos = 0.5
define gui.dialogue_text_xalign = 1.0

我们提供的演示游戏中，这些语句定制了居中的名字框(namebox):

define gui.namebox_width = 300
define gui.name_ypos = -22
define gui.namebox_borders = Borders(15, 7, 15, 7)
define gui.namebox_tile = True

gui/namebox.png样例图片。

应用以上定制化设置后的演示游戏。

历史(history) link

这里有一些配置项可以控制历史(history)界面的展现效果。

define config.history_length = 250 link: Ren’Py保存在历史(history)中的对话段落个数。

define gui.history_height = 210 link: 历史(history)层(entry)的高度，单位为像素。该项可以为空，这样可以允许历史(history)层(entry)高度根据实际情况而定——当define gui.history_height为None时，config.history_length可能需要被明显调低。

define gui.history_name_xpos = 0.5 link

define gui.history_text_xpos = 0.5 link: 名字标签(name label)和对话文本的水平位置。这两者可以是历史(history)层(entry)左端偏移的像素数量，也可以是0.5表示居中。

define gui.history_name_ypos = 0 link

define gui.history_text_ypos = 60 link: 名字标签(name label)和对话文本的垂直位置，与历史(history)层(entry)上端位置有关，单位为像素。

define gui.history_name_width = 225 link

define gui.history_text_width = 1110 link: 名字标签(name label)和对话文本的宽度，单位为像素。

define gui.history_name_xalign = 0.5 link

define gui.history_text_xalign = 0.5 link: 名字标签(name label)和对话文本的对齐方式，及对应的文本对齐时使用的xpos值。0.0为左对齐，0.5为居中，1.0为右对齐。

应用以上定制化配置后的历史(history)界面。

NVL link

nvl界面会显示NVL模式的对话。这也可以使用一些方式进行定制化。第一种是定制化NVL模式的背景图片：

gui/nvl.png: NVL模式中使用的背景图片。这个图片应该跟窗口尺寸一致。

还有一些配置项用于定制化NVL模式文本下的显示效果。

define gui.nvl_borders = Borders(0, 15, 0, 30) link: NVL模式围绕背景图的border(边界)。由于背景图不是一个frame，所以只用在淡出NVL模式，以防止直接切换导致的界面四周突兀表现。

define gui.nvl_height = 173 link: NVL模式一个层(entry)的高度。配置该值可以调整层(entry)高度，使得在NVL模式下不翻页也可行，同时展现调整好的一系列层(entry)。将该值赋值为None的话，层(entry)的高度就是可变的(自适应)。

define gui.nvl_spacing = 15 link: 当gui.nvl_height的值为None时，各个层(entry)之间的spacing(间隔)大小，也是NVL模式菜单按钮的间隔大小。

define gui.nvl_name_xpos = 0.5 link

define gui.nvl_text_xpos = 0.5 link

define gui.nvl_thought_xpos = 0.5 link: 角色名字、对话文本和thought/narration(内心活动/叙述)文本的位置，与层(entry)的左端位置有关。其可以是一个代表像素数的值，或者0.5表示在层(entry)内居中。

define gui.nvl_name_xalign = 0.5 link

define gui.nvl_text_xalign = 0.5 link

define gui.nvl_thought_xalign = 0.5 link: 文本对齐。这项同时控制文本对齐方式，及文本起始距离左端的xpos值。0.0为左对齐，0.5为居中，1.0为右对齐。

define gui.nvl_name_ypos = 0 link

define gui.nvl_text_ypos = 60 link

define gui.nvl_thought_ypos = 0 link: 角色名字、对话文本、thought/narration(内心活动/叙述)文本的位置，与层(entry)的上端相关。该值应是一个从上端开始的偏移量数值，单位为像素。

define gui.nvl_name_width = 740 link

define gui.nvl_text_width = 740 link

define gui.nvl_thought_width = 740 link: 各种文本的宽度，单位为像素。

define gui.nvl_button_xpos = 0.5 link

define gui.nvl_button_xalign = 0.5 link: NVL模式下菜单按钮的位置和对齐方式。

Ren’Py并不默认使用NVL模式。调用NVL模式必须使用NVL模式角色，而NVL模式角色需要在script.rpy文件中定义一系列配置项。

define e = Character("Eileen", kind=nvl)
define narrator = nvl_narrator
define menu = nvl_menu

这是一个应用以上定制化配置后的NVL界面样例。

gui/nvl.png样例图片。

应用以上定制化配置后的样例游戏。

文本(Text) link

大部分文本都可以利用GUI的配置项实现定制化。以下列出了可以使用的配置项：

define gui.kind_text_font link: 文本字体。

define gui.kind_text_size link: 文本字号。

define gui.kind_text_color link: 文本颜色。

其他文本样式特性也可以通过相同的方式来设置。例如，gui.kind_text_outlines设置了 outlines 特性。

指定文本类型的名称前缀可以省略，这样定制化后就是所有文本的默认外观设置。相反，也可以加上名称前缀，比如上面提到的各种按钮类型，或者以下的类型：

interface(接口): 针对out-of-game(游戏本体之外)的interface(接口)的默认文本。
input(输入): 针对文本输入控件的文本。
input_prompt: 针对文本输入提示语。
label: 针对装饰标签(label)。
prompt: 针对用户收到的提示确认之类问题。
name(名字): 针对角色名字(name)。
dialogue(对话): 针对各种对话(dialogue)。
notify(通知): 针对通知(notify)的文本。

样例:

define gui.dialogue_text_outlines = [ (0, "#00000080", 2, 2) ]

这将在对话文本下方产生右向的drop-shadow样式投影。

多语言支持(translation)和GUI配置项 link

gui命名空间是特殊的，在初始化阶段后gui命名空间内的设置将一直保持不变，除非运行到多语言支持(translation)python语句块。在多语言支持(translation)python语句块中更改GUI配置项，使得适配第二种语言文字的样式成为可能。例如，以下代码改变了默认文本的字体和字号。:

translate japanese python:
    gui.text_font = "MTLc3m.ttf"
    gui.text_size = 24

关于多语言支持(translation)有一点需要注意，那就是在gui.rpy文件的某些语句中，某个配置项已经声明为一个其他值的情况。例如，在默认的gui.rpy中包含:

define gui.interface_text_font = "DejaVuSans.ttf"

及:

define gui.button_text_font = gui.interface_text_font

由于这两个语句都在多语言支持(translation)语句块执行之前生效，所以这两个配置项都需要更改。

translate japanese python::

    define gui.interface_text_font = "MTLc3m.ttf"
    define gui.button_text_font = "MTLc3m.ttf"

如果忘了写第二个语句，DejaVuSans将依然被作为按钮文本的字体使用。

高级定制化 link

更多高级定制化可以通过定制化screen.rpy文件实现，甚至可以把整个文件清空并填上你自己写的内容。这里有几处要点有助你起步。

样式(style) link

样式和样式特性控制可视组件(displayable)的显示方式。若需要知道某个可视组件(displayable)使用的是什么样式(style)，之需要将鼠标移动到它上面并使用快捷键“shift+I”。这将唤起样式检测器，并显示样式名称。我们之后对应的样式名称后，就可以使用一个样式(style)语句实现对应样式的定制化。

比如说，我们在编写GUI有关文件时石乐志，想要在对话文本上添加一个高亮的红色轮廓线。我们可以把鼠标移动到对应文本上，并按下“shift+I”以找到了使用样式名为“say_dialogue”。然后我们就可以在一些文件(screens.rpy结尾，或者options.rpy某处)中添加样式(style)语句。:

style say_dialogue:
    outlines [ (1, "#f00", 0, 0 ) ]

利用样式(style)语句可以实现海量的定制化功能。

界面——引导(Screens - Navigation) link

接下去的定制化就需要修改界面(screen)了。关于界面(screen)部分最重要文档，详见界面和界面语言和界面行为、数值及函数段落。

最重要的界面之一，是引导(navigation)界面，同时用在主菜单和游戏菜单，提供引导用户的功能。该界面是可编辑的，比如在界面上增加更多的按钮。修改引导界面的例子如下:

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            textbutton _("Start") action Start()

            textbutton _("Prologue") action Start("prologue")

        else:

            textbutton _("Codex") action ShowMenu("codex")

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")

        textbutton _("Preferences") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        textbutton _("Extras") action ShowMenu("extras")

        if renpy.variant("pc"):

            textbutton _("Help") action ShowMenu("help")

            textbutton _("Quit") action Quit(confirm=not main_menu)

我们在主菜单之前加了一个prologue(序曲)界面，游戏菜单之前加了一个codex(规则)界面，在主菜单和游戏菜单之前都加了一个extras(附加)界面。

界面——游戏菜单(Screens - Game Menu) link

根据定制需求，游戏菜单界面可以被重新制作。新的游戏菜单界面提供了一个标题和可以滚动的视点。一个最小化的定制游戏菜单界面是这样的:

screen codex():

    tag menu

    use game_menu(_("Codex"), scroll="viewport"):

        style_prefix "codex"

        has vbox:
            spacing 20

        text _("{b}Mechanical Engineering:{/b} Where we learn to build things like missiles and bombs.")

        text _("{b}Civil Engineering:{/b} Where we learn to build targets.")

很明显，一个具有更多功能特性的codex(规则)界面比这要复杂得多。

请注意“tag menu”这行。这行非常重要，因为这行的功能是，在codex界面展示时，隐藏其他菜单界面。如果没有这行，规则界面与其他界面之间的切换就会变得很困难。

界面——单击继续 link

我们希望鼠标单击后进入下一个画面的界面。这是当文本全部显示完之后会出现的界面。这里是一个简单的样例:

screen ctc():

    frame:
        at ctc_appear
        xalign .99
        yalign .99

        text _("(click to continue)"):
            size 18

transform ctc_appear:
    alpha 0.0
    pause 5.0
    linear 0.5 alpha 1.0

这个特殊的ctc界面使用了一个延迟5秒的transform(转换)效果展现一个frame。CTC动画延迟几秒后显示是个好主意，这给Ren’Py足够的时间准备和加载图片文件。

GUI整体替换 link

高级创作者可能会部分甚至全部替换screen.rpy文件的内容。这样做的话，gui.rpy的部分或全部内容都会失效。调用 gui.init() 重置样式(style)可能是个好主意 - ——之后，创作者可能就可以为所欲为了。通常需要保证，在部分或所有的特殊界面中，用户能使用Ren’Py本身提供的各种基础功能。

不兼容的GUI变更 link

由于GUI的变化，有时候某些配置项也需要改名。当GUI被重新生成后，这些变更才会生效——不然，新版本的Ren’Py中，游戏会继续使用旧的配置项名称。

6.99.12.3 link

gui.default_font -> gui.text_font
gui.name_font -> gui.name_text_font
gui.interface_font -> gui.interface_text_font
gui.text_xpos -> gui.dialogue_xpos
gui.text_ypos -> gui.dialogue_ypos
gui.text_width -> gui.dialogue_width
gui.text_xalign -> gui.dialogue_text_xalign

GUI(图形用户接口)定制化指导 link

简单GUI定制化 link

更改尺寸和颜色 link

Options.rpy文件 link

游戏和主菜单背景图像 link

窗口图标 link

中级GUI定制化 link

对话(dialogue) link

选项菜单(choice menu) link

叠加图片(overlay image) link

颜色，字体和字号 link

Borders(边界) link

按钮(button) link

存档槽位按钮 link

滑块(slider) link

scrollbar(滚动条) link

条(bar) link

跳过(skip)和通知(notify) link

对话(dialogue)-续 link

文本框(textbox) link

名字(name)和名字框(namebox) link

对话(dialogue) link

样例 link

历史(history) link

NVL link

文本(Text) link

多语言支持(translation)和GUI配置项 link

高级定制化 link

样式(style) link

界面——引导(Screens - Navigation) link

界面——游戏菜单(Screens - Game Menu) link

界面——单击继续 link

GUI整体替换 link

更多 link

不兼容的GUI变更 link

6.99.12.3 link