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...

Розмір і анкери

Якби гру запускали на тому самому пристрої із тою ж самою роздільною здатністю, то щоб розставити елементи інтерфейсу, достатньо було би просто вказати кожному з них положення та розмір. На жаль, таке буває вельми рідко.

Хоча деякі конфігурації можуть бути більш поширеними, ніж інші, такі пристрої, як телефони, планшети та портативні ігрові консолі, можуть значно відрізнятися. Тому нам часто доводиться враховувати різні співвідношення сторін, роздільну здатність і масштабування користувача.

Є кілька способів пояснити це, але наразі уявімо, що роздільна здатність екрана змінилася, і елементи керування потрібно змінити. Деяким потрібно буде стежити за нижньою частиною екрана, іншим за верхньою частиною екрана або, можливо, за правим чи лівим полями.

Це робиться шляхом редагування зсувів прив’язки елементів керування, які поводяться подібно до поля. Щоб отримати доступ до цих налаштувань, вам спочатку потрібно буде вибрати Custom прив’язку.

Кожен елемент керування має чотири опорні зміщення: ліворуч, праворуч, знизу та вгорі, які відповідають відповідним краям елемента керування. За замовчуванням усі вони представляють відстань у пікселях відносно верхнього лівого кута батьківського елемента керування або (якщо батьківського елемента керування немає) вікна перегляду.

Отже, щоб зробити елемент керування ширшим, ви можете зробити правий зсув більшим і/або зменшити лівий. Це дозволяє встановити точне розташування та форму елемента керування.

Властивості anchor регулюють зсуви відносно до. Кожне зміщення має окрему прив’язку, яку можна регулювати від початку до кінця батьківської. Таким чином, вертикальні (верхній, нижній) прив’язки регулюються від 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 переміщує опорну точку для зсувів до центру його батьківського елемента. Звідти ми встановлюємо від’ємні зсуви, щоб елемент керування отримав свій природний розмір.

Попередні налаштування прив’язки

Замість того, щоб вручну налаштовувати значення зміщення та прив’язки, ви можете скористатися меню прив’язки на панелі інструментів над вікном перегляду. Окрім центрування, він надає багато варіантів вирівнювання та зміни розміру контрольних вузлів.