Ren's Py 中文文档翻译计划--自定义GUI向导

Ren'Py 具有一个开箱即用,可自定义的并如果有必要可以完全替换的GUI系统。本向导旨在阐释如何进行简单和中级的GUI自定义。

更高级的自定义部分请参见 stylesscreen 部分。

这表示您正在使用新款的 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_colorgui.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