Unity UI квадрат, который заполняет ширину ИЛИ высоту

11

Я пытаюсь создать доску с такими требованиями:

  • Это должно быть квадратным.
  • Он ДОЛЖЕН соответствовать имеющейся ширине ИЛИ высоте.
  • Это должно быть сосредоточено на холсте.
  • Это МОЖЕТ быть обернуто в столько дополнительных промежуточных полотен, сколько необходимо.

Я играю с якорями, но я не нахожу никакой комбинации для этого. Единственное решение, которое я могу придумать, - это скрипт какого-то «OnResize» контейнера и программно установить размер платы.

Это оригинальный макет. (1) это BoardCanvas. (2) это доска.

Оригинальный макет

Я хочу, чтобы, если экран становился выше, квадрат увеличивался, но все еще был квадратным:

введите описание изображения здесь

Или уменьшает:

введите описание изображения здесь

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

введите описание изображения здесь

Q1: есть ли способ сделать это с помощью якорей / стержней? Для меня нормально создавать промежуточные холсты между BoardCanvas и самой Board, если это работает.

Q2: если так, где я должен расположить якоря? Нужны ли промежуточные объекты?

Q3: если нет, сценарий является решением? Есть ли на холсте OnResize для обработки? Я не вижу ни одного события изменения размера в списке, но, возможно, я не знаю, где его искать. Я чувствую, что тестирование на каждом кадре кажется излишним, а управляемое событиями - лучше.

Спасибо!

Хави Монтеро
источник

Ответы:

13

Наконец, я нашел способ сделать это (проверено в v5.0.0), таким образом:

  • Не требуется код или условные выражения для проверки ориентации.
  • Не взламывает весы и не требует эталонного разрешения.

В видеоуроках по пользовательскому интерфейсу пропущена большая часть, хотя она хорошо документирована в текстовой документации: система «автоматических макетов».

Авто-макеты - это механизмы, сделанные из «макетов» и «контроллеров макетов». Контроллеры макета - это компоненты, которые можно прикрепить к игровому объекту пользовательского интерфейса. Контроллеры могут Rect Transformразумно изменять размеры .

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

Там несколько встроенных контроллеров. Одним из них является Aspect Ratio Fitter.

Сначала я выбираю Boardпанель и прикрепляю новый Aspect Ratio Fitterкомпонент:

введите описание изображения здесь

Aspect Ratio Fitter, Кажется, направлена на «поддержание» хотел соотношение сторон объекта. Для этого можно либо установить «обтекание» объекта вокруг дочернего объекта (при сохранении соотношения сторон), либо установить расширение и заполнение его контейнера (при сохранении соотношения сторон).

Затем я выбираю Fit In Parentопцию и указываю, что хочу получить идеальный квадрат, устанавливая желаемое соотношение сторон 1:

введите описание изображения здесь

введите описание изображения здесь

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

введите описание изображения здесь

Если я уменьшу по вертикали или увеличу, квадрат следует за родителем, сохраняя соотношение сторон:

введите описание изображения здесь

введите описание изображения здесь

Как ни странно, когда изменение происходит из-за уменьшения ширины, нет никакого сценария, который нужно присоединить, и никакого свойства, которое нужно изменить, так как «Fitter Ratio Fitter» делает это для нас автоматически:

введите описание изображения здесь

Наконец, так как я хотел немного отступить, я просто поместил прямоугольное преобразование контейнера, которое действует как разделитель, и переместил его Boardиз BoardCanvasв в MarginCanvas:

введите описание изображения здесь

Хави Монтеро
источник
Ах, круто, это выглядит как отличное решение. Рад, что вы нашли это, спасибо, что поделились!
Крис МакФарланд
3

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

На холсте вам нужно сделать «Режим шкалы пользовательского интерфейса» для «Масштабирование с размером экрана», а «Режим соответствия экрана» - «Соответствие ширине или высоте»:

введите описание изображения здесь

Предполагая, что используется эталонное разрешение по умолчанию 800x600, и предполагая, что область просмотра экрана является альбомной (например Screen.width, больше, чем Screen.height), ползунок соответствия должен быть установлен полностью в направлении Высота как 1.

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

введите описание изображения здесь

Затем вы можете изменить размер области просмотра камеры и увидеть, что изображение сохраняет свою форму, растягивая его высоту, чтобы соответствовать высоте области просмотра:

введите описание изображения здесь


Если экран портретный - и именно здесь вам, вероятно, понадобится код для проверки и / или изменения в соответствии с требованиями - вам нужно установить значение соответствия масштабирования 0и изменить высоту и ширину изображения в соответствии с эталонным разрешением. Значение X (на рисунках ниже ширина и высота изображения оба 800)


Если вы пытаетесь вставить изображение меньшего размера внутри, вы можете «масштаб» изображение, регулируя его ширину и высоту от X в разрешении ссылок или значение Y (в зависимости от ландшафта или портрета). Так, например, я сделал синий квадрат, который использует половину значения X Reference Resolutions X (поскольку область просмотра - портретная), и он хорошо масштабируется и сжимается:

введите описание изображения здесь

И, кроме того, если вам нужна шахматная доска или что-то еще, положение X и Y каждого изображения, а также Высота и Ширина могут основываться на проценте от Разрешения Canvas Scaler, чтобы делать все, что вам угодно:

введите описание изображения здесь

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