Якоря в UMG UI Designer и Unreal Engine 4

0
11
Якоря в UMG UI Designer и Unreal Engine 4

Anchors (Якоря) используются для определения желаемого местоположения виджета пользовательского интерфейса на Холсте (Canvas Panel) и поддерживают это положение с различными размерами экрана. Якоря нормализуются, где Min(0,0) и Max(0,0) – левый верхний угол, а Min(1,1) и Max(1,1) – правый нижний угол.

Если у вас есть панель Canvas и вы добавляете в нее другие виджеты пользовательского интерфейса, вы можете выбрать одно из нескольких предустановленных положений привязки (выбирайте одно из них, если вы хотите сохранить свой виджет только в определенном месте) или можете вручную установить положение якоря и минимальное / максимальное значения, а также применить все смещения.

Как работают Якоря

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

позиция Якоря ue4

 

 

 

 

 

На изображении ниже у нас есть кнопка, помещенная на панель холста, и мы оставили привязку в месте по умолчанию (вверху слева).кнопка Якоря ue4

 

 

 

 

 

 

 

 

 

 

Вертикальная желтая линия вверху указывает кнопке, сколько нужно двигаться от якоря вдоль оси Y в зависимости от размера холста, начиная с верхнего левого угла области просмотра. Горизонтальная желтая линия указывает кнопке, сколько нужно двигаться от якоря вдоль оси X, опять же на основе размера холста и начиная с верхнего левого угла области просмотра. В левом нижнем углу окна (внутри желтого поля) вы можете видеть размер экрана (Screen Size) холста, с которым вы работаете.

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

Воспроизводя все в игре, в зависимости от размера области просмотра, мы можем увидеть что-то вроде картинки ниже, где желтый прямоугольник представляет точку привязки:Якоря точка привязки ue4

 

 

 

 

 

 

 

 

 

 

 

В зависимости от размера нашего окна просмотра кнопка смещается с экрана.

Если мы переместим Якорь внизу справа вместо этого …Якоря кнопка привязки 2 ue4

 

 

 

 

 

 

 

 

И снова воспроизводить в игре с тем же размером окна просмотра …Якоря точка привязки а ue4

 

 

 

 

 

 

 

 

 

 

 

Кнопка смещена внутрь, чтобы избежать обрезки экрана из-за положения якоря в правом нижнем углу (желтая рамка).

В этом примере показано, как можно определить местоположение привязки и как ее местоположение может влиять на положение ваших виджетов в зависимости от размеров экрана. Вы также можете «разбить» якорный медальон, чтобы получить дополнительные параметры того, как ваши виджеты реагируют на различные размеры экрана (см. раздел документации «Управление Якорями в Unreal Engine 4» для получения дополнительной информации).

Установка Якоря

С помощью виджета пользовательского интерфейса, размещенного на панели Canvas, вы можете выбрать предварительно заданную привязку на панели Details виджета.

установка якорей ue4

 

 

 

 

 

 

 

 

 

Это, вероятно, самый распространенный метод установки точки привязки для ваших виджетов, который должен охватывать большинство ваших потребностей. Серебряная коробка указывает на Якорную точку и переместит Якорный Медальон в то место, которое было выбрано. Так, например, если вы хотите, чтобы что-то всегда находилось в центре экрана, вы можете поместить свой виджет в центр панели холста, а затем выбрать опцию Center/Center.

Якоря опция Center Center ue4

 

 

 

 

 

 

Вы также можете выбрать один из предустановленных методов растяжения:

Якоря горизонтальное растяжение ue4

Горизонтальное растяжение 

Якоря вертикальное растяжение ue4

Вертикальное растяжение

Якоря двойное растяжение ue4

Двойное растяжение 

Это необходимо, когда вам нужно что-то растянуть вместе с размером области просмотра (см. Ниже).

Здесь мы выбрали размещение Якоря, горизонтально растянутого вдоль нижней части холста.

Якоря загрузка ue4

 

 

 

 

 

 

 

Растяжение отражается медальоном Якоря, разбитым на две части, а не на одну.

Вы можете разбить Медальон, потянув за один из пинов.

Если бы мы сейчас воспроизводили в игре, наш индикатор выполнения выглядел бы примерно так (как и обычно):

Якоря панель загрузки ue4

 

 

 

 

 

 

 

 

 

 

 

И может выглядеть так, используя другой размер области просмотра:

Якоря 5 панель загрузки ue4

 

 

 

 

 

 

 

 

 

 

 

 

 

Или даже с другим размером окна просмотра:

Якоря 6 панель загрузки ue4

 

 

 

 

 

 

Управление Якорями

Помимо использования предустановок, вы можете вручную разместить медальон Якоря там, где вы хотите закрепить свои виджеты. Это особенно необходим в том случае, если вы хотите привязать один виджет по отношению к другому виджету, пример которого показан ниже.

1 управление якорями ue4

 

 

 

 

 

 

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

Под индикатором выполнения (а также изображением, хотя оно и не показано) закреплены в верхнем левом углу панели холста, в которой они находятся.

2 управление якорями ue4

 

 

 

 

 

 

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

3 управление якорями ue4

 

 

 

 

 

 

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

4 управление якорями ue4

 

 

 

 

 

Теперь возникает проблема: когда мы изменяем размеры панели Canvas с нашими виджетами в них, виджет изображения не остается в том положении, в котором мы его установили (или по отношению к индикатору выполнения, как мы и надеялись).

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

5 управление якорями ue4

 

 

 

 

 

 

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

6 управление якорями ue4

 

 

 

 

 

Виджет изображения находится на фиксированном расстоянии от индикатора выполнения. Еще одна проблема, если вместо этого нажать на панель холста …

7 управление якорями ue4

 

 

 

 

 

Изображение обрезается, так как мы не установили расстояние, на котором изображение будет оставаться фиксированным для левой стороны, мы можем сделать это, сломав медальон Якоря.

8 управление якорями ue4

 

 

 

 

 

 

Выше мы указали нашу точку привязки и то, как далеко мы хотим, чтобы наше изображение расширялось от индикатора выполнения, а также от поля слева, поэтому если мы изменим размер …

9 управление якорями ue4

 

 

 

 

 

Пространство слева / справа от изображения остается неизменным, но как быть с верхом и низом? Когда мы растягиваем панель холста вниз, изображение больше не центрируется с индикатором выполнения.

11 управление якорями ue4

 

 

 

 

 

 

 

 

 

Это можно исправить еще одним приспособлением к Якорному медальону. Здесь мы указали, насколько сильно мы хотим, чтобы изображение выдвигалось сверху и снизу относительно индикатора выполнения.

10 управление якорями ue4

 

 

 

 

 

 

И теперь, когда мы изменяем размеры панели холста в любом направлении, изображение изменяет размеры и остается на месте относительно индикатора выполнения, который также растягивается.