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.

尺寸與錨點

如果遊戲始終只在同一台裝置且相同解析度下執行,只需設定每個控制項的位置與大小即可輕鬆完成配置。不過現實情況很少如此簡單。

雖然有些裝置組合較為常見,但像手機、平板電腦和掌上型遊戲主機等設備差異極大。因此,我們經常需要考量不同的螢幕比例、解析度與使用者縮放。

有幾種方式可以應對這些狀況,但現在,請想像螢幕解析度已經改變,控制項必須重新定位。有些需要貼齊螢幕底部,有些要對齊頂部,或是左、右邊界。

../../_images/anchors.png

這可以透過調整控制項的 錨點偏移*(anchor offsets)來達成,這類似於設定邊距。若要調整這些設定,需先選擇 *自訂 錨點預設值。

每個控制項都有四個錨點偏移:左、右、下、上,分別對應控制項的四個邊。預設情況下,這些偏移值代表相對於父控制項左上角(或沒有父控制項時,則為視窗區)的像素距離。

../../_images/offset.webp

因此,若要讓控制項變寬,可以增加右側偏移值,或減少左側偏移值。這樣你就能精確控制控制項的位置與形狀。

錨點 屬性用來調整每個偏移值的參考位置。每個邊的偏移都各有一個獨立的錨點,可從父項的起點調整到終點。垂直(上、下)錨點的範圍從 0.0``(父項頂部)到 ``1.0``(父項底部),``0.5 則表示中心點,控制項的偏移值會以該點為基準。水平(左、右)錨點則用來調整父項的左右範圍。

請注意,若希望控制項的邊緣位於錨點的上方或左方,偏移值必須設為負數。

例如:當水平錨點(左、右)設為 1.0 時,偏移值就會變成相對於父控制項或視窗區的右側。

../../_images/offset_end.webp

當水平或垂直的兩個錨點設為不同的值時,控制項會隨著父控制項尺寸改變而調整。在這個例子中,控制項的右下角錨定在父項右下角,左上角的偏移仍舊對齊父項左上,這樣當父項縮放時,該控制項會始終覆蓋整個父項,只留下 20 像素的間距:

../../_images/offset_around.webp

控制項置中

若要將控制項置中於父項,請將所有錨點設為 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)

將每個錨點設為 0.5,會將偏移值的參考點移至父項的中心。此時,設定負值偏移,讓控制項顯示其原本的尺寸。

錨點預設值

除了手動調整偏移和錨點數值外,還可以使用視窗區上方工具列的「錨點」選單。除了置中之外,還有多種對齊和調整控制節點大小的選項。

../../_images/anchor_presets.webp