Attention: Here be dragons
This is the latest
(unstable) version of this documentation, which may document features
not available in or compatible with released stable versions of Godot.
Checking the stable version of the documentation...
尺寸與錨點
如果遊戲始終只在同一台裝置且相同解析度下執行,只需設定每個控制項的位置與大小即可輕鬆完成配置。不過現實情況很少如此簡單。
雖然有些裝置組合較為常見,但像手機、平板電腦和掌上型遊戲主機等設備差異極大。因此,我們經常需要考量不同的螢幕比例、解析度與使用者縮放。
有幾種方式可以應對這些狀況,但現在,請想像螢幕解析度已經改變,控制項必須重新定位。有些需要貼齊螢幕底部,有些要對齊頂部,或是左、右邊界。
這可以透過調整控制項的 錨點偏移*(anchor offsets)來達成,這類似於設定邊距。若要調整這些設定,需先選擇 *自訂 錨點預設值。
每個控制項都有四個錨點偏移:左、右、下、上,分別對應控制項的四個邊。預設情況下,這些偏移值代表相對於父控制項左上角(或沒有父控制項時,則為視窗區)的像素距離。
因此,若要讓控制項變寬,可以增加右側偏移值,或減少左側偏移值。這樣你就能精確控制控制項的位置與形狀。
錨點 屬性用來調整每個偏移值的參考位置。每個邊的偏移都各有一個獨立的錨點,可從父項的起點調整到終點。垂直(上、下)錨點的範圍從 0.0``(父項頂部)到 ``1.0``(父項底部),``0.5 則表示中心點,控制項的偏移值會以該點為基準。水平(左、右)錨點則用來調整父項的左右範圍。
請注意,若希望控制項的邊緣位於錨點的上方或左方,偏移值必須設為負數。
例如:當水平錨點(左、右)設為 1.0 時,偏移值就會變成相對於父控制項或視窗區的右側。
當水平或垂直的兩個錨點設為不同的值時,控制項會隨著父控制項尺寸改變而調整。在這個例子中,控制項的右下角錨定在父項右下角,左上角的偏移仍舊對齊父項左上,這樣當父項縮放時,該控制項會始終覆蓋整個父項,只留下 20 像素的間距:
控制項置中
若要將控制項置中於父項,請將所有錨點設為 0.5,每個偏移值則設為其對應尺寸的一半。以下範例程式碼展示如何讓 TextureRect 在父項中置中:
var rect = TextureRect.new()
rect.texture = load("res://icon.svg")
rect.anchor_left = 0.5
rect.anchor_right = 0.5
rect.anchor_top = 0.5
rect.anchor_bottom = 0.5
var texture_size = rect.texture.get_size()
rect.offset_left = -texture_size.x / 2
rect.offset_right = texture_size.x / 2
rect.offset_top = -texture_size.y / 2
rect.offset_bottom = texture_size.y / 2
add_child(rect)
var rect = new TextureRect();
rect.Texture = ResourceLoader.Load<Texture>("res://icon.svg");
rect.AnchorLeft = 0.5f;
rect.AnchorRight = 0.5f;
rect.AnchorTop = 0.5f;
rect.AnchorBottom = 0.5f;
var textureSize = rect.Texture.GetSize();
rect.OffsetLeft = -textureSize.X / 2;
rect.OffsetRight = textureSize.X / 2;
rect.OffsetTop = -textureSize.Y / 2;
rect.OffsetBottom = textureSize.Y / 2;
AddChild(rect);
將每個錨點設為 0.5,會將偏移值的參考點移至父項的中心。此時,設定負值偏移,讓控制項顯示其原本的尺寸。
錨點預設值
除了手動調整偏移和錨點數值外,還可以使用視窗區上方工具列的「錨點」選單。除了置中之外,還有多種對齊和調整控制節點大小的選項。