Cave: Система пользовательского интерфейса (Game UI)

В этом уроке вы узнаете, как использовать систему анкоринга пользовательского интерфейса (UI) Cave Engine.

Анкоринг позволяет вам определить точку отсчета, используемую элементами пользовательского интерфейса на экране. Это очень важно при создании интерфейсов, которые должны правильно адаптироваться к различным разрешениям, размерам окон и соотношениям сторон.

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

1. Создание нового элемента пользовательского интерфейса

Создайте новый Элемент пользовательского интерфейса по умолчанию.

После добавления его в сцену выберите его и посмотрите на панель Свойства.

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

2. Позиция

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

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

Изначально элемент пользовательского интерфейса заякорен по центру экрана. Из-за этого, когда значения позиции установлены на 0, элемент появляется точно в центре интерфейса.

3. Масштаб

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

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

Это упрощает настройку размеров интерфейса, сохраняя его отзывчивым.

4. Процентные и абсолютные пиксельные значения

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

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

В этом примере мы установили масштаб элемента пользовательского интерфейса на 10% по обеим осям X и Y. Мы также установили позицию на 25% по оси X, что соответствует горизонтальной оси.

С этой настройкой элемент смещается на 25% вправо относительно его точки анкоринга.

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

Кроме процентных значений, Cave Engine также позволяет использовать абсолютные значения в пикселях.

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

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

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

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

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

То же самое поведение применимо к оси Y позиции и к обеим осям X и Y масштаба.

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

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

5. Анкоринг позиции

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

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

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

Эта точка анкоринга выступает в качестве ссылки для позиционирования элемента в интерфейсе. С этого момента значения позиции будут применяться в соответствии с выбранным анкором.

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

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

Для этого типа интерфейса просто измените Точку анкоринга на нужный нижний угол.

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

Когда значения позиции установлены на 0, как с использованием процентов (%), так и абсолютных пикселей (px), элемент пользовательского интерфейса будет расположен точно над своей опорной точкой.

Другими словами, Точка анкоринга становится опорной точкой для позиционирования элемента.

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

6. Анкоринг масштаба

Теперь давайте поймем, как работает анкоринг масштаба.

Для этого измените точку анкоринга элемента пользовательского интерфейса обратно в центр экрана и установите значения Позиции на 0, чтобы элемент вернулся точно в центр.

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

Когда точка анкоринга масштаба установлена в центр, увеличение или уменьшение масштаба элемента будет влиять на обе стороны одинаково. Элемент будет расти или уменьшаться как влево, так и вправо одновременно.

Однако в некоторых ситуациях это не является желаемым поведением.

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

Чтобы добиться этого, измените точку анкоринга масштаба на нужную сторону.

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

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

7. Настройка анкора и масштаба

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

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

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

В этом примере мы будем использовать абсолютные пиксельные значения для оси X позиции и оси X масштаба, сохраняя при этом процентные значения для оси Y.

Эта настройка позволяет элементу сохранять квадратное соотношение независимо от размеров экрана, сохраняя при этом отзывчивое поведение по вертикальной оси.

На этом этапе вы должны хорошо понимать, как работает анкоринг UI в Cave Engine.

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

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