О чем ты узнаешь из видео:
✅все о проблеме адаптивности
✅вот это Pivot
✅вот это Anchors, он же якорь
✅все об окне Anchors presets
Все о проблеме адаптивности
При верстке интерфейса абсолютно всегда присутствует проблема адаптивности. Чтобы ее увидеть давайте перейдем в пустой 2D проект и в нем сделаем Canvas.
Он сейчас невероятно огромный именно поэтому мы привяжем его к камере, как мы это делали на прошлом уроке. Также давайте изменим цвет камеры, сделаем на Canvasе картинку, а так же создадим Sprite. И для наглядности дадим спрайту другой цвет.
Теперь, предположим, что белый квадратик на Canvasе это готовый сверстанный интерфейс, а Sprite сверху - игровой мир. Как вы помните из прошлых уроков, в окне Game показывается что именно будет видеть пользователь на экране формата 480 на 800 пикселей. Так как пользователей у нас будет много, разнообразие экранов тоже будет присутствовать. Чтобы понимать как игра будет смотреться на экране побольше, добавим новое расширение в окне Game. Предположим, это будет перевернутый FullHD экран (размер 1080 на 1920 пикселей).
На этом этапе сразу же видна проблема: на двух разных экранах объекты интерфейса смотрятся по разному, а объекты мира меняться не будут. Это и есть проблема адаптивности UI: на разных экранах интерфейс будет смотреться по разному. Причина по которой это происходит довольно проста.
Ширина и высота в инспекторе у объектов Canvas'а, измеряется в пикселях. А 100 пикселей на маленьком и на большом экранах имеет разное соотношение.
Лайфхак: Для решение этой проблемы выбираем объект Canvas, и в окне инспектор находим компонент Canvas Scaler. По названию можно догадаться, что данный компонент отвечает за масштабирования. Базовый режим масштабирования - Constant Pixel Size (то есть ширина и высота объектов UI) будет измеряться в пикселях с постоянным размером. Вот корень зла, так сказать. Поэтому выбираем режим - Scale With Screen Size. Данный режим масштабирования, меняет масштаб пикселей в зависимости от исходного размера.
К примеру, сейчас давайте зададим в пункте Reference Resolution разрешение 480 по X и 800 по Y. Бинго! Теперь на двух разных разрешениях размер квадрата будет ПРИМЕРНО один и тот же.
Как же это работает?
Выставим большое разрешение окну Game. И выберем изображение на Canvas. Как мы видим размер у него по прежнему 100 на 100 пикселей, но на перевернутом FullHD экране, у которого ширина как минимум равна тысяче пикселей, квадратик имеет такие же размеры как и на маленьком экране.
Режим Reference Resolution, масштабирует пиксели таким образом, чтобы при верстке мы всегда работали под один экран, а при увеличении или уменьшении экрана от заданного размера, Canvas будет масштабировать и уплотнять пиксели.
Надеюсь этот момент стал понятен. В дальнейшем спрайт нам больше не понадобится, поэтому жмем delete.
вот это Pivot
Теперь поговорим про такой параметр у объектов, как Pivot. Изначально у всех объектом UI, значение Pivot равняется 0.5 как по X так и по Y. Pivot в отличии от размера измеряется в процентах, где 1 это 100%, а 0 - соответственно 0%.
Pivot - это точка, это, можно сказать, центр масс объекта. Вокруг него объект будет вращаться. Относительно него будет меняться размер объекта, а также только благодаря нему мы понимаем на какой позиции будет находится объект.
К примеру, если дать Pivotу значение - (0, 0) (то есть его центр будет находится в левом нижнем углу), позиция объекта изменится, так как объект относительно Pivotа находится не по центру экрана. Но если дать объекту позицию (0, 0), то левый нижний угол будет находится строго по центру экрана.
Pivot - НЕВЕРОЯТНО удобная вещь и сегодня мы еще к нему вернемся.
вот это Anchors, он же якорь.
Теперь давайте перейдем к следующему параметру компонента RectTransform, а именно - к Anchors, то есть якорям.
Если посмотреть в окно сцены, то на выбранном объекте Image, будет видно 4 небольших треугольника в середине экрана. Это и есть якоря.
В этом уроке мы поговорим только об их основных свойствах.
Якоря обеспечивают привязку элемента UI к своему родителю тогда, когда объект родитель имеет компонент RectTransform. Например, как в текущем случае, наша картинка привязана к центру Canvas'а.
При адекватной верстке интерфейс обладает большой вложенностью. То есть сам интерфейс состоит из объектов, которые состоят из объектов, а эти объекты состоят из других объектов и так далее.
Вложенность - это зависимость одного объекта от другого. Если мы сделаем на Canvasе пустой объект и назовем его Wrapper (обертка), и поместим в него картинку, то она будет зависима от этого объекта.
Вложенный объект принято называть ребенком (child), а объект в котором находится ребенок - родителем (parent).
Если объект родитель меняет позицию или делает поворот, то объект-ребенок будет иметь такое же значение, это и есть зависимость.
Сейчас самое главное для нас, чтобы игровой объект на любом экране имел одинаковую позицию и размер, и якоря помогут нам в этом.
все об окне Anchors presets
Если переместить картинку в левый верхний угол объекта родителя и начать менять размер объекта, то вложенный объект будет вести себя очень странно: его позиция будет меняться, но на очень непредсказуемое значение. Нехорошо. Давайте исправим.
Выберем текущий объект. В окне инспектор, слева от основных параметров, видна текущая настройку якорей. Если кликнуть по этой опции, то откроется окно пресетов (заготовленных настроек якорей). Рассмотрим данное окно.
Окно предназначено для выбора наиболее популярных типов привязки якорей. Их два: вертикальная и горизонтальная. Они не зависят друг от друга.
Привязка может осуществляться, как для контролирования и позиции и размера, так и только позиции.
Стоит также отметить, что привязка якорей меняет центр координат. К примеру, если привязать объект к низу экрана, то позиция объекта будет равна относительно этих якорей.
При помощи Pivotа и якорей, можно с легкостью контролировать позицию объекта. К примеру, можно сделать так, чтобы картинка всегда была привязана к центру нижней границы родителя. Для этого настраиваем Pivot чтобы его центр был снизу по центру. И привяжем якоря схожим образом. А после, дадим объекту позицию (0, 0). Готово.
Домашние задание
Сверстать небольшое окно которое будет адаптивно под все экраны и элементы. Оно должно сохранить свое местоположение и размер независимо от размера самого окна.
Если вдруг вы не знаете как сделать упражнение или у вас возникнет проблема - можно найти проект с готовым решением тут.
На этом урок подошел к концу, пожалуйста не забудьте оценить его лайком и подписаться на нас.
