Адаптивная компоновка экрана в Unity

Содержание

Вопрос или проблема
Ответ или решение
Адаптивный макет экрана в Unity: Подробный гид
Введение
Требования к макету
Шаги по созданию макета
Заключение

Вопрос или проблема

Как мне создать такую компоновку для (2D) экрана в Unity?

Требования:

средняя зона занимает 50% высоты экрана
верхняя и нижняя зоны занимают по 25% экрана
Когда я добавляю игровой объект в средний контейнер, я хочу масштабировать его так, чтобы он занимал 80% высоты контейнера (если это высокий объект) или 75% ширины контейнера (если это широкий объект).
Добавьте четыре игровых объекта в нижний контейнер, равномерно распределенных. Каждый объект должен масштабироваться до 85% высоты нижнего контейнера.

Можно ли добавлять объекты в контейнеры таким образом в Unity? Я знаю, что все это игровые объекты с трансформацией (позиция), но мне не ясно, как сделать так, чтобы они занимали области экрана, или какие API использовать при добавлении объектов, чтобы они уважали родительские контейнеры. Я пробовал такие вещи, как горизонтальные и вертикальные группы компоновки, но они, похоже, не имели никакого эффекта.

Ответ или решение

Адаптивный макет экрана в Unity: Подробный гид

Введение

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

Требования к макету

Как указано в вопросе, нам необходимо создать экранный макет с тремя основными областями:

Верхняя область — 25% высоты экрана.
Средняя область — 50% высоты экрана.
Нижняя область — 25% высоты экрана.
Объекты в середине должны масштабироваться до 80% высоты, если они длинные, или до 75% ширины, если они широкие.
В нижней области должно быть четыре объекта, равномерно распределенных по горизонтали и масштабируемых до 85% высоты.

Шаги по созданию макета

Создание канваса (Canvas)
- Создайте новый Canvas в вашем проекте Unity: GameObject > UI > Canvas.
- Убедитесь, что Render Mode установлен в Screen Space – Overlay.
Создание областей UI

Для того чтобы создать три области, вы будете использовать пустые объекты в качестве контейнеров.
- Создайте три пустых объекта: GameObject > Create Empty. Назовите их TopArea, MiddleArea, и BottomArea.
Настройка RectTransform для каждой области
- Выделите TopArea, затем в инспекторе (Inspector) измените его RectTransform:
  - Anchor: Установите по верхнему краю (0, 1) и (1, 1).
  - Pos Y: 0
  - Width: 0 (для заполнения)
  - Height: 25% высоты экрана (0.25h, где h – высота холста).
- Повторите то же самое для MiddleArea, установив:
  - Pos Y: -25% высоты, чтобы расположить его под верхним контейнером.
  - Height: 50% высоты (0.5h).
- Для BottomArea:
  - Pos Y: -75% высоты.
  - Height: 25% высоты (0.25h).
Добавление объектов

Теперь добавим объекты в центральную область.
- Добавьте объект в MiddleArea: GameObject > UI > Image (или другой элемент UI на ваше усмотрение).
- Убедитесь, что Image правильно масштабируется — задайте скрипт, который будет проверять размеры данного объекта и соответственно масштабировать его.

public void ScaleToFit(Transform target)
{
    RectTransform rt = target.GetComponent<RectTransform>();
    float heightScale = (0.8f * rt.rect.height) / rt.rect.height;
    float widthScale = (0.75f * rt.rect.width) / rt.rect.width;

    float scale = Mathf.Min(heightScale, widthScale);
    target.localScale = new Vector3(scale, scale, 1);
}

Настройка нижней области

В нижней области разместите четыре объекта.
- Создайте их равномерно, добавив по очереди: GameObject > UI > Image.
- Для автоматического распределения объектов мы можем использовать компонент Horizontal Layout Group.
- Установите компонент Horizontal Layout Group для BottomArea.
- Задайте отступы и значения для Child Force Expand, если необходимо.
Масштабирование объектов в нижней области

Чтобы объекты в BottomArea масштабировались до 85% их высоты, можно использовать следующий скрипт:

void ScaleChildrenToFit(RectTransform parent)
{
    foreach (Transform child in parent)
    {
        RectTransform rtChild = child.GetComponent<RectTransform>();
        float scale = 0.85f * rtChild.rect.height / rtChild.rect.height;
        rtChild.localScale = new Vector3(scale, scale, 1);
    }
}

Заключение

Создание адаптивного макета в Unity не только возможно, но и может быть достигнуто с помощью правильного использования компонентов UI и их свойств. Следуя описанным шагам, вы сможете создать экранный макет с заданной структурой и поведением, а также обеспечить правильное масштабирование объектов в соответствии с их размерами. Практика с компонентами UI, такими как RectTransform и Layout Groups, поможет вам лучше ориентироваться в разработке интерфейсов в Unity.