##### Термины UI-элемент - это GameObject, у которого есть RectTransform, используемый в Canvas. В качестве UI-элемента мы будем в тексте мы будем использовать кнопку. ### Якорь Работа с RectTransform строится на якорях. С помощью якорей мы можем настроить привязку позиции и размера UI- элемента к родителю. Якоря задаются у кнопки, хотя позиция якорей указывается относительно родителя. Позиция якоря - это позиция относительно родителя выраженная в процентах. Где левый нижний угол - (x:0, y:0), а правый верхний - (x:1, y:1). В инспекторе мы можем видеть позиции только двух якорей. Остальные два якоря рассчитываются автоматически. Min - Левый нижний Max - Правый верхний Значение выставляется от 0 до 1.  ### Pivot Когда мы видим координаты позиции кнопки относительно родителя (x, y). Возникает вопрос, «каким местом» он стоит на этой позиции. У каждой UI-элемента есть свой pivot, которым он «садится» на свою позицию. Скрины внизу показывают, что координаты «круга» установлены относительно якорей, а сам круг встал на позицию своим pivot’ом.   По умолчанию, Pivot расположен в центре кнопки. Позиция pivot устанавливается значением от 0 до 1 Как выглядит pivot  ### Когда у кнопки есть точка якоря. Мы можем установить все четыре якоря в одну позицию. Это называется Точка якоря или опорная точка якоря (the anchor reference point).  <br> UI-элемент всегда будет иметь фиксированную позицию по оси X и Y относительно точки якоря. Pos X, Pos Y - позиция UI-элемента относительно точки якоря. Width, Height - Ширина и высота UI-элемента  На видео кнопка (UI-элемент) привязана к левому нижнему углу (точкой якоря). Кнопка никогда не меняет своего положения относительно точки якоря. ![[RectTransform-6-Запись-экрана-2022-12-16-в-18.13.59.mov]] <br> Можно установить точку якоря по заданному шаблону  ### Когда якорей два По одной оси (Пусть будет X) кнопка всегда будет иметь фиксированную позицию относительно двух якорей. Размер кнопки по оси X НЕ будет меняться. По другой оси (ось Y) позиция кнопки всегда будет меняться пропорционально размерам родителя. Размер кнопки по оси Y будет меняться. <br> На видео два якоря привязаны к центру по оси Y. ![[RectTransform-8-Запись-экрана-2022-12-19-в-14.58.03.mov]] ##### Pos X, Width Pos X - Позиция кнопки по оси X, относительно двух якорей. Width - Размер кнопки по оси X. (Смотреть след. Скриншот) ##### Top, Bottom Кнопка сохраняет свои пропорции относительно родителя по оси Y, чтобы сохранить свою позицию, поэтому кнопка меняет свой размер самостоятельно. Соотвественно, мы не указываем в инспекторе размер кнопки по оси Y. Позиция по оси Y меняется самостоятельно пропорционально размерам родителя, поэтому в инспекторе не указывается Pos Y Мы указываем отступы от двух якорей. В данном примере два якоря находятся сверху и снизу, поэтому мы видим Top и Bottom. Когда размер родителя меняется по оси Y, то расстояние (оставшиеся место) между двумя отступами заполняется кнопкой. Top - отступ кнопки от верхнего якоря Bottom - отступ кнопки от нижнего якоря.  Расположение шаблонов с 2 якорями.  ### Когда якорей четыре Когда мы устанавливаем 4 якоря, то образуется Bounding box. Bounding box визуально не отображается, поэтому покажу явно на скрине. Предположим, что именно так мы расположили 4 якоря, тогда Bounding box будет такого размера.  Размер и позиция Bounding box пропорционалена родителю. То есть, как бы мы не меняли размер родителю, Bounding box будет пропорционально оставаться в том же месте. <br> Если расположить 4 якоря рядом с кнопкой, то кнопка будет уменьшаться пропорционально размерам родителя и при этом сохранять свою позицию относительно родителя. ![[RectTransform-12-Запись-экрана-2022-12-19-в-16.21.55.mov]] <br> Мы можем задавать внутренние отступы bounding box. Здесь отступы работают точно так же, как и в случае с двумя якорями. Left, Right, Top, Bottom - внутренние отступы   <br> ### Прочее Первая кнопка на скрине Позволяет удобно редактировать UI-элемент на сцене мышкой, не смотря на то, что UI-элемент повернут.  <br> Лучше не менять размер UI-элемент через Scale. Потому что некоторая функциональность UI-элемента перестанет работать. Вместо Scale надо использовать Width и Height.  Официальная [документация](https://docs.unity3d.com/Packages/[email protected]/manual/UIBasicLayout.html)