Эффекты в Unity3D. Часть I. Визуализация заклинания лечения

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

В серии этих статей я хотел бы уделить больше времени Unity3D, нежели Blender’у.

“Кого будем лечить” или габариты поверхности для эффекта

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

Создаем поверхность, на которой будут показываться эффекты в Unity 3D. Труба зовет!

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

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

Приступим к созданию трубы. Любой объект в Blender создается в позиции 3D курсора (красно-бело-черный прицел), так что давайте поместим 3D курсор в центр сцены (начало координат), для чего переместите курсор мыши поверх одного из 3D окон и нажмите сочетание клавиш Shift+C (или вы можете нажать комбинацию клавиш Shift+S, после чего в открывшемся меню выбрать “Cursor to Center”).

Горячие клавиши работают в том окне, поверх которого расположен курсор мыши.

Теперь создайте окружность, нажав сочетание клавиш Shift+A, которое открывает меню добавления “Add”, в котором выберите пункт меша “Mesh” и в его подменю выберите “Circle”.

Установите количество вершин окружности равным 32, а радиус равным 1. Количество вершин окружности определяет гладкость поверхности, по которой будет скользить ваше изображение.

Теперь из этой окружности необходимо создать трубу. Выберите окружность и нажмите клавишу ‘Tab’, чтобы перейти в режим редактирования меша. Далее выберите все вершины окружности, нажав клавишу ‘A’, затем нажмите клавишу ‘E’ и, удерживая клавишу Ctrl, переместите курсор мыши вверх, задавая высоту трубы. Подтвердите перемещение вершин, нажав Левую Кнопку Мыши.

Клавиша ‘E’ отвечает за выдавливание выбранных вершин/ребер/плоскостей меша. Клавиша ‘Ctrl’ позволяет перемещать объекты и их элементы с шагом сетки. Шаг сетки зависит от того, насколько близко вы смотрите на свою 3D модель.

Как видно на рисунке, нормали только что созданной трубы направлены внутрь. Нас это мало должно волновать, поскольку мы будем использовать двусторонний шейдер, но для чистоты эксперимента давайте вывернем их наружу. Выберите все вершины трубы (‘A’) или при помощи прямоугольного выделения (‘B’) и нажмите сочетание клавиш Ctrl+N, чтобы “флипнуть” нормали 3D модели.

На рисунке также можно заметить, что поверхность трубы какая-то неровная, как у граненого стакана. Чтобы сгладить поверхность стакана, выделите все его вершины и нажмите кнопку “Smooth” в разделе “Faces” вкладки “Shading” левого меню.

Создание uv развертки 3D модели трубы

Теперь необходимо создать uv развертку нашей трубы. Это совсем просто: выберите две вершины одного ребра трубы, зажав клавишу Alt и щелкните на одном из ребер Левой Кнопкой Мыши. Вы также можете выбрать Правой Кнопкой Мыши одну вершину, а затем добавить к ней еще одну вершину, если зажмете клавишу Shift и нажмете все ту же Правую Кнопку Мыши.

Теперь, чтобы пометить выбранное ребро в качестве шва, нажмите сочетание клавиш Ctrl+E, чтобы открыть меню ребер “Edge”, и выберите в нем пункт “Mark Seam”.

Теперь откройте в одном из окон 3D вида редактор развертки и изображений “UV/Image Editor” , для чего под одним из окон 3D ыида выберите самую крайнюю слева иконку с кубом и в открывшемся меню выберите вкладку UV/Image Editor, как показано на рисунке выше.

Теперь, выберите все вершины трубы и нажмите клавишу ‘U’, чтобы открыть меню UV-преобразования “UV Mapping”, в котором ваша задача – выбрать пункт “Unwrap”, чтобы спроецировать вершины, расположенные на поверхности 3D модели на UV плоскость, которую вы видите в окне редактора развертки и изображения. Более подробно про uv развертку и uv плоскость вы можете прочитать в статье От тайлинга и смещения до атласа текстур на примерах смены обложки для книги и текстуры одежды и кожи персонажа.

Теперь нам необходимо экспортировать uv развертку в отдельный файл, чтобы знать, как где именно расположить картинку, символизирующую эффект лечения. По умолчанию, без создания изображения для uv развертки, она будет экспортирована размером 1024 на 1024 пикселя. Размер изображение также определяет размер uv плоскости для использования на ней текстуры. Я считаю, что для такого эффекта нам хватит изображения в 512×512 пикселей (а то и меньше). Чтобы создать изображение, в данном случае, для экспорта uv развертки в заданном разрешении, нажмите кнопку “New” и задайте изображению имя и размер. После этого там же внизу выберите вкладку “UVs”, в меню которой выберите “Export UV Layout”, чтобы открыть окно экспорта развертки. Сохраните uv развертку, кликнув по кнопке “Export UV Layout” в правом верхнем углу экрана.

Экспорт 3D модели из Blender для Unity3D в формате FBX

Вот и все, поверхность, на которой могут быть и будут созданы эффекты в Unity3D готова. Осталось лишь экспортировать получившуюся трубу в Unity3D. Не забудьте про правильное направление локальных осей 3D модели при экспорте из Blender в Unity3Dв формате FBX, о чем рассказывается в статье Экспорт 3D моделей из Blender в игровые движки Unity3D и Unreal Engine и подготовка моделей к экспорту. Один из способов выравнивания осей 3D модели заключается в том, чтобы выбрать 3D модель в режиме объекта, повернуть его на 90 градусов вокруг оси x (клавиша ‘R’, затем на клавиатуре введите 90 и нажмите клавишу‘Enter’), затем применить вращение и масштабирования модели (Ctrl+A и выбрать “Rotation & Scale”), и затем вернуть 3D модель обратно в вертикальное положение (‘R’, затем введите -90). Минус 90.

Теперь выберите 3D модель Правой Кнопкой Мыши и выберите экспорт модели в формате FBX, в меню которого выберите “Mesh” и “Selected Objects”.

Получившийся файл в формате FBX, а также оригинальное и подготовленное для использования изображения вы можете скачать по ссылке redcross.zip (1200 downloads) .

Подготовка текстуры в графическом редакторе GIMP

Поскольку у меня лечение ассоциируется с красным крестом, то я отправляюсь искать именно его. Я использовал текстуру красного креста с прозрачным фоном.

Открываем экспортированную нами ранее uv развертку в любом графическом редакторе, поддерживающем работу с прозрачным фоном, например, GIMP или Adobe Photoshop. Теперь импортируем  новым слоем нашу скачанную текстуру красного креста.

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

Обратите внимание, что для равномерного вращения изображений крестов расстояние между ними (a) должно быть приблизительно одинаковым. Также, имейте ввиду, что правый край uv развертки  является продолжением левого.

Теперь осталось отключить все слои кроме слоя с красными крестами и экспортировать текстуру в формате, например, PNG или TIFF. Unity3D понимает нативный формат Photoshop’а.

Дорога на Unity

Импортируем fbx файл простым перетаскиванием его в одну из папок Assets в Unity3D. Чтобы эффект исцеления смотрелся не так уныло, я использовал ассет Unity3D Low Poly City Block.

Добавьте 3D модель трубы на сцену простым перетаскиванием в окно сцены или окно Инспектора. Теперь импортируйте созданную текстуру в Юнити и назначьте ее трубе. Текстуру можно назначить трубе, если просто перетащить ее на модель трубы, расположенную на сцене, либо переместив текстуру в слот “Albedo” в меню материала.

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

Настраиваем материал и текстуру в Unity

Чтобы избавиться от “черноты”, откройте меню материала и выберите в режиме рендеринга (Rendering Mode) прозрачный (Transparent) режим отображения вашей текстуры.

Либо вы можете выбрать режим “Cutout“ и настроить значение параметра “Alpha Cutoff” по своему вкусу. Одним из отличий “Cutout” режима рендеринга от “Transparent” заключается в том, что прозрачный фон последнего больше похож на стекло, чем на полностью прозрачный бэкграунд. Вы также можете выбрать другой шейдер, например,”Particles/VertexLit Blended”, “Nature/Tree Creator Leaves” и т.д.

Как видно на скриншоте, наш красный крест отбрасывает тень. Чтобы убрать отбрасывание тени крестом, выставьте значение “off” для Cast Shadows у компонента “Mesh Renderer”. Чтобы на крест также не падала тень, снимите флажок напротив параметра “Receive Shadows” все в том же “Mesh Renderer”.

Если вас смущает черный фон текстуры в окне ассетов или если ваша текстура с прозрачным фоном никак не хочет становиться прозрачной, выберите импортированную текстуру Левой Кнопкой Мыши и в настройках импорта текстуры в окне Инспектора поставьте флажок напротив пункта “Alpha is Transparent”, после чего подтвердите изменения, нажав кнопку “Apply”. Красота…

Вращаем текстуру

Теперь давайте анимируем эффекты в Unity 3D, т.е. займемся вращением красного креста. Как перемещать текстуру, было описано в статье “Создание водопада в Blender и анимирование воды посредством смещения текстуры и карты нормалей в Unity3D”. Поскольку, как было сказано выше, левый край uv развертки совпадает с ее правым краем, то зацикленное смещение текстуры по оси x приведет к вращению нашего крестика. Таким образом, чтобы использовать приведенный в упомянутой статье скрипт, необходимо поменять смещение по оси y на смещение по оси x, т.е. заменить  строку “rend.material.SetTextureOffset(«_MainTex», new Vector2(0, offset));” на строку  “rend.material.SetTextureOffset(«_MainTex», new Vector2(offset, 0));”, так что получится вот такой скрипт:

Создайте C# скрипт в окне ассетов и назовите его “RedCrossRotation ”, откройте его и замените в нем все на код приведенного выше скрипта.

Перетащите скрипт на трубу с красным крестом и запустите проект.

Отлично? А вот и нет. Да, все работает, все крутится, но эффект не отображается на внутренней               стороне трубы, т.е. текстура отображается лишь на наружной поверхности трубы, а на внутренней – нет. Связано это с направлениями нормалей и было описано в статье Артефакты при импорте 3D моделей в игровые движки из 3D редакторов на примере Unity и Blender’а, однако здесь это – не артефакт и не ошибка. В каких-то случаях отображение эффекта лишь на одной стороне поверхности очень даже полезна, но не в нашем случае. Что же делать?

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

Одним из примеров такого шейдера является шейдер, выложенный участником под ником brn из Тасмании на форуме Unity3d.

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

Также вы можете использовать один из бесплатных шейдеров, представленных в магазине ассетов на Unity3D Asset Store Double Sided Shaders, однако вам придется лезть в их код, поскольку в том виде, в котором они поставляются в магазине Unity, они “запрещают” смещение текстуры через скрипт.

Чтобы воспользоваться всеми благами данного шейдера, создайте в одной из папок окна ассетов стандартный шейдер поверхности (Standard Surface Shader) и скопируйте в него код первого из приведенных шейдеров. Все, теперь данный шейдер можно использовать для материала нашей модели трубы, символизирующей поверхность, по которой движется красный крестик. Да хоть зеленая стрелочка или желтый кружочек.

Теперь заменим стандартный шейдер нашим новым двусторонним шейдером с прозрачностью, для чего вменю материала жмем Левой Кнопкой Мыши на отображаемом пункте выпадающего меню шейдера “Shader “ (по умолчанию установлен “Standard”) и выбираем в выпадающем списке Transparent, в подпапке “Cutout” которого выбираем “Diffuse Double sided”.

Вуаля!

Если прозрачность не появилась, измените значение “Alpha cutoff”, переместив расположенный справа от него ползунок вправо, как вы это делали (если делали) у стандартного шейдера с выбранным режимом “Cutout”.

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

Автор: Максим Голдобин (Maxim Goldobin aka MANMANA)

goldmaxval@gmail.com