В этой небольшой статье рассмотрим такие важные моменты при создании интерфеисов как аnchors и margins. Якоря и отступы, если по нашему.
Важная ремарка — в этой статье я не буду обьяснять как работают и для чего нужны ноды класса Control. Об этом есть отдельная статья в группе.
Начнем с того, что для правильной подгонки элементов на разных экранах нам необходимо правильно настроить сам режим отрисовки. Для этого заходим в настройки , ищем раздел Display > Window. И в самом низу выставляем режим 2D + Expand.
Данный режим позволит нам расширять зону экрана приложения в пределах окна приложения
Теперь приступим к самой сцене.
Тут необходимо сразу сделать еще одно важное замечание. Если у вас корневая нода не принадлежит классу CanvasItem, то вам необходимо будет добавлять ноду СanvasLayer как родителя для Control ноды.
Рассмотрим сразу в пределах этой статьи оба случая.
Наша задача : Собрать интерфеис таким образом, чтобы кнопка была всегда с правом нижнем углу при ЛЮБОМ разрешении экрана.
1) Вы нажали 2D Scene когда создавали новую сцену, и ваша корневая нода Node2D.
Добавляем в проект СanvasLayer , Control и ноду которую будем выставлять относительно экрана, в нашем случае Button.
В верхней части годо можно увидеть меню Layout. Нажав на которое мы получим расклад по основным видам выравнивания элементов.
Выбираем ноду Control, и устанавливаем ей Full Rect.
А для ноды Button устанавливаем Bottom Right.
И теперь меняя размер Сontrol ноды, можем наблюдать непосредственно в редакторе изменение положения кнопки.
Запустим приложение, и проверим там.
Тут тоже все работает как и планировали.
2) В варианте где сцена основана на ноде Control нода CanvasLayer не требуется.
Далее разберемся с тем , как это можно всё настроить без меню Layout.
У каждой ноды класса Control есть набор свойств — Anchor / Margin
Эти свойста отвечают за то, относительно чего будет распологаться нода, и с какими отступами.
Anchor — Якорь. Точка к которой прикрепляется нода.
Имеет четыре значения от 0 до 1 по четырем направлениям.
Нужен якорь в верхнем левом углу - ставим везде ноль.
Нужен якорь в правом нижнем углу — ставим везде единицу.
Надеюсь вы уловили смысл.
К примеру если установить везде 0.5, то наша кнопка будет всегда устанавливаться посередине зоны ноды Control.
Margin — Отступ. Тут можно устанавливать отступы от якоря. К примеру сдвинем кнопку от правого нижнего угла на некоторое количество пикселей.
Таким образом можно собирать довольно навороченные динамические интерфеисы, используя различные комбинации нод группы Control.
Надеюсь вам был полезен данный материал. Удачи!
Подписывайтесь на канал, и вступайте в группу в ВК.