Unity - Посібник Створення інтерфейсу (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.