(譯者註:property一詞通常翻譯成“屬性”。鑑於文件中的attribute也可以翻譯成“屬性”。為了防止混淆,將property翻譯為“特性”。)
樣式特性與 樣式 相關,控制可視組件的顯示方式。樣式特性出現時可以沒有前綴,這種情況下樣式特性應用於所有狀態的可視組件;帶前綴的樣式特性則限制了應用組件的狀態。
增加前綴可以從樣式特性名稱上就能看出作用於哪些狀態的可視組件,比如得到焦點或者被選擇狀態。例如,某個按鈕可以在滑鼠懸停其上的時候改變顏色,或者提示按鈕對應的選項就是目前使用的選項。
可視組件總共有5種狀態可用作樣式特性前綴。
按鈕和條類可視組件(包括他們的各類變種)在收到事件消息後,會更新自身和子組件的狀態。例如,當用戶把滑鼠移動到某個未被選擇的按鈕上方,按鈕及其子組件都會把狀態改為hover。
樣式特性前綴名允許外延。這裡是一個前綴狀態及其能外延的所有可視組件狀態映射關係。
| prefix | states implied by prefix |
|---|---|
| (no prefix) | insensitive, idle, hover, selected_idle, selected_hover |
idle_ |
idle, selected_idle |
hover_ |
hover, selected_hover |
selected_ |
selected_idle, selected_hover |
insensitive_ |
insensitive |
selected_idle_ |
selected_idle |
selected_hover_ |
selected_hover |
selected_insensitive_ |
selected_insensitive |
我們可以使用一個文本按鈕實際示範一下。文本按鈕使用兩個預設的樣式: button 用於按鈕本身, button_text 用於按鈕上的文本。 background 樣式特性設置按鈕的背景, color 特性設置文本顏色:
# 當按鈕為insensitive狀態時,背景為灰色;hover狀態是,背景為淺藍;
# 其他情況下,背景為深藍。
style button:
background "#006"
insensitive_background "#444"
hover_background "#00a"
# 當按鈕為selected狀態時,文本為黃色;其他情況下為白色。
style button_text:
color "#fff"
selected_color "#ff0"
每種樣式特性對應每種特定類型的數據。許多特性值都是標準的python數據類型,有一些是novel類型。這裡會對這些novel類型的數據進行詳細說明。
position用於指定以左上角為原點的坐標系中的位置。(對position來說,可用區域由可視組件所在的圖層給定,如果沒有圖層就是整個界面。對anchor來說,可用區域是其自身可視組件的大小。)
position值的解釋方法取決於數據類型:
absolute 數被解釋為像質數量,從可用區域最左邊或頂邊算起。Ren’Py中的color可以寫作以符號(#)開頭、後面接十六進位制的字串。十六進位制字串長度可以為3或4的整數倍,分別對應幾種顏色。
十六進位制字串為3的整數倍時,分別對應紅、綠、藍三種顏色。十六進位制字串為4的整數倍時,分別對應紅、綠、藍和alpha通道值。舉例:
"#f00" 和 "#ff0000" 表現為純紅。"#0f08" 和 #00ff0080" 表現為某種半透明的綠色。顏色代碼規律和用於HTML的顏色代碼相同。
color也可以用一個4元素的元組,每個元素都是介於0到255的整數,順序對應紅、綠、藍和alpha通道值。
(0, 0, 255, 255) 表現為完全不透明的藍色。最後,color可以是 Color 類的一個實例。
當某個樣式特性包含“[prefix_]”可替換前綴,就會進行前綴搜索。前綴搜索會查找沒一種狀態前綴,根據原特性已經明確聲明過的訊息。
舉例,如果我們有如下腳本:
style button:
hover_background "[prefix_]background.png"
樣式前綴搜索會分別搜索hover和selected_hover狀態。前綴的搜索基於樣式特性定義語句中的state值。
| state | search order |
|---|---|
| idle | “idle_”, “” |
| hover | “hover_”, “”, |
| insensitive | “insensitive_”, “”, “idle_” |
| selected_idle | “selected_idle_”, “idle_”, “selected_”, “” |
| selected_hover | “selected_hover_”, “hover_”, “selected_”, “” |
| selected_insensitive | “selected_insensitive_”, “hover_”, “selected_”, “”, “selected_idle_”, “idle_” |
樣式前綴搜索按上面表格給出的順序進行。然後Ren’Py會堅持是否有符合那個名稱的可載入文件或者圖像存在。如果文件或圖像存在,樣式前綴搜索就會結束,並且使用找到的可視組件。否則,搜索會繼續嘗試下一個前綴。
樣式前綴會傳給可視組件,不需要用戶輸入。
這裡是一個樣例,示範這個功能如何使用。假設文件“idel_button.png”和“hover_button.png”存在(並且不存在其他以“button.png”字串結尾的其他文件):
style button:
background "[prefix_]button.png"
等效於:
style button:
idle_background "idle_button.png"
hover_background "hover_button.png"
insensitive_background "idle_button.png"
selected_idle_background "idle_button.png"
selected_hover_background "hover_button.png"
selected_insensitive_background "idle_button.png"
樣式特性控制各種可視組件的外觀。但並不是所有特性都能應用於所有可視組件,所以我們將特性分了幾個組。
這類特性可以應用於所有可視組件,大部分通過布局(layout)控制可視組件在區域內的位置,或者不使用布局(layout)時直接控制在整個界面的位置。
xpos - position link可視組件相對於可選區域左端的位置。
ypos - position link可視組件相對於可選區域頂端的位置。
pos - tuple of (position, position) link將xpos和ypos放入一個元組,分別作為元組的第一個和第二個元素。
xanchor - position link錨點相對於可選區域左端的位置。
yanchor - position link錨點相對於可選區域頂端的位置。
anchor - tuple of (position, position) link將xanchor和yanchor放入一個元組,分別作為元組的第一個和第二個元素。
xalign - float link將xpos和xanchor設置為相同值。根據該值將可視組件顯示在界面的某個相對位置上,0.0表示左對齊,0.5表示居中,1.0表示右對齊。
yalign - float link將ypos和yanchor設置為相同值。根據該值將可視組件顯示在界面的某個相對位置上,0.0表示頂端對齊,0.5表示居中,1.0表示底端對齊。
align - tuple of (float, float) link將xalign和yalign放入一個元組,分別作為元組的第一個和第二個元素。
xcenter - position link將xpos設為該特性的值,將xanchor設為0.5。
ycenter - position link將ypos設為該特性的值,將yanchor設為0.5。
xoffset - int link給出了水平方向的偏移值,單位為像素。
yoffset - int link給出了垂直方向的偏移值,單位為像素。
offset - tuple of (position, position) link同時給出水平和垂直方向的偏移值,分別使用元組的第一個和第二個元素。
xmaximum - int link指定可視組件水平方向尺寸最大值,單位為像素。
ymaximum - int link指定可視組件垂直方向尺寸最大值,單位為像素。
maximum - tuple of (int, int) link使用元組指定可視組件尺寸最大值,水平和垂直方向分別使用元組的第一個和第二個元素。
xminimum - int link設置可視組件的最小寬度,單位為像素。僅對可以改變尺寸的可視組件有效。
yminimum - int link設置可視組件的最小高度,單位為像素。僅對可以改變尺寸的可視組件有效。
minimum - tuple of (int, int) link使用元組設置xminimum和yminimum。
xsize - int link將xminimum和xmaximum設置為相同值。該特性對可視組件的寬度生效。
ysize - int link將yminimum和ymaximum設置為相同值。該特性對可視組件的高度生效。
xysize - tuple of (int, int) link使用元組第一個元素設置xminimum和xmaximum,使用元組的第二個元素設置yminimum和ymaximum。該特性對可視組件的尺寸生效。
xfill - boolean link若為True,可視組件會在水平方向填滿所有可用空間。若不為True,可視組件只占用包含所有子組件的空間。
僅對可以改變尺寸的可視組件有效。
yfill - boolean link若為True,可視組件會在垂直方向填滿所有可用空間。若不為True,可視組件只占用包含所有子組件的空間。
僅對可以改變尺寸的可視組件有效。
area - tuple of (int, int, int, int) link元組內元素可解釋為 (xpos, ypos, width, height)。如果把某個可視組件的左上角放在 xpos 和 ypos 對應的位置,那麼它的尺寸就是 width 和 height。
這個特性會把xpos、ypos、xanchor、yanchor、xmaximum、ymaximum、xminimum、yminimum、xfill和yfill自動設置為合適的值。
但這個特性並不適用於所有的可視組件和布局(layout)。
mipmap - boolean 或 None link該特性控制可視組件創建的紋理是否使用mipmap。該特性只適用於某些可視組件,包括 Text(),Movie() 和 dissolve。
若非None,預設值從配置項 config.mipmap_text,config.mipmap_movies 和
config.mipmap_dissolves 獲取。
antialias - boolean link若為True,默認情況,全真字體(truetype font)文本會使用反鋸齒渲染。
adjust_spacing - boolean or str link若為True,Ren’Py會調整繪製解析度下文本間隙以匹配虛擬解析度下渲染的文本間隙,確保frame和其他容器類內的文本不會被改變。
若設置為False,文本不會改變字號,但確保在任何窗口大小下布局文本都有足夠空間,這是創作者的職責。
當字串設置為“horizontal”時,僅在水平方向調整文本。 當字串設置為“vertical”時,僅在垂直方向調整文本。
對大多數文本來說都是用預設值True,但在需要 input 輸入的情況下使用False。
altruby_style - style or None link如果為值非None,這應是一個樣式對象。它是給可選上標文字使用的樣式。
black_color - color link當渲染某個基於圖像的字體時,黑色會被映射為需要的顏色。這個特性對全真(truetype)字體無效。
bold - boolean link若為True,使用粗體渲染。對全真(truetype)字體來說,這個特性會會綜合提升字體的重量(weight)。這個特性也可能會觸發字體映射,使用
config.font_replacement_map 配置的值。
caret - displayable or None link若非None,其應是一個可視組件。輸入部件會使用這個可視組件顯示在文本的末尾。若為空,會有一條1像素寬的線在行尾閃爍。
color - color link文本渲染使用的色彩。當使用某個全真(truetype)字體時,字體會直接使用色彩渲染。當使用基於圖像的字體時,白色會映射為指定的色彩。
first_indent - int link首行縮進量,單位是像素。
font - string link用於渲染文本的字體名稱字串。
對於全真(truetype)字體檔案來說,該字串通常就是包含字體的檔案名(例如 "DejaVuSans.ttf")。如果需要使用字體集的第二種字體,就在字體名前面加一個數字和@符號,(例如 “0@font.ttc” 或 “1@font.ttc”)。對於基於圖像的字體來說,該字串是字體註冊時使用的名稱。
size - int link界面中字體的字號。通常字號大小就是字體高度的像素值,字體檔案中可能還會插入幾個像素。
italic - boolean link若為True,使用斜體渲染文本。對全真(truetype)字體來說,這個特性會會綜合提升字體的傾斜度(slant)。這個特性也可能會觸發字體映射,使用
config.font_replacement_map 配置的值。
justify - boolean link若該值為True,單詞之間會插入額外的空白,每行文字左右兩端的空白也會增加。段落最後一行的結尾不會發生變化。
kerning - float link字偶距調整,任意兩個字元之間的空白像質數會增加。(如果要縮小字元之間的空白,該值應該是負數。)
language - string link控制語言文字族斷行。合法值如下:
"unicode" (default)"japanese-strict""japanese-normal""japanese-loose""korean-with-spaces""western"三種日語的斷行模式來源於 CSS3文本模組。
layout - string link控制每行單詞(字)的分配方式。合法值如下:
"tex" (default)"subtitle""greedy""nobreak"line_leading - int link每行所占空間的像質數。
line_overlap_split - int link在慢速文本模式下兩行文本有重疊部分,這部分重疊像素分配給上面那行文本。如果上面那行文本的底部出現了被裁減的情況,就增加該特性的值。
line_spacing - int link每一行下面空間的像質數。
min_width - int link設置每行的最小寬度。如果某行的段度小於該值,會被填充至該值。text_align用於指定填充方式。
newline_indent - boolean link若為True, first_indent 的縮進量會應用於每個新行。否則使用 rest_indent
的縮進量。
outlines - list of tuple of (int, color, int, int) link這是一個文本後繪製的輪廓線列表。每個元組指定一種輪廓線,輪廓線從後往前繪製。
列表中包含 (size, color, xoffset, yoffset) 形式的元組。 Size 是字體外沿尺寸,單位為像素。 Color 是輪廓線色彩。 xoffset 和 yoffset 是輪廓線的位移,單位為像素。
輪廓線功能可以用於給字體添加投影,方法是將size設為0,偏移量設為非0。
默認情況下, size, xoffset 和 yoffset 會隨文本一同拉伸。當我們給定absolute類型時,就能禁止拉伸。舉例:
style default:
outlines [ (absolute(1), "#000", absolute(0), absolute(0)) ]
這段腳本產生了1像素寬的邊界。
輪廓線只對全真(truetype)字體有效。
rest_indent - int link指定段落首行之外的縮進量,單位為像素。
ruby_style - style or None link如果非None,該值是一個樣式對象。該樣式不能用於ruby文本。
slow_abortable - boolean link如果為True,能傳到文本對象的點擊事件會觸發退出慢速文本模式,這意味著後面部分的文本會立刻顯示。
slow_cps - int or True link如果是一個整數,表示每秒顯示的字元速率。如果為True,使用個性化配置中的“文本速度”。
slow_cps_multiplier - float link文本顯示速度會乘上該值。可以用於表現某個角色的說話速度比正常速率略快的情況。
strikethrough - boolean link若為True,每行文字會添加刪除線。
text_align - float link當一行文本的寬度比文本組件的寬度小時,該項起作用。其決定文本左邊會有多少留白。(也就是文本的對齊。)
0.0表示左對齊,0.5表示中央對齊,1.0表示右對齊。
underline - boolean link若為True,文本會添加下劃線。
hyperlink_functions - tuple of (function, function, function) link這是由三個與超連結有關的函數構成的元組。
第一個元素是超連結樣式函數。當使用一個入參(超連結)調用函數時,會返回得到用於該超連結的樣式對象,比如 style.hyperlink_text 。需要注意,樣式對象並不是一個字串。
第二個元素是超連結點擊函數。當超連結被用戶選中的時候,該函數會被調用。如果該函數返回一個值並且不是None,這個值也會作為互動行為的返回值。
第三個元素是超連結焦點函數。當超連結獲取焦點時,該函數會被調用,並將超連結作為入參;當超連結失去焦點時,該函數也會被調用,入參使用空值(None)。如果該函數返回一個值並且非空,這個值也會作為互動行為的返回值。
vertical - boolean link若為True,文本內容會渲染為垂直文本。
hinting - str link控制字體如何進行微調。可以是以下幾個字串之一:
窗口特性用於指定窗口、框架和按鈕的外觀。
background - displayable or None link用作窗口背景的可視組件。通常是一個:func:Frame,能根據窗口大小拉伸背景的尺寸。
若為None,不繪製背景。但其他特性函數會假設背景存在。
foreground - displayable or None link若不為None,該可視組件會在窗口內容上繪製並覆蓋。
left_margin - int link背景左端的透明空間量,單位為像素。
right_margin - int link背景右端的透明空間量,單位為像素。
xmargin - int link等效於將left_margin和right_margin設置為相同的值。
top_margin - int link背景頂端的透明空間量,單位為像素。
bottom_margin - int link背景底端的透明空間量,單位為像素。
ymargin - int link等效於將top_margin和bottom_margin設置為相同的值。
margin - tuple link如果出現的是2個元素的元組,分別將xmargin和ymargin設置為對應的兩個元素值。如果出現的是4元素元組,分別將left_margin、top_margin、right_margin和bottom_margin設置為對應的4個元素值。
left_padding - int link背景與窗口內容左邊的空間量,單位為像素。
right_padding - int link背景與窗口內容右邊的空間量,單位為像素。
xpadding - int link等效於將left_padding和right_padding設置為相同的值。
top_padding - int link背景與窗口內容頂邊的空間量,單位為像素。
bottom_padding - int link背景與窗口內容底邊的空間量,單位為像素。
ypadding - int link等效於將top_padding和bottom_padding設置為相同的值。
padding - tuple link如果出現的是2個元素的元組,分別將xpadding和ypadding設置為對應的兩個元素值。如果出現的是4元素元組,分別將left_padding、top_padding、right_padding和bottom_padding設置為對應的4個元素值
size_group - string or None link若非None,該值是一個字串。Ren’Py會使用size_group值相同的尺寸渲染所有窗口。
modal - boolean or callable link若為True,窗口設為模態。滑鼠點擊事件值對當前窗口內的window或按鈕組件有效,不會廣播穿透。 若為False,窗口設為非模態。
該項也可以是一個可調用的函數。 其為函數時,入參使用(ev, x, y, w, h)形式的四元元組。其中ev是pygame事件消息,也可能是None籠統表示一個滑鼠事件;x和y表示窗口坐標,w和h表示窗口的寬和高。函數返回為True時,窗口視為模態,否則視為非模態。
child - displayable or None link若非None,給出的可視組件會替換按鈕的子組件。例如,該可視組件(作為insensitive_child)可以用於替換insensitive的按鈕圖片內容,insensitive表示按鈕被鎖住無法使用。
hover_sound - string link當按鈕獲取焦點時,一個音效會播放。
activate_sound - string link當按鈕被點擊時,一個音效會播放。
mouse - string link滑鼠樣式用於按鈕獲得焦點狀態。這是定義在 config.mouse 中的樣式之一。
focus_mask - multiple link一個mask遮罩,用於控制按鈕哪些區域可以獲得焦點,哪些區域不響應點擊。該特性的類型決定了其如何被解釋。
keyboard_focus - boolean link若為True,也是預設值,按鈕可以通過鍵盤的焦點機制獲得焦點,前提是這個按鈕本身允許獲得焦點。若為False,鍵盤焦點機制會跳過這個按鈕。(鍵盤焦點機制使用鍵盤或者類似鍵盤的設備,比如遊戲手把。)
key_events - boolean link若為True,鍵盤生成的事件消息會傳給鍵盤的子組件。若為False,這些事件就不會向下廣播。默認樣式中,按鈕上有滑鼠懸停時該值為True,其他情況下該值為False。
將這個值設置為True可以用於廣播鍵盤事件消息至某個按鈕內的輸入框,而那個按鍵並不需要獲得焦點。
條(bar)是一個左右兩邊帶有溝槽的組件,點擊後觸發條條內平移一小段距離。滑塊與左右兩端的間隔就是還允許移動的距離。
滑塊是條(bar)中允許用戶拖拽的部分。
當繪製一個條(bar)後,滑塊的陰影首先被繪製。然後是滑塊本身,最後是條(bar)的左/底邊和右/頂邊。
需要注意條(bar)的邊取決於bar_vertical特性的值。若bar_vertical為True,頂邊和底邊會實際繪製。否則,只有左邊和右邊。
bar_vertical - boolean link若為True,縱向條(bar)。若為False,橫向條(bar)。
bar_invert - boolean link若為True,條(bar)上滑塊對應的值顯示在右/上側;否則,顯示在左/下側。
bar_resizing - boolean link若為True,重新調整條(bar)的尺寸。若為False,使用全尺寸渲染各條邊,然後裁剪。
left_gutter - int link左邊溝槽尺寸,單位為像素。
right_gutter - int link右邊溝槽尺寸,單位為像素。
top_gutter - int link頂邊溝槽尺寸,單位為像素。
bottom_gutter - int link底邊溝槽尺寸,單位為像素。
left_bar - displayable link用於左邊的可視組件。
right_bar - displayable link用於右邊的可視組件。
top_bar - displayable link用於頂邊的可視組件。
bottom_bar - displayable link用於底邊的可視組件。
base_bar - displayable link單個可視組件用於left_bar/right_bar或者top_bar/bottom_bar,自動適配。(帶滑塊的情況下,還可以用作滑動條或者滑動欄。)
thumb - displayable or None link若非None,這是一個繪製在條(bar)的各條邊空間內的可視組件。
thumb_shadow - displayable or None link若非None,這是一個繪製在條(bar)的各條邊空間內的可視組件。
thumb_offset - int link滑塊與條(bar)重疊部分的大小,單位為像素。如果想讓條(bar)的左右兩邊看起來不像被截斷的樣子,就把滑塊的寬度設為條(bar)寬度的一半。
mouse - string link滑鼠樣式,用於按鈕獲得焦點時。該字串應是 config.mouse 定義的樣式之一。
unscrollable - string or None link當無法滾動時,控制條(bar)的行為表現(如果滾動範圍設置為0,視點範圍內的可視組件小於其自身)。總共有3種可能的值:
None"insensitive""hide"keyboard_focus - boolean link若為True,也是預設值,按鈕可以通過鍵盤的焦點機制獲得焦點,前提是這個按鈕本身允許獲得焦點。若為False,鍵盤焦點機制會跳過這個按鈕。(鍵盤焦點機制使用鍵盤或者類似鍵盤的設備,比如遊戲手把。)
這些樣式特性用於橫向和縱向的方塊布局。
spacing - int link方塊內成員之間的空間距離,單位為像素。
first_spacing - int link若非None,表示,方框內的第一個跟第二個成員間的空間距離,單位為像素。該值覆蓋spacing特性。
box_reverse - boolean link若為True,方塊內物品位置將被翻轉。hbox左右鏡像翻轉,vbox上線鏡像翻轉。默認情況下的值為False。
box_wrap - boolean link若為True,當到達方塊最後一行或列時會發生扭轉(warp)。若為False,會在每一行的結尾擴展。
box_wrap_spacing - int link當box_wrap為True時,box_wrap_spacing項用於指定被wrap的行或列的間距。 (行間距就是被warp的hbox在垂直方向空間,列間距就是被warp的vbox在水平方向的空間。)
這些特性用於網格(grid)和虛擬樣機網格(vpgrid)可視組件中。
spacing - int link各網格單元之間的空間,單位為像素。
xspacing - int or None link各網格單元之間水平方向的空間,單位為像素。當這個值不是None時,優先度比spacing特性高。
yspacing - int or None link各網格單元之間垂直方向的空間,單位為像素。當這個值不是None時,優先度比spacing特性高。
這些特性用於固定布局(layout)。
fit_first - boolean or “width” or “height” link若為True,固定寬度的布局所有單元尺寸都會嚴格等於第一個單元內元素的尺寸。如果是“width”,只有單元格寬度能改變(固定布局會在垂直方向上填滿界面)。類似的,“height”值能改變單元跟高度。
xfit - boolean link若為True,固定布局的尺寸在水平方向會嚴格匹配最右側子組件的尺寸。
yfit - boolean link若為True,固定布局的尺寸在垂直方向會嚴格匹配最底部子組件的尺寸。
order_reverse - boolean link若為False,也就是預設值,方框內元素會從前往後繪製,第一個元素下面是第二個元素。若為True,順序會倒過來,第一個元素會在方框最底層。
邊距(margin)樣式特性用於增加某些可視組件周圍的透明空間。可用於:window、frame、button、grid和vpgrid。
left_margin - int link可視組件左邊距,單位為像素。
right_margin - int link可視組件右邊距,單位為像素。
xmargin - int link等效於,將左邊距和右邊距設置為相同的值。
top_margin - int link可視組件上邊距,單位為像素。
bottom_margin - int link可視組件下邊距,單位為像素。
ymargin - int link等效於,將上邊距和下邊距設置為相同的值。
margin - tuple link該值可以是一個2元元組,分別設置xmargin和ymargin。 該值也可以是一個4元元組,分別設置left_margin、top_margin、right_margin和bottom_margin。