Створення панелі умінь
Цією статтею починається серія публікацій про створення панелі умінь (skills panel) для гри. Панелі умінь зустрічаються у багатьох RPG іграх і не лише.
У міру створення панелі умінь буде розглянуто багато допоміжних компонентів, таких як робота з інтерфейсом користувача або Unity UI (user interface); використання компонентів Event System, Grid Layout Group, Outline; налаштування Canvas; використання інтерфейсів IPointerDownHandler, IPointerEnterHandler, IPointerExitHandler; і багато іншого. В результаті вийде така гра:
Оскільки матеріал вийшов досить об'ємним, довелося розділити його на частини. Сьогодні особливу увагу приділимо роботі з Unity UI та налаштуванням Canvas.
Створення сцени та налаштування Canvas:
Спочатку потрібно створити порожній 3d проект і додати нову камеру для UI (GameObject & Camera), дамо їй ім'я UICamera. Змінимо проекцію (projection) камери на ортографічне (розмір об'єктів не залежить від відстані). Виставимо Clear Flags > Depth only це дасть прозору камеру без зайвих фонових додавань. Оскільки UI повинен описуватися поверх всього, потрібно змінити глибину камери (Depth = 1).
Далі створимо Canvas (GameObject UI & gt; Canvas), разом з елементом Canvas створиться Event System, він необхідний для обробки подій, які відбуваються на Canvas (детальніше розглянемо пізніше). Що ж таке Canvas і для чого він потрібний. Canvas перекладається як «Полотно» і є абстрактним простір для налаштування та відтворення UI. Усі UI елементи мають бути нащадками Canvas. Рекомендується використовувати такі налаштування (вони дозволять автоматично підлаштовуватися під розширення екрана, дужезручно для мобільних пристроїв):
Вибираємо «Render Mod»; Screen Space - Camera»UI. У полі "Render Camera" вибираємо створену нами UICamera. Далі залишається змінити Canvas Scaler Sctipt, саме поле «UI Scale Mode > Scale With Screen Size», що дає автоматичну зміну UI залежно від розширення екрану.
На цьому настоянки Canvas закінчено.
Робота з Unity UI:
Працювати з UI елементами зручно у 2d режимі (це не обов'язково, але значно спростить процес розробки UI), перемикатися між 2d та 3d режимами можна «Scence > 2D».
Всі елементи UI містять наступний компонент Rect Transform (у тому числі і Canvas). Саме "Rect Transform" контролює розташування UI щодо розширення екрану.
Розглянемо можливості "Rect Transform" на простому прикладі. Спочатку створимо кнопку (правою кнопкою миші на елемент Canvas UI > Button). Перше, що впадає у вічі - це синє коло і чотири трикутники в центрі кнопки.
Чотири трикутники називають «Якір», оскільки в залежності від його розташування та налаштувань змінюють свою поведінку UI елементи при зміні розширення екрану. Синє коло – це центр кнопки (або іншого UI елемента), щодо нього відбувається обертання (Rotation) або масштабування (Scale) елемента.
Місце розташування "центру" кнопки зберігається у специфічному форматі і за нього відповідає поле "Pivot". Де зберігається розташування центру у співвідношенні (координати центру x і y поділити на ширину і висоту відповідно) щодо нижнього лівого кута. Тобто співвідношення сторін зеленого та червоного квадратів на малюнку нижче.
Наприклад, "Pivot X = 0.5, Y = 0.5" означає, що центр кнопки знаходиться посередині кнопки."Pivot X = 0, Y = 0" означає, що центр кнопки знаходиться в нижньому лівому кутку.
Далі розглянемо роботу «Якоря», може працювати у 2-х режимах.
Режим 1 - це коли всі чотири трикутники знаходяться в одній точці. Тоді компонент "Rect Transform" має такі поля: Pos X, Pos Y, Pos Z, Width, Height. Як Ви вже здогадалися, Width, Height зберігають значення ширини та висоти UI елемента (у нашому випадку кнопки).
Pos X, Pos Y, Pos Z відповідають за відстань між центром "Якоря" та "центром" UI елемента.
Виникає питання, а навіщо нам потрібний цей «Якір». Відповідь проста, при зміні розмірів батьківського UI елемента "Якір" змінює відстань до "центру" поточного UI елемента пропорційно цим змінам. "Якір", як і "центр", зберігає свої координати у співвіднесеному вигляді в полі Anchors.
Для режиму 1 Anchors > Min» та «Anchors > Max» збігаються. Дуже важливо запам'ятати, що в цьому режимі змінюється тільки відстань між «Якором» та «центром», а поля Width, Height залишаються низовинними (оскільки Canvas налаштований в режимі «Scale With Screen Size», то зі зміною розширення екрана всі UI елементи змінять свої розміри за рахунок автоматичної зміни параметра Scale у самому Canvas).
Режим 2 - це коли чотири трикутники розділені. І перше, що впадає у вічі - це зміни наших полів Pos X, Pos Y, Pos Z, Width, Height на Left, Top, Pos Z, Right, Bottom відповідно. Тепер чотири трикутники утворюють уявний квадрат і відстань від боку цього квадрата до нашого UI елемента зберігається в полях на Left, Top, Right, Bottom (функція Pos Z залишилася незмінною та відповідає за глибину об'єкта).
Змінюючи значення цих полів, змінюється розмір UI елемента, а чи не «Якоря». За «Якір» по-як і раніше відповідає поле Anchors, але тепер «Anchors > Min» та «Anchors > Max» не завжди збігатимуться.
Тепер поле Anchors > Min» відповідає за відстань між Left та Bottom сторонами батьківського та поточного UI елемента, а «Anchors > Max» - за відстань між Top та Right сторонами.
Тепер при зміні батьківського об'єкта наш UI елемент змінить свої розміри (оскільки Canvas налаштований в режимі Scale With Screen Size, то зі зміною розширення екрана всі UI елементи змінять свої розміри за рахунок автоматичної зміни параметра Scale в самому Canvas, і це дасть додаткові зміни всім елементам у режимі 2).
Щоб постійно не тягати "Якір" та "центр" вручну, розробники Unity зробили кілька стандартних налаштувань. У них можна перейти, натиснувши на наступний елемент:
Відкриється наступне вікно, де можна задати розташування «Якоря».
Якщо хочете разом зі змінами «Якоря» змінити положення «центру», слід затиснути клавішу «Shift» (з'являється синій кружечок який і відповідає за «центр»).
Також є можливість відразу пересунути UI елемент на потрібну позицію, для цього потрібно затиснути клавішу Alt (можна затискати Alt і Shift одночасно).
Роботаз Grid Layout Group.
Для початку створимо тестову сцену, створимо Canvas і додамо Plane (так само, як кнопку). Plane повинен розташовуватися приблизно так:
Grid Layout Group можна додати за допомогою Add Component:
Тепер усі дочірні об'єкти Plane будуть автоматично підлаштовуватись (змінювати розміри та своє розташування) залежно від налаштувань Grid Layout Group. Для наочного прикладу додамо 4 Imageелемент дочірніх до Plane.
Щоб відрізняти Image, завантажимо туди різні спрайти.
Image1, Image2, Image3, Image4 було присвоєно зображення цифр 1, 2, 3, 4 відповідно. Тепер, коли знаємо, де якийсь елемент, почнемо вивчення Grid Layout Group.
Padding відповідає за відступи дочірніх елементів від сторін батьківського об'єкта.
Як видно на малюнку, 4-й Image не влазить у виділені межі, тому його було перенесено на новий рядок. Поле Spacing відповідає за відстань між дочірніми об'єктами.
Поле Cell Size відповідає за розміри дочірніх об'єктів.
Поле "Start Corner" відповідає за порядок розміщення дочірніх об'єктів.
Upper Left розміщує дочірні об'єкти зліва направо та зверху вниз.
Upper Right розміщує дочірні об'єкти праворуч наліво та зверху вниз.
Lower Left розміщує дочірні об'єкти зліва направо та знизу вгору.
Lower Right розміщує дочірні об'єкти праворуч наліво та знизу вгору.
Поле «Start Axis» вказує, в який бік починають розміщуватись дочірні елементи (за умовчанням стоїть «Horizontal»).
Тобто якщо дочірні об'єкти не влазять у ширину батьківського, відбувається перехід на новий рядок.
Для Vertical навпаки, якщо дочірні об'єкти не влазять у висоту батьківського, відбувається перехід на новий рядок.
Поле Child Alignment відповідає за автоматичне вирівнювання дочірніх об'єктів. Це поле не складне і нагадує вирівнювання тексту Word.
Залишається останнє поле Constraint, воно дає можливість створювати фіксовану кількість рядків або стовпців (за замовчуванням стоїть Flexible, тобто немає фіксування).
Як бачите, елемент Grid Layout Group дуже простий, але іноді може значно спростити роботу та UI.
Висновок.
У цій частині була особлива увага приділена роботі з новим Unity UI, він став набагато зручнішим та якіснішим. Тепер немає потреби користуватися сторонніми плагінами, потрібно лише трохи розібратися і можна створити будь-який інтерфейс, що адаптується до розширення екрана (дуже корисно для мобільних пристроїв).
На цьому перша частина статті закінчена, спробуйте погратися з різними елементами UI (не забувайте змінювати розширення екрану для експериментів).
Змінити розширення екрана можна у вікні «Games», як показано на малюнку нижче: