Холст (Canvas)

Компонент Canvas представляет собой абстрактное пространство, в котором производится настройка и отрисовка UI. Все UI-элементы должны быть потомками игровых объектов, к которым присоединен Canvas. Когда вы создаете UI-элемент из пункта меню (GameObject > Create UI), Canvas будет добавлен автоматически, если его нет в сцене.

Свойства

Свойство:	Функция:
Render Mode	Режим представления UI: как объект на экране или как объект в 3D пространстве (см. ниже). Опции: Screen Space — Overlay, Screen Space — Camera и World Space.
Pixel Perfect (Screen Space modes only)	Должен ли UI рисоваться без сглаживания для точности?
Render Camera (Screen Space — Camera mode only)	Камера, с помощью которой рендерится UI (см. ниже).
Plane Distance (Screen Space — Camera mode only)	Расстояние, на котором плоскость UI должна быть расположена перед камерой.
Event Camera (World Space mode only)	Камера для обработки событий UI.
Receives Events	Обрабатываются ли события UI этим компонентом Canvas?

Подробности

Одного холста для всех UI-элементов вполне достаточно, но и несколько холстов в сцене допустимо. Также, возможно использование нескольких холстов, когда один выставляется дочерним элементом другого, для оптимизации. Вложенный холст использует тот же режим рендеринга (Render Mode), что и родитель.

Традиционно, пользовательские интерфейсы отображаются прямо на экране как простые элементы. Это значит, что они не имеют понятия 3D пространства, отображаемого камерой. Unity поддерживает этот способ отисовки в экранном пространстве, но также позволяет интерфейсам рисоваться как объектам сцены, в зависимости от режима отрисовки (Render Mode). Доступные режимы: Screen Space — Overlay, Screen Space — Camera и World Space.

Screen Space — Overlay (пространство экрана — поверх)

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

Примечание. Холст «Пространство экрана — наложение» должен храниться на верхнем уровне иерархии. Если это не используется, пользовательский интерфейс может исчезнуть из представления. Это встроенное ограничение. Сохраняйте холст «Пространство экрана — наложение» на верхнем уровне иерархии, чтобы получить ожидаемые результаты.

Screen Space — Camera (пространство экрана — камера)

В этом режиме, холст отображается как если бы он был нарисован на плоском объекте, на некотором расстоянии заданной камеры. Экранный размер интерфейса не меняется с расстоянием, т.к. он всегда масштабируется чтобы в точности заполнять пирамиду видимости камеры (camera frustum). Если размер или разрешение экрана, или пирамида видимости, изменяются – интерфейс автоматически перемасштабируется, чтобы помещаться. Любые 3д объекты сцены, расположенные ближе к камере, чем плоскость интерфейса, будут отрисованы “над” интерфейсов, в то время как остальные объекты, находящиеся за плоскостью, будут загорожены.

World Space (пространство мира)

Этот режим рисует интерфейс, как если бы он был плоским объектом сцены. В отличие от режима Screen Space — Camera, плоскость не обязана быть перпендикулярной направлению камеры, и может быть ориентирована как угодно. Размер холста может быть установлен через его Rect Transform, но его экранный размер будет зависеть от угла зрения и расстояния от камеры. Другие объекты сцены могут проходить сзади, сквозь, или спереди холста.

Как верстать адаптивный интерфейс?

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

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

Для данного руководства о том “как это делается” мы решили использовать четыре разрешения экрана: Phone HD в портретной ориентации (640 x 960) и альбомной (960 x 640) и Phone SD также в портретной (320 x 480) и альбомной (480 x 320). Изначально компоновка была настроена под Phone HD портретную ориентацию и разрешение.

Использование якорей для адаптации к различным соотношениям сторон

Элементы интерфейса по-умолчанию привязаны к центру родительского прямоугольника. Данное означает что они сохраняют постоянное смещение относительно центра.

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

Одним из способов сохранить расположение кнопок в области экрана является изменение компоновки таким образом, чтобы места их расположения были связаны с их соответствующими углами на экране. Привязка левой верхней кнопки может быть также установлена в левом верхнем углу при использовании в инспекторе выпадающего списка Anchors Preset (наборы привязок), или путём перетаскивания треугольных ручек привязок в видовом окне сцены (Scene View). Лучше сделать это пока текущее разрешение экрана, установленное в игровом режиме (Game View) является тем разрешением, для которого изначально всё и было задумано, где места расположения кнопок были бы подобраны более разумно и как говориться к месту.(Ознакомьтесь со страницей UI Basic Layout для получения более подробной информации по привязкам.). Так же например привязки для левой нижней и правой нижней кнопок могут быть выставлены в левый нижний и правый нижний угол соответственно.

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

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

В данном руководстве о том “как это делается” мы уже знаем о том, что небольшая разрешающая способность портретной и альбомной ориентации Phone HD устройств не соответствует экранам, которые физически обладают меньшим по сравнению с ними размером, в то время как это самое соответствие больше выражается в плотности пикселей на 1 дюйм самого экрана. На этих экранах меньшей плотности кнопки не должны отображаться крупнее чем на экранах устройств с большей плотностью пикселей — они должны быть точно такого же размера, ни больше, не меньше.

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

Масштабирование с компонентом Screen Size

Компонент Canvas Scaler может быть добавлен в корень Canvas — игровой объект (Game Object) со встроенным в него компонентом Canvas, все интерфейсные элементы которого являются его потомками. Он также создаётся по-умолчанию во время создания нового компонента Canvas через меню GameObject.

В компоненте Canvas Scaler вы можете установить его UI Scale Mode в Scale With Screen Size. В данном режиме масштабирования вы можете определить какое разрешение использовать в качестве базового. Если текущее разрешение больше или меньше базового, фактор масштабирования компонента Canvas устанавливается соответственно так, чтобы все элементы интерфейса масштабировались в большую или меньшую сторону вместе с разрешением экрана.

549 / 5 000

Результаты перевода

В нашем случае мы установили Canvas Scaler на портретное разрешение телефона HD 640 x 960. Теперь, при установке разрешения экрана на портретное разрешение телефона SD 320 x 480, весь макет уменьшается, поэтому он отображается пропорционально так же, как и в полном разрешении. Все уменьшено: размеры кнопок, их расстояние до краев экрана, графика кнопок и текстовые элементы. Это означает, что в портретном разрешении телефона SD макет будет таким же, как и в вертикальном разрешении телефона HD; только с меньшей плотностью пикселей.

Чего стоит опасаться: так это того, что после добавления компонента Reference Resolution, важно также проверять как будет выглядеть компоновка с другими соотношениями сторон. Установив разрешение обратно в Phone HD альбомное, можно заметить как кнопки стали больше, чем должны быть (и для чего должны были быть использованы).

Причина, по которой кнопки при альбомном соотношении сторон становятся больше кроется в том, как работают настройки базового разрешения (Reference Resolution). По-умолчанию они сравнивают ширину текущего разрешения с шириной базового и как результат всё на экране масштабируется основываясь на коэффициенте масштабирования, получаемом из этой разницы. Если текущее альбомное разрешение равное 960 x 640 превосходит в 1.5 раза ширину портретного базового разрешения равного 640 x 960, то вся компоновка в целом будет увеличена в 1.5 раза.

Компонент имеет свойство под названием Match, которое может принять значение равное 0 (ширина), 1 (высота) или любое значение лежащее в пределах между 0 и 1. По-умолчанию оно установлено в 0, что означает то, что текущая ширина экрана соответствует базовой ширине базового разрешения, о котором говорилось ранее.

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

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

Для более подробной информации о том, какими ещё способами можно добиться масштабирования элементов интерфейса относительно разных разрешений экрана, посетите страницу документации Canvas Scaler.

Что такое LayoutGroup?

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

Горизонтальный тип сортировки, соответственно, группирует UI элементы по горизонтали в заданной форме.

Настройки компонентов

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

Далее необходимо добавить этой панели один из двух компонентов Vertical Layout Group или Horizontal Layout Group. 

В первом случае поработаем с компонентом вертикальной сортировки Vertical Layout Group.

Теперь разберем каждый параметр настроек компонента Vertical Layout Group:

• Padding. Здесь можно задать параметры отступа от границ формы.
• Spacing. Расстояние между элементами. Полезный параметр в котором можно указать размер пространства между элементами внутри формы.
• Child alignment. Этот параметр привязки указывает откуда начинать построение группы элементов.
• Child controls size. В этом параметре можно указать возможность форме контролировать размер элементов так, чтобы они не выступали за рамки по длине или высоте.
• Child force expand. Параметр указывает возможность занимать элементу любое свободное пространство в форме по длине или высоте.

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

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

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

Компонент сортировки Layout Element

По умолчанию, если добавлять простые UI элементы в группу для сортировки, форма, то есть, Layout Group сама определяет как ей сортировать элементы. Для того чтобы каждый элемент в группе можно было настраивать отдельно существует специальный компонент Layout Element.

Разберем теперь новый компонент группы Layout Element, его можно добавить любому элементу в группе.

Этот компонент имеет следующие параметры:

• Ignore Layout. При включении этого параметра элемент полностью избегает сортировки в группе и будет отображаться как обычный UI элемент, а сам компонент сортировки Layout Group проигнорирует элемент в форме. Этот параметр удобно использовать в том случае когда вы перемещаете элемент из одной группы в другую – то есть, когда необходимо исключить его из текущей формы.
• Min width и Min Height. При включении этого параметра можно указать элементу его минимальные размеры в группе.
• Preferred width и Prefered height. Два параметра, где можно указать предпочитаемые размеры элемента в группе. В этом случае форма не будет изменять размеры элементов в группе пока это не станет критично.
• Flexible width и Flexible height. Еще два параметра в которых можно указать в каких пределах размеры элемента могут изменяться во время сортировки в группе.
• Layout priority. Простой числовой параметр, где можно указать номер при сортировке элемента в группе. Чем больше приоритет, тем выше элемент будет находится в иерархии.

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

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

Контроль размеров

И так мы уже разобрали, что для сортировки статичных групп элементов необходимо в первую очередь форма с одним из трех компонентов Vertical Layout Group, Horizontal Layout Group или Grid Layout Group и сами элементы с дополнительным компонентом Layout Element. Теперь попробуем рассмотреть процесс создания динамической сортировки в группе.

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

Рассмотрим параметры этого компонента, их всего два: Horizontal Fit и Vertical Fit.

Оба этих параметра указывают как именно контролировать размер формы по длине и высоте.

• Unconstrained. Это тип по умолчанию указывает, что форматирование отключено и размеры формы не контролируются.
• Min Size. Следующий тип указывает, что форма контролируется ее минимальным допустимым размером.
• Preferred Size. Последний тип, позволяет форме самой определять какой размер ей принять в не зависимости от каких либо изменений за ее пределами.

На примере будем использовать минимальный размер формы по вертикали Vertical Fit.

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