Как сделать обводку объекта unity

Добавил пользователь Дмитрий К.
Обновлено: 28.08.2024

Как я могу описать игровой объект? (для демонстрации выбора игрока). Допустим, у меня 5 гоблинов, и я хочу выделить только ту, которая пересекается с курсором.

Мои знания материалов и шейдеров очень слабы, поэтому, возможно, я не понимаю правильно, но.

Но это означало бы, что мне придется делать две версии материала для каждого выбираемого объекта? Поскольку только изменение шейдера изменило бы каждый другой объект с тем же материалом?

Разве нет лучшего способа?

1 ответ

Я могу дать вам свой код. Я использовал этот код для выделения объектов в комнате, которые выбраны и используются Raycasting. Вы можете выделить только один объект, если выбрать другой, старый будет отменен. Игнорировать комментарии, они находятся на немецком языке: D

Если вы хотите использовать контур-шейдер, вот хороший: Очерченный Diffuse

У меня есть несколько вопросов: 1) Есть ли вариант этого шейдера, который работает с новым стандартным шейдером Unity 5? 2) Что если объект, который я хочу выделить, состоит из нескольких меньших объектов? (как тело + оружие) Разве это не портит контуры? 3) Какой цвет вы меняете при выделении? Это цвет альбедо?

Давайте поговорим о моем highlightCode, потому что я только что использовал шейдеры, и я нуб в этой теме. Я обновил свой код и ссылку, которую использовал в своем ответе. 2) Я использовал свой highlightCode, чтобы выделить объект, который имеет много других объектов в качестве дочерних. Вам просто нужно ввести детей и изменить там материал тоже. 3) Он берет текущий цвет вашего объекта и просто добавляет значение: new Color(oldColor.r + highlightFactor, oldColor.g + highlightFactor, oldColor.b + highlightFactor, oldColor.a); 1) Я думаю, есть много уроков, как использовать шейдеры.

Я также очень плохо знаком с шейдерами и материалами, так что я не понимаю одну вещь? Цвет, который вы меняете - это цвет основного материала (альбедо)? Многие модели, которые я использую, взяты из магазина активов, и они имеют базовый материал белого цвета, так что, думаю, мне придется их немного затемнить.

Да и нет, если цвет вашего объекта белый, то он будет ярче, возможно, неблагоприятным ^^. Но если объект красный, он будет ярко-красным. Вы можете попробовать принять отрицательное значение, чтобы оно было темнее, а не ярче

Если цвет белый, как он может быть ярче после добавления highlightFactor? Я думал, что максимум 255/255/255, который белый.

Это на самом деле работает с текстурированными объектами с белым альбедо. Только что попробовал. Не знаю почему, но это работает, так что спасибо :) Кстати, было бы лучше использовать подсветку oldColor * вместо подсветки oldColor +, так как она лучше сохраняет соотношение RGB исходного цвета.

Выровнял Terrain

Первым делом я выровнял Terrain, оставив только незначительные неровности для вида. Холмы и высокая трава – чуть-чуть не то, что я хотел.

Затем добавил немного деревьев, залил все более-менее низкой травой. Сияние солнца поменял в инспекторе на 50mmZoom. Получилась вот такая картинна.

Довольно симпатично. Но… Нет.

Добавление тумана

Чтобы все стало немного реалистичнее, решил добавить туман. Худо-бедно разобрался, как это делается. Оказывается, все просто.

Заходим в Window -> Rendering -> Lighting.
Окошко для удобства кладем на панельку рядом с Инспектором.
Переходим во вкладку Environment и ставим галочку около Fog – туман.
Настраиваем все под себя, чтобы это смотрелось адекватно. Дергаем ползунки, не боимся.

И в итоге получается небольшой такой туман… Я установил густоту 0.005, чтобы он не был слишком очевиден.

Получилось вроде бы неплохо.

Добавление постэффектов

Дальше решил заняться постэффектами. Как выяснилось, добавляются они достаточно легко, а картинку преображают вполне себе ощутимо.

Суть в том, что вешать постэффекты нужно на камеру, с которой будет виден игровой мир. В конкретном случае это камера, зашитая в First Person Controller.

Выбираем камеру в иерархии проекта.
Заходим в Component -> Image Effects и выбираем там то, что нам нужно.
Эффект навешивается на камеру и появляется в инспекторе, где можно подергать ползунки и настроить все под себя.

Я, например, первым делом добавил 3 эффекта: Sun Shafts (объемные лучи солнца), Bloom (небольшое свечение), Antialiasing (типа сглаживание).

Важный момент: чтобы лучи солнца исходили из вашего Directional Light, а не отовсюду, перетащите его в окошко Shafts caster в настройках эффекта. Результат на скриншотах.

Картинка стала более живой, более красочной. Но это мы только начали…

Смена Color Space

В погоне за красивой графикой наткнулся на такую вещь, что нужно менять Color Space в настройках проекта с Gamma на Linear. Это вроде как должно придать большую реалистичность картинке.

Переходим в Edit -> Project Settings -> Player.
В графе Color Space меняем значение на Linear. Немного ждем, пока применятся изменения.

Также я подкорректировал постэффекты, добавил немного интенсивности освещения, и вот что получилось…

Действительно реалистичнее. Хотя насыщенность цветов и на порядок упала… Ну да бог с ним, продолжим.

Сделал это при помощи опции Depth of Field (Component -> Image Effect -> Camera). Тоже вешается на камеру. Если кто не знает, эта штука немного размывает отдаленные объекты. Я настроил ее легонько, чтобы размытие было почти незаметно. Даже не знаю, заметите ли вы его на скриншоте.

В общем результатом я после этого остался доволен и решил, что пора немного разнообразить окружение. А то ведь одним лесом сыт не будешь.

Добавление воды

Первым делом решил добавить воду. Для этого ее надо сначала где-то взять. А взять ее можно из стандартного пакета ресурсов под названием Standard Assets. Импортировал его из Asset Store.

И скриншот исправления.

Жизнерадостно исправив эту и другие ошибки ~~на новые~~, переходим к установке самой воды.

И вот в нашем фэнтезийном лесу появилась небольшая река. Хотя больше похоже на болотце…

Смотрится неплохо. Но трава на берегу не растет.

Чтобы все выглядело более адекватно, скачал текстур-пак Outdoor Ground Textures, импортировал в Unity (вы же помните, как это делается, да? ?) и подрисовал песчаные берега. Получилось что-то такое.

Уже больше похоже на правду, да?

Добавление камней

Добавить камни также легко, как и траву.

Выбираем Terrain. В инспекторе идем во вкладку Paint Details.
Добавляем туда наши камни в качестве моделей.
Разбрасываем по карте максимально хаотично.

У меня получилось как-то вот. И в целом результатом я остался доволен.

Летающие частицы в воздухе

На сцену нужно добавить систему частиц, которая в радиусе 100-150 метров от игрока будет спавнить частицы в сферическом пространстве. Частицы будут хаотично двигаться и исчезать за 10-15 секунд, что создаст красивый эффект для сцены. Во всяком случае, я пришел к такому решению.

Дам небольшую инструкцию для тех, кто захочет повторить это дома. Разжевывать не буду – только главное.

Создаем Particle System и привязываем к игроку, то есть перемещаем в контроллер в качестве дочернего объекта на ряду с камерой. Это нужно, чтобы частицы спавнились всегда вокруг игрока, где бы он ни был.
В инспекторе настраиваем систему частиц следующим образом.
1. Simulation Space – World (иначе вся система будет поворачиваться вместе с камерой игрока)
2. Shape – Sphere (сферическая область вокруг игрока, радиус – порядка 100-150 будет нормально).
3. Снижаем влияние гравитации на частицы параметром Gravity Modifier, а с помощью Noise (шум) заставляем их двигаться хаотично.
Все остальное вы без проблем сможете настроить сами: цвет частиц, размер и так далее. В инспекторе куча вкладок – пожалуйста, дергайте ползунки и проверяйте ?.

По итогу у меня получился вот такой прикольный эффект. Присмотритесь, и вы увидите десятки маленьких бледно-оранжевых частиц, витающих в воздухе повсюду.

На скриншоте они не очень заметны. Далее выложу небольшое видео, чтобы показать их в действии.

Добавление фоновых звуков

Чтобы немного оживить мой лес, нашел в интернете бесплатную фоновую дорожку с лесными звуками: пением птиц и прочим. Добавить ее в сцену тоже очень легко.
1. Создается элемент Audio Source, переименовываем по своему вкусу.
2. Помещаем его в игрока, чтобы музыка была слышна в любом месте леса.
3. Музыку прямо из проводника перетаскиваем в свой проект.
4. Выбираем в иерархии свой Audio Source и в инспекторе указываем нужный музыкальный файл.
Запускаем игру и наслаждаемся пением птичек.

На этом пока все. Не могу утверждать, что создал супер-реалистичную картинку. Но определенно стало лучше, чем было. Продолжение в будущих постах. И удачи ?.

Sergey Tenditniy про используемые им методы создания своих выдающихся модульных игровых окружений в Unity.

Перевод статьи с портала 80 level

Добрый день, меня зовут Сергей, я родом из Украины, но последние 3 года живу в красивой стране Словении.

Идея

Желание сделать такой городок появилось у меня в прошлом году, когда мы с моей женой путешествовали по Эльзасу во Франции. Это очень красивая область этой страны, с большим количеством живописных городков и местечек. Я был в восторге от красоты и уникального стиля, которые там меня окружали.

Именно тогда меня посетила идея сделать что-то подобное в виртуальной среде, ведь если люди с удовольствием посещают такие места в реальности, то и виртуальное путешествие будет кому- то интересно.

Основной моей задачей было правильно передать атмосферу и настроение, возникающие, когда человек попадает в такую обстановку: яркие цвета, изогнутые формы. Нужно было даже усилить возникающие ощущения, используя мультипликационный стиль при создании окружения такого городка.

Также мне было интересно попытаться создать что-то в новом для меня стиле, так как ранее я создавал более реалистичные модели. Хотелось понять, что я смогу сделать, работая в стиле мультфильма.

Сначала я не предполагал продавать этот проект на площадке Unity Asset Store. Чуть позже я пришел к выводу, что правильнее будет создать целостное игровое окружение, а не просто сцену для красивого рендера. Мне хочется чтобы люди могли использовать созданное мной в своих собственных проектах.

Основные фото–референсы, сделанные мной во Франции:

Моделинг

Первые скриншоты по ходу этапов работы:

Основные этапы рабочего процесса:

1. В самом начале, после экспериментального подбора разных вариантов, я создал только первые два домика. Когда получились нужные формы и изгибы, я расположил эти домики на карте с простым освещением – мне хотелось увидеть, как они смотрятся вместе, это нужно было для планирования композиции будущего городка.

2. Далее я добавил имеющимся домикам больше деталей и создал несколько новых.

3. Мной были выбраны два домика и церковь для экспериментирования с сочетанием цветов, важно было понять то, как они будут выглядеть по завершению работы. Была добавлена временная зеленая растительность.

4. Добавлен окончательный набор растительности. Проведена чистовая проработка детализации домиков. Настроено освещение и пост-процессинг. Уже практически готов финальный вид части моего городка. Это послужило мне стилевым и цветовым референсом при проработке остальных улиц и ассетов.

Для этого проекта я решил создать часть домиков на основе одного меша, не используя модульности их структуры. А вторую часть домиков я сделал полностью модульными, чтобы их можно было сложить из отдельных составных частей. Такой подход нужен был из-за того, что я выставил этот городок на продажу, и хотелось чтобы, покупатели имели выбор – пользоваться уже готовыми моделями или собрать их из модульных составных частей (двери, окна, стены и т.п.)

Создать модульный дом достаточно просто. Нужно предварительно создать набор вариантов стен, углов и т.п. Затем выбрать из этого набора подходящие варианты и собрать воедино конструкцию дома, после чего добавить деревянные наличники, окна и двери. При этом, не забудьте добавить украшения, цветы – и дом готов.

На рисунке вы видите, как он выглядит, и из каких элементов собран:

Все элементы:

Поликаунт:

Создаем ассеты

Этот процесс одновременно прост и сложен. Но это важнейшая часть нашей работы. Основная задача – найти как можно больше референсов, всегда легче воссоздать что-либо уже существующее в реальном мире, просто используйте свое воображение и креативность и соберите всё воедино.

Всегда должны присутствовать области, где глаз может расслабиться, направляя взгляд по таким интересным зонам с привлекательными и сочетающимся деталями.

Растительность

Растительность создавалась очень просто. Ничего нового:

1. Первым делом я создал высокополигональный лист.

2. Использовал запекание нормалей и прозрачность.

3. Затем немного изменил его и с помощью клонирования создал всю ветку.

4. Для создания дерева использовал сферы, затем добавил ранее созданные ветки.

5. Обратите внимание на изображение расположенное ниже – я использовал карту нормалей, полученную на основе сферы для правильного расположения листьев. Часто об этом этапе забывают, но это очень важно.

Для оптимизации всем листьям можно задать одинаковую текстуру. Нужно обеспечить разнообразие цветов использованием vertex color для листьев, сделать их немного более красными или желтыми.

Подобным образом я создал всю растительность, начиная от самой маленькой 3d веточки. Так, можно легко создавать кустарники и даже плющи.

Текстурирование

Я старался обойтись минимумом текстур. Я использовал только текстуры с тайлингом для работы с этим городком (для текстур растительности тайлинг не применялся), при этом не применялось каких либо редких или уникальных изображений.

Были использованы пять основных текстур для создания окружения: бетон, древесина, металл, черепица и листва.

Эти 5 текстур использованы на 95% поверхности того, что вы перед собой видите. Также я использовал текстуры в градациях серого для возможности добавления цвета с использованием vertex color в Unity, всё разнообразие цветов, грязь и потертости древесины я добавил, используя функционал vertex color texture blending с использованием vertex alpha. Я использовал специальный шейдер, созданный в Shader forge, он дал мне возможность смешения с использованием vertex alpha и одновременно overlay vertex color поверх текстур с использованием градаций серого.

На этом изображении вы видите, что я использовал только 4 материала для оформления домиков (древесина, бетон, черепица, стекло), но так, как я использовал vertex color – композиция выглядит интересной и достаточно разнообразной. Один цвет на изображении это один материал в игре.

Все разнообразие цвета создано с использованием vertex color, так каждый из этих домов в сцене может иметь уникальное сочетание цветов, одновременно, это очень не требовательно к ресурсам.

Я думаю, что основной секрет этого городка заключается в ярких, насыщенных и, одновременно, простых текстурах с большим разнообразием цветов.

Этот стильный вид – результат использования полноцветных и насыщенных текстур, изогнутой геометрии объектов и пост-процессинга.

Инструменты

На первых этапах работы я применил vertex color в Maya, чтобы получить базовые цвета для домиков. А в среде Unity использовал инструмент vertex paint tool для добавления цветов. Из всего разнообразия я выбрал free face paint, при этом можно добавлять цвет сразу на весь полигон и это быстрее чем на каждый вертекс по отдельности. Если у Вас есть шейдер поддерживающий vertex color или смешение текстур, то можно прямо в сцене Unity очень быстро изменить общий вид ваших ассетов.

Вы можете посмотреть, как я это реализовал на этих изображениях:

Освещение

Моя задача была передать ощущение солнечного летнего дня. При этом городок также хорошо смотрится при лунном свете ночи. Может быть однажды я реализую ночную версию со звездами на небе и желтым светом открытых окон.

Я использовал только real-time направленный свет в этой сцене. Для всего непрямого освещения использовались стандартные средства Unity.

Конечно. Если бы это был только отдельный рендер, я бы добавил большее разнообразие источников цветного освещения чтобы, например, создать эффект отблеска от поверхности земли или листвы. Было установлено основное освещение перед началом текстурирования, это было нужно, чтобы сразу понять взаимодействие текстур и освещения.

Для освещения не было проведено запекание, поэтому сохранилась возможность вращения, изменения его яркости и интенсивности в любое время. Небольшую неоднородность создает легкая текстура облачности, примененная к направленному источнику света. Это делает сцену более живой.

Также нужно наметить разделение заднего плана от переднего используя стандартный туман Unity. Ощущение солнечного дня создает контраст между затененными и освещенными зонами.

Все остальное сделано с помощью пост-эффектов.

Пост-процессинг

На этом изображении я отключил все пост эффекты а затем включил их последовательно один за другим, чтобы показать то, как они влияют на сцену.

И могу сказать что самое значительное влияние оказывает обыкновенный Color Grading, все остальные эффекты по сравнению с ним не так явно видны и поэтому, если потребуется оптимизация их можно отключить.

Заключение

В общем, я могу сказать, что такой подход вполне приемлем для игрового продакшн процесса. Так, как использование текстур с тайлингом и vertex color позволяет реализовывать большие пространства игрового окружения с привлечением относительно небольших ресурсов.

С соответствующей настройкой уровня детализации (LOD) можно получить большое количество элементов детализации переднего плана, а также упростить их для использования на заднем плане. Основные малоразмерные элементы в нашем проекте это растительность, но учитывая то, что при ее создании мы использовали один материал и она состоит из плоских элементов, то правильное использование static batching в Unity сэкономит нам миллионы используемых тут полигонов.

Я не могу точно указать количество часов, потраченное на создание этого окружения, так как занимался им в свободное время после полного рабочего дня. Но, я думаю это более 200 часов в процессе работы от идеи до готового проекта окружения.

Есть много способов, чтобы нарисовать прямоугольник в Unity. В этом примере мы будем использовать GUI.DrawTexture , как наиболее простой путь к достижению цели. Мы нарисуем цветной прямоугольник установив GUI.color в желаемый цвет, а затем передавая белую 1x1 текстуру в GUI.DrawTexture :

Имейте в виду, что методы GUI, а также наш вспомогательный метод DrawScreenRect может быть вызван только в OnGUI() . Также убедитесь, что вы создаете белую текстуру только один раз из соображений производительности.

Теперь мы можем нарисовать на экране прямоугольник из любого компонента в OnGUI() :

Отобразим границы прямоугольника следующим методом:

Рисуем мышью прямоугольную область выбора

Область экрана в Unity бначинается в левом нижнем углу экрана. Это несовместимо с Rect-структурой, у которой начало в левом верхнем углу. Input.mousePosition находит положение курсора в игровом окне, а не на экране, поэтому мы должны быть внимательны при использовании позиции мыши, чтобы создать Rect. Зная это, легко создать Rect из 2 координат курсора мыши:

Мы можем написать простой скрипт, чтобы отобразить область выбора с помощью мыши:

Выбор юнитов в Unity

Для того, чтобы определить, какие объекты находятся в пределах окна выбора, мы должны привести выбираемые объекты и окно выбора в в одно и то же пространство.

Вашей первой мыслью была бы идея сделать проверку в мировом пространстве, но я лично предпочитаю делать в пост-проекции пространства, потому что в общем пространстве немного трудно конвертировать выбранную область, если ваша камера использует перспективную проекцию. В перспективной проекции форма выбранной области является усеченной. Вам нужно вычислить правильное значение проекционной матрицы, извлечь усеченную плоскость, а затем протестировать все 6 плоскостей.

Получение границы области просмотра для области выделения намного проще:

И тестирование, если объект игры в рамках тривиален:

Выделение выбранных единиц с помощью проекторов

Есть много различных способов, чтобы выделить юниты. В RTS играх (в т.ч. на Unity) чаще всего размещают небольшой круг под выбранными юнитами. Так и сделаем.

Для того, чтобы круги хорошо работали с наклонной местностью мы используем проекторы (а не просто нарисуем круговой спрайт). Проекторы можно проецировать на другие геометрические материалы, но для этого им необходим особый тип шейдеров. У Unity 5 в стандартных ассетах содержатся Project/Light и Project/Multiply шейдеры, но, к сожалению, ни один из них нам не подходит: добавить круг под выбранными юнитами в RTS игре. Мы должны написать свой собственный проектор шейдеров.

Потребуются 2 параметра: текстура (альфа маска), которая определяет, какие пиксели будут затронуты, и оттенок цвета, который будет определять цвет затрагиваемых пикселей:

Настройка состояния шейдеров для проекции, используя аддитивный блендинг:

Объединим альфа-маску и оттенок цвета, для определения окончательного цвета:

Используя этот шейдер, мы можем установить проектор так, как мы хотели. В следующем примере мы использовуем простую круговую альфа-маску для проецирования круга под юнитом. Обратите внимание на параметры импорта, которые используются для альфа-маски. Должны быть маркеры текстуры с типом света прожектора (это устанавливает режим обтекания для фиксации) и должна быть проверена альфа градаций серого.

Осталось еще несколько проблем, которые мы должны решить, но об этом ниже.

Игнорирование слоев

По умолчанию проекторы проецируются на все. Мы же хотим, чтобы проекторы игнорировали другие элементы, чтобы не получилось как на рисунке ниже. Это может быть достигнуто с помощью свойства проектора Ignore Layers (Игнорировать Слои).

Затухание

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

Пример проекта

Взгляните на проект RTS игры в Unity 5, который реализует все описанное в этом уроке. В нем также расширен компонент выбора юнита для предпросмотра выбранного юнита и снятие выделения с выбранных юнитов. Ссылки для скачивания приведены ниже:

Читайте также: