Размер и якоря

Если игра всегда работала на одинаковом устройстве и разрешении, тогда позиционирование и масштабирование кнопок управления было бы проще некуда. К сожалению, этот случай работает не всегда.

Хотя некоторые конфигурации встречаются чаще других, устройства вроде смартфонов, планшетов и портативных игровых консолей могут сильно различаться. Поэтому нам часто приходится учитывать разные соотношения сторон, разрешения и пользовательское масштабирование.

Существует много способов как с этим бороться, но давайте пока представим что разрешение экрана изменилось и кнопки управления должны быть перемещены. Некоторые должны быть внизу экрана, остальные наверху экрана, или же на остальных боковых сторонах.

Это делается путём редактирования якорей элементов управления, которые работают аналогично отступам. Чтобы получить доступ к этим настройкам, сначала нужно выбрать пресет Custom для якорей.

Каждый элемент управления имеет четыре якорных смещения: левое, правое, нижнее и верхнее, которые соответствуют соответствующим границам элемента. По умолчанию все они представляют расстояние в пикселях относительно верхнего левого угла родительского элемента или (если родительский элемент отсутствует) вьюпорта.

Таким образом, чтобы сделать элемент управления шире, вы можете увеличить правое смещение и/или уменьшить левое смещение. Это позволяет задать точное положение и форму элемента.

Свойства якорей определяют, относительно чего рассчитываются смещения. Каждое смещение имеет индивидуальный якорь, который можно настраивать от начала до конца родительского элемента. Вертикальные якори (верхний и нижний) изменяются от 0.0 (верх родителя) до 1.0 (низ родителя), где 0.5 соответствует центру, и смещения элемента будут рассчитываться относительно этой точки. Горизонтальные якори (левый и правый) аналогично настраиваются от левого до правого края родителя.

Обратите внимание: если требуется, чтобы грань элемента управления находилась выше или левее якорной точки, необходимо задать отрицательное значение смещения.

Например: при изменении горизонтальных якорей на 1.0 смещения рассчитываются относительно верхнего правого угла родительского элемента или вьюпорта.

Настройка двух горизонтальных или двух вертикальных якорей на разные значения приведёт к изменению размера элемента управления при изменении размера родительского элемента. В этом примере элемент управления привязан нижним правым углом к нижнему правому углу родителя, в то время как смещения верхнего левого угла остаются привязанными к верхнему левому углу родителя. Таким образом, при изменении размера родителя элемент управления всегда будет покрывать его, сохраняя смещение в 20 пикселей:

Центрирование control узла

Чтобы центрировать узел управления в его родительском узде, установите его якоря в 0.5, а каждое смещение — в половину соответствующего измерения. Например, следующий код демонстрирует центрирование TextureRect в его родительском узле:

GDScriptC#

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 перемещает точку отсчёта для смещений в центр родительского элемента. После этого мы задаём отрицательные смещения, чтобы узел управления сохранил свой естественный размер.

Пресеты якорей

Вместо ручной настройки смещений и якорей вы можете использовать меню якоря на панели инструментов над окном просмотра. Помимо центрирования, оно предоставляет множество опций для выравнивания и изменения размеров узлов control.