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 ：用于游戏菜单的图片。

background

窗口图标

替换 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")

dialoguebox

选择分支菜单

两个图像文件可以自定义分支背景：

  • 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'

修改了选支窗口未被聚焦和鼠标悬浮是的文字颜色.

choicemenu

遮罩图片

遮罩图片用来增亮或减暗背景图片而使按钮等元素显得更加显眼。在 overlay 文件夹中我们可以看到这些图片：

  • gui/overlay/main_menu.png：用于主菜单的遮罩图片

  • gui/overlay/game_menu.png：用于游戏中菜单的遮罩图片

  • gui/overlay/confirm.png：在确认屏幕中暗化背景的图片

overlay_image

颜色，字体和字体大小

除了之前提到的 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 游戏标题字体大小

colorfont

边框

许多GUI元素例如按钮和进度条使用可缩放的背景来配置边框对象。

一个框架将一张图片分为九部分，四个角，四个边，一个中心。四个角总是相同大小，左右边可以垂直缩放，上下面可以水平缩放，中心部分均匀缩放。

一个边框对象基于四个边大小，如图：

border

代码如下：

Borders(40, 40, 40, 40)

一种可能的情况如图：

border2

边框也允许被填充，包括负填充可能导致子元素覆盖边框。代码如下：

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

border3

按钮

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)

button