Мабуть, для багатьох новина про вихід нової системи Unity UI (далі просто UI) не здалася чимось значущим. Як мінімум - через її вогкість, як максимум - через існування NGUI. Я спочатку не став винятком, але відкриття вихідного коду UI системи (1) під ліберальною ліцензією MIT/X11, а так само ентузіазм розробників Unity Technologies змусили мене змінити думку.
На мій погляд, новий UI принесе нам досить багато плюсів:
- Цілком гідний інструмент з коробки;
- Можливість більш глибоко розуміти роботу UI завдяки наявності вихідців;
- Загальноприйнятий механізм внесення змін до вихідного коду UI - fork/pull request;
- Здорова конкуренція між різними системами UI в кінцевому підсумку принесе свої плоди у вигляді більш якісних і зручних інструментів для Unity, а можливо і демпінг цін;
- Тісна взаємодія команди розробки UI і ядра Unity вже зараз приносять плоди у вигляді оптимізацій продуктивності, та й у майбутньому сподіваюся вони будуть йти нога в ногу.
Керуючись цими думками було вирішено розробляти інтерфейс гри, використовуючи новий UI. Як показав час, рішення було виправдано, гра побачила світ і благополучно функціонує на Android девайсах. До слова сказати, фінальне рішення було після анонсу патчу Unity 4.6.1 (2), який включав тонну фіксів та імпрувів UI.
Давайте перейдемо до конкретики. Почну із загального уявлення, що сформувалося після розкурювання мізерної документації, перегляду відео-уроків і розкопки вихідного коду.
Концепція UI
Підхід до організації інтерфейсу перероблено впринципі. Тобто якщо ви раніше працювали з GUI, в новому UI ви майже не знайдете нічого схожого. І навпаки - якщо ви працювали з NGUI, то знайдете дуже багато спільного. Загалом її можна назвати типовою для середовищ з інструментами візуальної розробки.
В основі розуміння нової концепції лежать три компоненти: Canvas, Rect Transform и Event Trigger.
Canvas - є контейнером для всіх елементів UI і визначає режим рендера. Таких контейнерів на сцені може бути більше одного (3).
Rect Transform - цей компонент надає вам змогу встановити розташування та розмір ігрового об'єкта за допомогою зручних візуальних контролів. Він вводить поняття ширини і висоти, а не тільки масштаб (4).
Unity Event - доопрацьована система подій, а конкретно компонент Event - > Event Trigger, який включає компоненти візуального управління викликом подій (5).
У міру знайомства з UI я створював для себе можливі варіанти використання. Давайте на них і розберемо цю всю кухню. Наприкінці статті ви можете знайти демо-проект, на який я буду посилатися в тексті. На жаль, цим прикладам далеко до готових рецептів, так як вони не достатньо опрацьовані, плюс заточені під 2D гри, хоча місцями цілком підійдуть і для 3D.
Приклад # 1
Цілі:
1. Тайлове тло;
2. Фіксоване положення контролів в незалежності від дозволу і співвідношення сторін екрану;
3. Контролі повинні бути пропорційними розміру екрану.
Варіант рішення:
1. Додаємо на сцену Canvas і вибираємо режим рендера Screen space - Overlay, цей режим буде автоматично підлаштовувати його розмір під розмір камери;
2. Додамо тайловий фон, для цього нам всього-то і потрібно, що додати нашому Canvas новий UI компонент - Image, вибрати потрібний спрайт і змінити поле Image Type в значення Tiled;
3. Вибираємо у вікні Game зручну нам роздільну здатність, наприклад, 480x800 і додаємо на наш Canvas - контейнер необхідні контролі, виставляємо їм потрібні позиції;
4. Далі йде нова магія UI, під назвою якоря! Назва говорить сама за себе, вони дозволяють закріплювати ряд характеристик ігрового об'єкта, використовуючи компонент Rect Transform. Змінити їх можна у вікні редагування сцени, включивши новий режим або в інспекторі. Зауважте, що іконка в інспекторі компонента Rect Transform - клікабельна і відкриває вікно вибору встановлених положень і варіантів поведінки, а якщо затиснути кнопку Shift, то ще й положення точки опори;
5. Довершує картину один з компонентів Canvas, який додається до нього за замовчуванням Layout - > Canvas Scaler, а саме один з його режимів - Scale With Screen Size. Цей режим дозволяє вказати Reference Resolution, у нашому випадку це буде 480x800.
Приклад # 2
Цілі:
1. Орієнтація строго портретна;
2. Універсальний для всіх співвідношень сторін фон, який завжди відображається на весь екран, а якщо необхідно обрізається тільки знизу;
3. Фіксоване положення контролів в незалежності від дозволу і співвідношення сторін екрану;
4. Контролі повинні бути пропорційними розміру екрану.
Варіант рішення:
1. Додаємо на наш Canvas - контейнер об'єкт UI - > Image, вибираємо потрібний спрайт і тип зображення Simple;
2. Вся магія зводиться до розташування якорів і точки опори таким чином, що б вони лежили по центру верхнього ребра Canvas;
3. У компонент Canvas Scaler потрібно виставити значення Match рівне 0.
Приклад # 3
Цілі:
1. Орієнтація строго портретна;
2. Тайловий фон, який не скейлиться;
3. Фіксоване за розміром ігрове поле, наприклад 400x400;
4. Фіксоване положення контролів в незалежності від дозволу і співвідношення сторін екрану;
5. Контролі повинні бути пропорційними розміру екрану.
Варіант рішення:
1. Можна, звичайно, реалізувати фон як Sky Box або ігровим об'єктом типу Quad з затайленою текстурою і розмірами завідомо більше екрану. Але ми підемо UI-ним шляхом і створимо Canvas, аналогічний прикладу # 1, тільки виставимо тип рендера Screen Space - Camera і пропишемо нашу головну камеру в полі Render Camera;
2. Тепер створимо ще один Canvas з типом рендера World Space, пропишемо камеру і поставимо значення Order in Layer рівне 1, що б цей шар малювався поверх попереднього Canvas у якого це значення дорівнює 0;
3. Раджу вам при рендері World Space _ заздалегідь _ ставити значення масштабу Canvas таким чином, що б у вас не було проблем з розміром шрифтів;
4. Контролі розставляємо вже відомим нам способом.
Приклад # 4
Цілі:
1. Створити скролер;
2. Контент не повинен бути видний за межі скролера;
3. Він повинен скейлитися разом з екраном і липнути до нижнього краю.
Варіант рішення:
1. Нам необхідний ігровий об'єкт якого ми додамо компонент UI - > Scroll Rect, найважливіше поле якого - Content, поставивши яке ми вказуємо контейнер, що містить ігрові об'єкти (наприклад, надцати зображень ігрових рівнів розміром 100х100, які свідомо не влазять у розмір екрану);
2. Так само нам буде корисний компонент UI - > Mask (зверніть увагу, що також необхідно вставляти порожній компонент Image), який кліпне контент виходить за межі ігрового об'єкта, на який він доданий;
3. Можна також створити об'єкт UI - > Scrollbar і прив'язати його до нашого Scroll Rect
Приклад # 5
Кілька дрібний приємностей:
1. Як розширити список оброблених подій, наприклад обробляти події StartDrag, EndDrag і т. д. використовуючи компонент Event Trigger;
2. Застосування елемента UI - > Tog^ для реалізації нагород у вигляді зірок зі зручним скриптингом виду isOn = true;
3. Найпростіший варіант Попап віконець з використанням компонента Canvas Group і старого доброго аніматора без єдиного рядка коду.
Звичайно, ці приклади покривають лише малу частину можливих завдань і реалізацій, але я сподіваюся, вони допоможуть вам вибрати зручний напрямок для пошуків рішення або, як мінімум, пісочницю, в якій можна спробувати різні варіанти.
Файл проекту з прикладами
www.dropbox.com/s/0d48cf04lekpfoe/DemoProjectUIv4_6_1.unitypackage?dl=0
Виноски
1. bitbucket.org/Unity-Technologies/ui/overview
2. unity3d.com/unity/whats-new/unity-4.6.1
3. docs.unity3d.com/Manual/class-Canvas.html
4. docs.unity3d.com/Manual/class-RectTransform.html
5. docs.unity3d.com/Manual/SupportedEvents.html