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