Створення миникарты на Unity

Всім привіт. Уявляю вашій увазі переклад статті з блогу, присвяченому розробці на Unity — The Knights of Unity. У ній піде мова про створення миникарты. Я також реалізував описане в статті і виклав це на Битбакете.


Що потрібно для створення миникарты у грі на Unity? Напевно ви будете здивовані, але це простіше, ніж ви думаєте, і навіть не вимагає навичок програмування! Далі я спробую крок за кроком пояснити, як це зробити.


Основні ідеї миникарты

Миникарты (або радари) призначені для відображення інформації про те, що нас оточує. В першу чергу, міні-карта повинна бути відцентрована по головному персонажу. Потім, замість реальних моделей на ній потрібно використовувати удобочитаемые позначення, оскільки миникарты часто досить невеликі, і гравець може не розпізнати інформацію, яку міні намагається надати.

Більшість миникарт являють собою коло, і ми постараємося створити таку ж. Також на ній часто можна знайти додаткові кнопки і написи. Їх ми теж спробуємо створити.

Підготовка сцени
Почнемо з додавання дечого на сцену. Я створив сцену з Unity-тян (вона буде гравцем) і двома роботами (які будуть противниками).


Вид гри

Тепер додамо другу камеру. Просто виберіть пункт головного меню GameObject -> Camera і перейменуйте створену камеру Minimap Camera. Тепер зробіть цю камеру дочірнім об'єктом по відношенню до Unity-тян (це дозволить камері слідувати за нею) і підніміть її на 10 одиниць вище голови Unity-тян, повернувши при цьому вниз.


Налаштування камери миникарты

Для отримання хорошого результату встановіть позицію компонента Transform 0, 10, 0 і поворот 90, 0, 0. Камера повинна показувати приблизно ось це:



Добре, але це ще не міні. Якщо ви зараз запустіть сцену, зображення з камери буде відображатися на екрані. Ми повинні повідомити грі, що хочемо представити миникарту як UI-елемент.

Відображення у UI-елемент
Для цього нам буде потрібно Render Texture. Ви можете легко створити її, вибравши пункт головного меню Assets -> Create -> Render Texture. Створіть і перейменуйте Minimap Render Texture.



Тепер виберіть камеру Minimap Camera і призначте в інспекторі полю Target Texture створену раніше Minimap Render Texture.



Якщо ви спробуєте запустити сцену, то помітите, що ніде не видно зображення з камери Minimap Camera. Тепер зображення приховано у створеній Minimap Render Texture.

Давайте тепер створимо Canvas для додавання на нього UI-елементів. Виберіть пункт меню GameObject -> UI -> Canvas Canvas з'явиться на сцені.



На Canvas потрібно додати об'єкт Raw Image, щоб з його допомогою використовувати Render Texture. Виберіть пункт меню GameObject -> UI -> Raw Image, перейменуйте створений об'єкт Minimap Image і призначте в інспекторі полю Texture нашу Minimap Render Texture.



В результаті у нас вийшов UI-елемент, який відображає зображення з камери Minimap Camera!



Зробимо його у вигляді кола. Для цієї мети я приготував просту структуру-маску:



Створіть новий UI-елемент Image, додайте на нього компонент Mask, в інспекторі задайте полю Source Image нашу текстуру-маску і зробіть об'єкт Minimap Image дочірнім по відношенню до Mask (підказка: вимкніть Mipmaps для текстури-маски для кращого візуального ефекту).



Після цих дій наша міні-карта буде виглядати ось так:



Біла міні на білому тлі виглядає не дуже добре. Давайте додамо зображення з контуром поверх неї:





Щоб було простіше переміщати всю цю конструкцію, я згрупував її в окремий порожній об'єкт, назвавши його Minimap.



Нарешті, давайте перемістимо створену миникарту в правий верхній кут екрана.



Виглядає добре, неправда? Але це все ще несправжня міні-карта — це камера, яка відображає гру зверху. Якщо ви знайомі з шарами, то ймовірно здогадуєтеся, що я зроблю далі!

Розважаємося з шарами
Нам потрібен принаймні один додатковий шар. Перейдіть в меню Edit -> Project Settings -> Tags and Layers і додайте новий шар Minimap.



Тепер створимо три сфери. Одну синього кольору, розташовану в позиції, де стоїть Unity-тян. Найкращим способом буде зробити сферу дочірньою по відношенню до Unity-тян. Переконайтеся, що шар сфери встановлений Minimap.



Проробіть схожі дії з роботами, тільки замість синіх сфер використовуйте червоні.



Тепер найкраща частина! Виберіть камеру Main Camera і переконайтеся, що її властивість Culling Mask не містить зазначених шар Minimap.



Тепер виберіть камеру Minimap Camera і зробіть з неї зворотну дію. Відставте зазначеним тільки шар Minimap та вимкніть всі інші.



Тепер ви бачите щось схоже на справжню миникарту!



Останні штрихи
Можливо ви захочете внести кілька коригувань. Перш за все, давайте змінимо колір відсікання камери Minimap Camera на світло-сірий і встановимо властивість Clear Flags Solid Color, щоб фон миникарты краще контрастував з синім і червоним сферами.



Тепер ви можете додати на миникарту будь-які інші UI-елементи. Для прикладу я додав текст. І ось кінцевий результат!



Міні створена так, щоб негайно оновити свою позицію при переміщенні персонажа. Якщо хтось із роботів теж переміститися, це буде також відображено.



І це кінець уроку з міні!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.