Всем привет. Представляю вашему вниманию перевод статьи из блога, посвященному разработке на Unity — The Knights of Unity. В ней пойдет речь о создании миникарты. Я также реализовал описанное в статье и выложил это на Битбакете.
Что требуется для создания миникарты в игре на Unity? Наверно вы будете удивлены, но это проще, чем вы думаете и даже не требует навыков программирования! Далее я постараюсь шаг за шагом объяснить, как это сделать.
![](https://habrastorage.org/r/w1560/files/29f/981/a9b/29f981a9b8d14224b6968d6f89bda6fd.png)
Миникарты (или радары) предназначены для отображения информации о том, что нас окружает. В первую очередь, миникарта должна быть отцентрирована по главному персонажу. Затем, вместо реальных моделей на ней нужно использовать удобочитаемые обозначения, поскольку миникарты зачастую довольно небольшие, и игрок может не распознать информацию, которую миникарта пытается предоставить.
Большинство миникарт представляют собой окружность, и мы постараемся создать такую же. Также на ней часто можно найти дополнительные кнопки и надписи. Их мы тоже попробуем создать.
Начнем с добавления кое-чего на сцену. Я создал сцену с Unity-тян (она будет игроком) и двумя роботами (которые будут противниками).
![](https://habrastorage.org/r/w1560/files/04f/a82/5ef/04fa825ef7a84fbbb151e2d77a992b9d.png)
Вид игры
Теперь добавим вторую камеру. Просто выберите пункт главного меню GameObject -> Camera и переименуйте созданную камеру как Minimap Camera. Теперь сделайте эту камеру дочерним объектом по отношению к Unity-тян (это позволит камере следовать за ней) и поднимите ее на 10 единиц выше головы Unity-тян, повернув при этом вниз.
![](https://habrastorage.org/r/w1560/files/a25/6b8/f53/a256b8f531cf4f8bb95acc2238812d41.png)
Настройка камеры миникарты
Для получения хорошего результата установите позицию компонента Transform в 0, 10, 0 и поворот в 90, 0, 0. Камера должна показывать приблизительно вот это:
![](https://habrastorage.org/r/w1560/files/4c3/5f2/51d/4c35f251d31b4e63bef0455ffd449a3d.png)
Хорошо, но это еще не миникарта. Если вы сейчас запустите сцену, изображение с камеры будет просто отображаться на экране. Мы должны сообщить игре, что хотим представить миникарту как UI-элемент.
Для этого нам потребуется Render Texture. Вы можете легко создать ее, выбрав пункт главного меню Assets -> Create -> Render Texture. Создайте и переименуйте как Minimap Render Texture.
![](https://habrastorage.org/r/w1560/files/9d1/856/d5a/9d1856d5a92c4a36a6427e845ab9aeea.png)
Теперь выберите камеру Minimap Camera и назначьте в инспекторе полю Target Texture созданную ранее Minimap Render Texture.
![](https://habrastorage.org/r/w1560/files/38f/349/902/38f349902378456ebb8ebf6277d5bd59.png)
Если вы попробуете запустить сцену, то заметите, что нигде не видно изображения с камеры Minimap Camera. Изображение теперь скрыто в созданной Minimap Render Texture.
Давайте теперь создадим Canvas для добавления на него UI-элементов. Выберите пункт меню GameObject -> UI -> Canvas и Canvas появится на сцене.
![](https://habrastorage.org/r/w1560/files/c92/fca/b41/c92fcab4172e4bbebeab420367dad15e.png)
На Canvas нужно добавить объект Raw Image, чтобы с его помощью использовать Render Texture. Выберите пункт меню GameObject -> UI -> Raw Image, переименуйте созданный объект как Minimap Image и назначьте в инспекторе полю Texture нашу Minimap Render Texture.
![](https://habrastorage.org/r/w1560/files/095/a81/143/095a811438c44e299695c3dcd2e991af.png)
В результате у нас получился UI-элемент, который отображает изображение с камеры Minimap Camera!
![](https://habrastorage.org/r/w1560/files/37d/3e3/1a8/37d3e31a8ba64ef5ac758af674e22bd0.png)
Сделаем его в виде окружности. Для этой цели я приготовил простую текстуру-маску:
![](https://habrastorage.org/r/w1560/files/9b6/0e0/644/9b60e064476a4a0d8451e26819f26e4c.png)
Создайте новый UI-элемент Image, добавьте на него компонент Mask, в инспекторе задайте полю Source Image нашу текстуру-маску и сделайте объект Minimap Image дочерним по отношению к Mask (подсказка: отключите Mipmaps для текcтуры-маски для лучшего визуального эффекта).
![](https://habrastorage.org/r/w1560/files/42b/1a7/8d8/42b1a78d88b1476e8fde552d8cdac3a9.png)
После этих действий наша миникарта будет выглядеть вот так:
![](https://habrastorage.org/r/w1560/files/15d/d1c/a9d/15dd1ca9d15843e58ed580811acaeaae.png)
Белая миникарта на белом фоне выглядит не очень хорошо. Давайте добавим изображение с контуром поверх нее:
![](https://habrastorage.org/r/w1560/files/cc6/420/e3b/cc6420e3beef460bb4f8519e76649989.png)
![](https://habrastorage.org/r/w1560/files/49b/336/789/49b3367898ee4e1ab466fec29e300e3d.png)
Чтобы было проще перемещать всю эту конструкцию, я сгруппировал ее в отдельный пустой объект, назвав его Minimap.
![](https://habrastorage.org/r/w1560/files/7d7/f99/8c2/7d7f998c2d8b4589ab58f1b443df3fe5.png)
Наконец, давайте переместим созданную миникарту в верхний правый угол экрана.
![](https://habrastorage.org/r/w1560/files/c35/3e9/f4f/c353e9f4fb154eaaa99ab69541bf2d21.png)
Выглядит хорошо, неправда ли? Но это все еще ненастоящая миникарта — это камера, отображающая игру сверху. Если вы знакомы со слоями, то вероятно догадываетесь, что я сделаю далее!
Нам нужен по крайней мере один дополнительный слой. Перейдите в меню Edit -> Project Settings -> Tags and Layers и добавьте новый слой Minimap.
![](https://habrastorage.org/r/w1560/files/d0a/b67/37b/d0ab6737bc9840a2a8117d2862e4fb8d.png)
Теперь создадим три сферы. Одну синего цвета, расположенную в позиции, где стоит Unity-тян. Наилучшим способом будет сделать сферу дочерней по отношению к Unity-тян. Убедитесь, что слой сферы установлен как Minimap.
![](https://habrastorage.org/r/w1560/files/170/214/d4f/170214d4f0154a9a85ccfff87c6e3c3f.png)
Проделайте похожие действия с роботами, только вместо синих сфер используйте красные.
![](https://habrastorage.org/r/w1560/files/e3c/a8c/68c/e3ca8c68cdd4483c91956cdab3414ddc.png)
Теперь самая лучшая часть! Выберите камеру Main Camera и убедитесь, что ее свойство Culling Mask не содержит отмеченным слой Minimap.
![](https://habrastorage.org/r/w1560/files/de9/c0a/5ee/de9c0a5ee9534eb88e6229d3fb25efbd.png)
Теперь выберите камеру Minimap Camera и сделайте с ней обратное действие. Отставьте отмеченным только слой Minimap и отключите все остальные.
![](https://habrastorage.org/r/w1560/files/bea/2db/de9/bea2dbde956943a29b27bf0e6423ed97.png)
Теперь вы видите что-то похожее на настоящую миникарту!
![](https://habrastorage.org/r/w1560/files/acb/0b9/719/acb0b97197db42368ffb82dfd5ae3fc1.png)
Возможно вы захотите внести несколько корректировок. Прежде всего, давайте изменим цвет отсечения камеры Minimap Camera на светло-серый и установим свойство Clear Flags как Solid Color, чтобы фон миникарты лучше контрастировал с синей и красными сферами.
![](https://habrastorage.org/r/w1560/files/569/c6d/c9d/569c6dc9da874471a29d39abbfab787e.png)
Теперь вы можете добавить на миникарту любые другие UI-элементы. Для примера я добавил текст. И вот конечный результат!
![](https://habrastorage.org/r/w1560/files/f24/e07/aab/f24e07aab2d146a99ce7c54dfb19c3a6.png)
Миникарта создана так, чтобы немедленно обновлять свою позицию при перемещении персонажа. Если кто-то из роботов тоже переместится, это будет также отображено.
![](https://habrastorage.org/r/w1560/files/a37/2b4/181/a372b4181fc047c3b1129a37b16a613d.png)
И это конец урока по миникарте!
Что требуется для создания миникарты в игре на Unity? Наверно вы будете удивлены, но это проще, чем вы думаете и даже не требует навыков программирования! Далее я постараюсь шаг за шагом объяснить, как это сделать.
Основные идеи миникарты
![](https://habrastorage.org/files/29f/981/a9b/29f981a9b8d14224b6968d6f89bda6fd.png)
Миникарты (или радары) предназначены для отображения информации о том, что нас окружает. В первую очередь, миникарта должна быть отцентрирована по главному персонажу. Затем, вместо реальных моделей на ней нужно использовать удобочитаемые обозначения, поскольку миникарты зачастую довольно небольшие, и игрок может не распознать информацию, которую миникарта пытается предоставить.
Большинство миникарт представляют собой окружность, и мы постараемся создать такую же. Также на ней часто можно найти дополнительные кнопки и надписи. Их мы тоже попробуем создать.
Подготовка сцены
Начнем с добавления кое-чего на сцену. Я создал сцену с Unity-тян (она будет игроком) и двумя роботами (которые будут противниками).
![](https://habrastorage.org/files/04f/a82/5ef/04fa825ef7a84fbbb151e2d77a992b9d.png)
Вид игры
Теперь добавим вторую камеру. Просто выберите пункт главного меню GameObject -> Camera и переименуйте созданную камеру как Minimap Camera. Теперь сделайте эту камеру дочерним объектом по отношению к Unity-тян (это позволит камере следовать за ней) и поднимите ее на 10 единиц выше головы Unity-тян, повернув при этом вниз.
![](https://habrastorage.org/files/a25/6b8/f53/a256b8f531cf4f8bb95acc2238812d41.png)
Настройка камеры миникарты
Для получения хорошего результата установите позицию компонента Transform в 0, 10, 0 и поворот в 90, 0, 0. Камера должна показывать приблизительно вот это:
![](https://habrastorage.org/files/4c3/5f2/51d/4c35f251d31b4e63bef0455ffd449a3d.png)
Хорошо, но это еще не миникарта. Если вы сейчас запустите сцену, изображение с камеры будет просто отображаться на экране. Мы должны сообщить игре, что хотим представить миникарту как UI-элемент.
Отображение в UI-элемент
Для этого нам потребуется Render Texture. Вы можете легко создать ее, выбрав пункт главного меню Assets -> Create -> Render Texture. Создайте и переименуйте как Minimap Render Texture.
![](https://habrastorage.org/files/9d1/856/d5a/9d1856d5a92c4a36a6427e845ab9aeea.png)
Теперь выберите камеру Minimap Camera и назначьте в инспекторе полю Target Texture созданную ранее Minimap Render Texture.
![](https://habrastorage.org/files/38f/349/902/38f349902378456ebb8ebf6277d5bd59.png)
Если вы попробуете запустить сцену, то заметите, что нигде не видно изображения с камеры Minimap Camera. Изображение теперь скрыто в созданной Minimap Render Texture.
Давайте теперь создадим Canvas для добавления на него UI-элементов. Выберите пункт меню GameObject -> UI -> Canvas и Canvas появится на сцене.
![](https://habrastorage.org/files/c92/fca/b41/c92fcab4172e4bbebeab420367dad15e.png)
На Canvas нужно добавить объект Raw Image, чтобы с его помощью использовать Render Texture. Выберите пункт меню GameObject -> UI -> Raw Image, переименуйте созданный объект как Minimap Image и назначьте в инспекторе полю Texture нашу Minimap Render Texture.
![](https://habrastorage.org/files/095/a81/143/095a811438c44e299695c3dcd2e991af.png)
В результате у нас получился UI-элемент, который отображает изображение с камеры Minimap Camera!
![](https://habrastorage.org/files/37d/3e3/1a8/37d3e31a8ba64ef5ac758af674e22bd0.png)
Сделаем его в виде окружности. Для этой цели я приготовил простую текстуру-маску:
![](https://habrastorage.org/files/9b6/0e0/644/9b60e064476a4a0d8451e26819f26e4c.png)
Создайте новый UI-элемент Image, добавьте на него компонент Mask, в инспекторе задайте полю Source Image нашу текстуру-маску и сделайте объект Minimap Image дочерним по отношению к Mask (подсказка: отключите Mipmaps для текcтуры-маски для лучшего визуального эффекта).
![](https://habrastorage.org/files/42b/1a7/8d8/42b1a78d88b1476e8fde552d8cdac3a9.png)
После этих действий наша миникарта будет выглядеть вот так:
![](https://habrastorage.org/files/15d/d1c/a9d/15dd1ca9d15843e58ed580811acaeaae.png)
Белая миникарта на белом фоне выглядит не очень хорошо. Давайте добавим изображение с контуром поверх нее:
![](https://habrastorage.org/files/cc6/420/e3b/cc6420e3beef460bb4f8519e76649989.png)
![](https://habrastorage.org/files/49b/336/789/49b3367898ee4e1ab466fec29e300e3d.png)
Чтобы было проще перемещать всю эту конструкцию, я сгруппировал ее в отдельный пустой объект, назвав его Minimap.
![](https://habrastorage.org/files/7d7/f99/8c2/7d7f998c2d8b4589ab58f1b443df3fe5.png)
Наконец, давайте переместим созданную миникарту в верхний правый угол экрана.
![](https://habrastorage.org/files/c35/3e9/f4f/c353e9f4fb154eaaa99ab69541bf2d21.png)
Выглядит хорошо, неправда ли? Но это все еще ненастоящая миникарта — это камера, отображающая игру сверху. Если вы знакомы со слоями, то вероятно догадываетесь, что я сделаю далее!
Развлекаемся со слоями
Нам нужен по крайней мере один дополнительный слой. Перейдите в меню Edit -> Project Settings -> Tags and Layers и добавьте новый слой Minimap.
![](https://habrastorage.org/files/d0a/b67/37b/d0ab6737bc9840a2a8117d2862e4fb8d.png)
Теперь создадим три сферы. Одну синего цвета, расположенную в позиции, где стоит Unity-тян. Наилучшим способом будет сделать сферу дочерней по отношению к Unity-тян. Убедитесь, что слой сферы установлен как Minimap.
![](https://habrastorage.org/files/170/214/d4f/170214d4f0154a9a85ccfff87c6e3c3f.png)
Проделайте похожие действия с роботами, только вместо синих сфер используйте красные.
![](https://habrastorage.org/files/e3c/a8c/68c/e3ca8c68cdd4483c91956cdab3414ddc.png)
Теперь самая лучшая часть! Выберите камеру Main Camera и убедитесь, что ее свойство Culling Mask не содержит отмеченным слой Minimap.
![](https://habrastorage.org/files/de9/c0a/5ee/de9c0a5ee9534eb88e6229d3fb25efbd.png)
Теперь выберите камеру Minimap Camera и сделайте с ней обратное действие. Отставьте отмеченным только слой Minimap и отключите все остальные.
![](https://habrastorage.org/files/bea/2db/de9/bea2dbde956943a29b27bf0e6423ed97.png)
Теперь вы видите что-то похожее на настоящую миникарту!
![](https://habrastorage.org/files/acb/0b9/719/acb0b97197db42368ffb82dfd5ae3fc1.png)
Последние штрихи
Возможно вы захотите внести несколько корректировок. Прежде всего, давайте изменим цвет отсечения камеры Minimap Camera на светло-серый и установим свойство Clear Flags как Solid Color, чтобы фон миникарты лучше контрастировал с синей и красными сферами.
![](https://habrastorage.org/files/569/c6d/c9d/569c6dc9da874471a29d39abbfab787e.png)
Теперь вы можете добавить на миникарту любые другие UI-элементы. Для примера я добавил текст. И вот конечный результат!
![](https://habrastorage.org/files/f24/e07/aab/f24e07aab2d146a99ce7c54dfb19c3a6.png)
Миникарта создана так, чтобы немедленно обновлять свою позицию при перемещении персонажа. Если кто-то из роботов тоже переместится, это будет также отображено.
![](https://habrastorage.org/files/a37/2b4/181/a372b4181fc047c3b1129a37b16a613d.png)
И это конец урока по миникарте!