- Використання прив'язок для адаптації до різних співвідношеннях сторін
- Масштабування з компонентом Screen Size
Практичні рекомендації по роботі з UI (для користувача інтерфейсами)
Створення елементів інтерфейсу з підгонкою їх розмірів під їх контент
Сучасні ігри та програми часто потребують підтримки широкого спектра різних дозволів екрану, і особливо в даній можливості потребують інтерфейси цих ігор. Система створення інтерфейсів в 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 встановлюється відповідно так, щоб всі елементи інтерфейсу масштабувати в більшу або меншу сторону разом з дозволом екрану.
У нашому випадку, ми встановили Reference Resolution як Phone HD альбомне дозвіл рівний 640 x 960 пікселям. Тепер, коли ми змінимо дозвіл і співвідношення сторін екрану на портретну, рівну 320 x 480, наша компоновка повинна буде масштабироваться пропорційно екрану, але в той же час також рівномірно, як в альбомному дозволі. Зменшиться все: розміри кнопок, їх відстань від країв екрану, графічна складова і текстові елементи. Дане означає, що компоновка яка була в портретному Phone 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, воно буде порівнювати поточну ширину з базовою шириною, поточну висоту з базовою висотою, і вибере коефіцієнт масштабу близький і до того і до іншого дозволу.
В даний момент компонування підтримує всі чотири дозволу використовуючи комбінацію відповідних прив'язок і компонент Reference Resolution разом з компонентом Canvas.
Для більш докладної інформації про те, якими ще способами можна домогтися масштабування елементів інтерфейсу щодо різних дозволів екрану, відвідайте сторінку документації Canvas Scaler .
Практичні рекомендації по роботі з UI (для користувача інтерфейсами)
Створення елементів інтерфейсу з підгонкою їх розмірів під їх контент
