Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

大小和錨點

如果一個遊戲總是用同一解析度在同樣的裝置上運作, 擺放控制項將是一個簡單的事, 只要逐個設定它們的位置屬性和大小屬性即可. 不幸的是, 能像這樣處理的情況很少.

如今只有電視機有標準解析度和縱橫比. 而其他所有裝置, 從電腦顯示器到平板電腦, 便攜遊戲主機和手機等等, 都有不同的解析度和縱橫比.

有幾種方法來處理這個問題, 但現在, 讓我們想像一下, 螢幕解析度已經改變, 控制項需要重新定位. 有的需要跟隨螢幕的底部, 有的需要跟隨螢幕的頂部, 也有的需要跟隨左右邊距.

../../_images/anchors.png

這是通過編輯控制項的 margin 屬性來實作的。每個控制項都有四個邊距:左、右、底、頂。預設情況下,它們都表示相對於父控制項的左上角或(在沒有父控制項的情況下)視口的像素距離。

../../_images/margin.png

因此,要使控制項更寬,您可以增加右邊距和/或減少左邊距。這使您可以設定控制項的確切位置和形狀。

anchor 屬性調整邊距距離相對於*的位置。每個邊距都有一個單獨的錨點,可以從父級的開頭到結尾進行調整。因此,垂直(頂部、底部)錨點從 0(父級頂部)調整到 1.0(父級底部),其中 0.5 為中心,控制邊距將相對於該點放置。水平(左、右)錨點類似地從父級的左到右調整。

請注意,當您希望控制項的邊緣位於錨點的上方或左側時,必須將邊距值變更為負值。

當水平(左, 右)和/或 垂直(上, 下)錨點被改為1時, 邊距值就會變成相對於父控制項或視口的右下角.

../../_images/marginend.png

將兩個水平或兩個垂直錨點調整為不同的值將使控制項隨著父控制項的大小而改變。在這裡,控制項設定為將其右下角錨定到父級的右下角,而左上角的控制項邊距仍然錨定到父級的左上角,因此當重新調整父級的大小時,控制項將始終覆蓋它,留出20 像素的邊距:

../../_images/marginaround.png

建立內容

要將控制項集中到其父控制項中, 其錨定值為0.5, 每個邊距為其相關尺寸的一半. 例如, 下面的程式碼顯示了如何將紋理矩形居中到它的父節點:

var rect = TextureRect.new()
rect.texture = load("res://icon.png")
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, 將邊緣的參考點移動到父錨點的中心. 在此基礎上, 我們設定了負邊距, 以便控制項獲得其自然大小.

匯出 Preset

除了手動調整邊距和錨點的值之外,你還可以使用視口上方工具列中的“佈局”功能表。其中有居中等諸多選項,可以用來對齊並調整節點的大小。

../../_images/layout_dropdown_menu.png