Создание элементов интерфейса с подгонкой их размеров под их контент
Обычно при позиционировании элемента интерфейса с его Rect Transform-ом, его размер и позиция задаются вручную (опционально включая растягиваемость с родительским компонентом Rect Transform).
Однако, иногда вам может понадобиться сделать так, чтобы прямоугольник заполнял собою всю область содержимого определённого элемента интерфейса. Этого можно добиться путём добавления компонента под названием Content Size Fitter.
Подогнать под размер компонента Text
Чтобы включить Rect Transform содержащий компонент Text в область занимаемую текстовым контентом, добавьте компонент Content Size Fitter к тому же игровому объекту (Game Object), который содержит в себе компонент Text. Затем приведите Horizontal Fit, the Vertical Fit или сразу их обоих к желаемым значениям.
Как это работает?
Что здесь происходит, так то что компонент Text работает как компоновочный элемент (Layout Element), который может предоставлять информацию о том насколько велик его минимальный и номинальный размер. В ручной компоновке данная информация не используется. Компонент Content Size Fitter представляет из себя типа компоновочного контроллера (Layout Controller), который действует на основе информации, получаемой от компоновочных элементов (Layout Elements) и согласно этому управляет размером Rect Transform.
Запомнить расположение точки опоры
When UI elements are automatically resized to fit their content, you should pay extra attention to the pivot of the Rect Transform. The pivot will stay in place when the element is resized, so by setting the pivot position you can control in which direction the element will expand or shrink. For example, if the pivot is in the center, then the element will expand equally in all directions, and if the pivot is in the upper left corner, then the element will expand to the right and down.
Подогнать под размер элемента интерфейса с дочерним Text компонентом
Если у вас есть элемент интерфейса, такой как например Button (Кнопка), которому также в качестве заднего фона назначено изображение и дочерний игровой объект (Game Object) с Text компонентом, вы скорее всего захотите, чтобы данный элемент интерфейса целиком занял область, занимаемую текстом — может быть даже с некоторым уплотнением.
In order to do this, first add a Horizontal Layout Group to the UI element, then add a Content Size Fitter too. Set the Horizontal Fit, the Vertical Fit, or both to the Preferred setting. You can add and tweak padding using the padding property in the Horizontal Layout Group.
Зачем использовать горизонтальную компоновочную группу (Horizontal Layout Group)? Ну, она могла бы быть и вертикальной — пока есть всего один потомок, результат будет одинаковым как для той, так и для другой группы.
Как это работает?
The Horizontal (or Vertical) Layout Group functions both as a Layout Controller and as a Layout Element. First it listens to the layout information provided by the children in the group — in this case the child Text. Then it determines how large the group must be (at minimum, and preferably) in order to be able to contain all the children, and it functions as a Layout Element that provides this information about its minimum and preferred size.
Content Size Fitter принимает компоновочную информацию, предоставляемую любым компоновочным элементом одного и того же игрового объекта — в данном случае предоставляемую горизонтальной (или вертикальной) компоновочной группой. В зависимости от этих настроек, затем он управляет размером Rect Transform на основе этой информации.
Как только был установлен размер Rect Transform, горизонтальная (или вертикальная) компоновочная группа устанавливает позицию и размер его потомков, основываясь на доступном для этого месте. Для более подробной информации по тому, как управлять позицией и размером их потомков, посетите страницу документации, посвящённую горизонтальным компоновочным группам.
Подогнать размеры потомков компоновочной группы (Layout Group) к соответствующим им размерам.
Как вы поступаете в случаях, когда у вас есть компоновочная группа (горизонтальная или вертикальная) и вы хотите, чтобы каждый из элементов интерфейса занимал положенное себе место в отведённой ему области?
Вы не можете поместить компонент Content Size Fitter в каждого потомка. Причина заключается в том, что этому компоненту требуется управление его собственным Rect Transform-ом, но родительская компоновочная группа также требует управления над дочерним Rect Transform-ом. Всё это может вылиться в конфликтную ситуацию и привести к непредсказуемому поведению.
Тем не менее, это не так уж и необходимо. Родительская компоновочная группа может уже подогнать размер каждого потомка под необходимый размер. Что вам нужно сделать, так это отключить в компоновочной группе переключатели Child Force Expand. Если потомки сами по себе являются компоновочными группами, вам возможно придётся и для них отключить переключатели Child Force Expand.
Как только потомки перестают растягиваться, их выравнивание может быть отрегулировано в компоновочной группе путём изменения настройки Child Alignment.
Что если вам захочется, чтобы определённые потомки могли разворачиваться так, чтобы занимать дополнительное свободное пространство, а другие нет? Этого можно легко добиться путём добавления компонента Layout Element к потомкам, которым вы хотите добавить эту возможность, а заодно и добавить возможность гибко контролировать свойства Flexible Width или Flexible Height на этих Layout Element-ах. В родительской компоновочной группе (Layout Group) переключатель Child Force Expand должен быть по прежнему выключен, иначе все потомки по прежнему будут сохранять эту гибкость при своём разворачивании.
Как это работает?
Game Object может иметь сразу несколько компонентов, каждый из которых предоставляет компоновочную информацию о минимальном, номинальном и свободном размерах. Система приоритетов определяет какие одни значения влияют на другие. Компонент Layout Element имеет более высокий приоритет чем компоненты Text, Image и Layout Group, поэтому он может использоваться для перезаписи значений любой компоновочной информации, которую предоставляют те компоненты.
Когда компоновочная группа принимает компоновочную информацию, передающуюся ей потомками, она будет учитывать обновлённые свободные размеры. Затем, при управлении размерами потомков, она не сделает их крупнее их номинальных размеров. Однако, если в компоновочной группе активирована опция Child Force Expand, тогда у всех свободных размеров всех потомков будет возможность быть как минимум в значении равному 1.
Более подробная информация
На этой странице были даны решения для несколько общепринятых методов работы. Для более углублённого изучения авто компоновочной системы, ознакомьтесь пожалуйста со страницей UI Auto Layout.
Создание интерфейса (UI) под разные разрешения экрана
Современные игры и приложения часто нуждаются в поддержке широкого спектра различных разрешений экрана, и особенно в данной возможности нуждаются интерфейсы этих игр. Система создания интерфейсов в Unity снабжена рядом различных инструментов для реализации этих возможностей, которые также можно комбинировать между собой массой различных способов.
В данном руководстве о том “как это делается”, мы собираемся использовать простой пример, чтобы взглянуть и сравнить между собой различные инструменты в контексте данного вопроса. В нашем случае как показано ниже, у нас по углам имеется три кнопки и нашей целью является адаптировать данную компоновку под разные разрешения.
Для данного руководства о том “как это делается” мы решили использовать четыре разрешения экрана: Phone HD в портретной ориентации (640 x 960) и альбомной (960 x 640) и Phone SD также в портретной (320 x 480) и альбомной (480 x 320). Изначально компоновка была настроена под Phone HD портретную ориентацию и разрешение.
Using anchors to adapt to different aspect ratios
Элементы интерфейса по-умолчанию привязаны к центру родительского прямоугольника. Данное означает что они сохраняют постоянное смещение относительно центра.
Если с данной настройкой разрешение было изменено под альбомное соотношение сторон, кнопки могут выпасть из своих прямоугольных областей, где они изначально должны были быть расположены.
Одним из способов сохранить расположение кнопок в области экрана является изменение компоновки таким образом, чтобы места их расположения были связаны с их соответствующими углами на экране. Привязка левой верхней кнопки может быть также установлена в левом верхнем углу при использовании в инспекторе выпадающего списка 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 устанавливается соответственно так, чтобы все элементы интерфейса масштабировались в большую или меньшую сторону вместе с разрешением экрана.
In our case, we set the Canvas Scaler to be the Phone HD portrait resolution of 640 x 960. Now, when setting the screen resolution to the Phone SD portrait resolution of 320 x 480, the entire layout is scaled down so it appears proportionally the same as in full resolution. Everything is scaled down: The button sizes, their distances to the edges of the screen, the button graphics, and the text elements. This means that the layout will appear the same in the Phone SD portrait resolution as in Phone HD portrait; only with a lower pixel density.
Чего стоит опасаться: так это того, что после добавления компонента 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, оно будет сравнивать текущую ширину с базовой шириной, текущую высоту с базовой высотой, и выберет коэффициент масштаба близкий и к тому и к другому разрешению.
At this point the layout supports all the four screen resolutions using a combination of appropriate anchoring and the Canvas Scaler component on the Canvas.
Для более подробной информации о том, какими ещё способами можно добиться масштабирования элементов интерфейса относительно разных разрешений экрана, посетите страницу документации Canvas Scaler.
Как UI элемент привязать к спрайту
Есть к примеру хелсбар в канвасе, который динамически создается, есть спрайт юнита. Собственно как преобразовать этот хелсбар(scale, position), что бы он отобразился на спрайте(сверху, ну с офсетом я разберусь) c преобразованным скейлом и позицией?
Отслеживать
задан 27 сен 2019 в 14:49
Влад Леонидов Влад Леонидов
527 3 3 серебряных знака 12 12 бронзовых знаков
27 сен 2019 в 21:00
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 27 сен 2019 в 15:01
7,143 3 3 золотых знака 8 8 серебряных знаков 25 25 бронзовых знаков
Как UI объект прикрепить к gameobject?
Добрый день! у меня есть UI объект, который является Slider из него я сделал HPBar. Есть враги, но обычные 2д объекты, как к ним прикрепить мой UI элемент? мне надо, чтоб он был чуть выше над голвой врагов. Я хотел сделать HPBar дочерним объектом своих врагов, чтоб они двигались вместе, но столкнулся с проблемой, если я переношу свой UI элемент в дочерний к обычному, то он перестает показываться, т.к. я понял, что он не находится в canvas. Как быть?
- Вопрос задан более двух лет назад
- 887 просмотров
2 комментария
Простой 2 комментария