Эффекты в Unity3D. Часть II. Вращающийся рисунок на земле, скорость которого задается слайдером  в редакторе Unity3D, и стробоскоп.

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

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

Для того чтобы создать рисунок на земле, нам понадобится поверхность, на которой мы будем ее отображать. В качестве поверхности можно использовать четырехугольник из примитивов (еще называемый квадом, от английского quad) либо квадрат или круг, созданный в Blender’е.

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

Если вы выбрали создание круга в Blender’е (что рекомендуется), то откройте Blender и, для начала, поместите 3D курсор в центр сцены (Shift+C). Затем нажмите сочетание клавиш Shift+A и в меню Add выберите подменю Mesh, в котором выберите Circle, чтобы создать окружность.

По умолчанию создается с радиусом в 1 юнит (по умолчанию равный юниту в Unity3D и равный 1 метру) и имеет 32 вершины. Для наших целей данные параметры подходят, как нельзя кстати. Параметры созданной окружности доступны в меню, расположенном в левой части окна 3D вида. Если вы не видите данного окна, нажмите клавишу ‘T’. Параметры созданного объекта (на самом деле параметры последнего действия над объектами и не только) можно изменить только сразу после его создания, поскольку если вы перейдете в режим редактирования меша (‘Tab’), создадите новый объект, удалите его или совершите еще какое-либо значимое действие (сохранение, рассматривание объектов со всех сторон, приближение его во вьюпорте и т.д. не являются значимыми действиями по мнению Blender: ) ), то вы не сможете изменять его параметры. В новых версиях обещают добавить такой функционал. Также параметры значимых действий вы можете изменить в окне, открывающемся по нажатию клавиши ‘F6’.

На рисунке показано меню создания окружности в Blender’е, а также меню параметров последней операции в Blender.
На рисунке показано меню создания окружности в Blender’е, а также меню параметров последней операции.

После того как вы согдадите окружность нужного радиуса и с требуемым количеством вершин, выберите окружность Правой Клавишей Мыши и нажмите клавишу ‘TAB’, чтобы перейти в режим редактирования меша выбранного активного объекта. Переключите режим  выбора меша на вершины “Vertex” в меню выбора режима меша “Mesh SelectMode, нажав сочетание клавиш Alt+TAB. Теперь выберите все вершины окружности (клавиша ‘A’) и нажмите клавишу ‘ E’ и затем клавишу ‘Esc’ .

Клавиша ‘E’ запускает инструмент выдавливания выбранных вершин (режим экструдирования), а клавиша ‘Esc’ позволяет отменить перемещение выдавленных вершин, оставив их на месте вершин оригиналов. Выдавливание/экструдирование представляет собой создание копий выбранных вершин с сохранений связей между ними в виде ребер и плоскостей/поверхностей.

На рисунке показано меню выбора режима редактирования меша (режимом редактирования вершин “Vertex”, режимом редактирование ребер “Edge” и режимом редактирования поверхностей/плоскостей/полигонов – “Face “) и меню объединения вершин (слияния вершин, спаивания вершин, соединения вершин) в Blender.
На рисунке показано меню выбора режима редактирования меша (режимом редактирования вершин “Vertex”, режимом редактирование ребер “Edge” и режимом редактирования поверхностей/плоскостей/полигонов – “Face “) и меню объединения вершин (слияния вершин, спаивания вершин, соединения вершин).

Теперь не снимая выделения с выдавленных вершин нажмите сочетание клавиш Alt+M и в открывшемся меню слияния вершин выберите “At Center”, чтобы “спаять” выбранные вершины в их геометрическом центре.

Тем, кто уже сталкивался при работе с 3D моделями, особенно в Blender’е, должно быть понятно из рисунке выше, что нормали получившегося 3D объекта смотрят вниз – в направлении оси минус z (это можно заметить, если посмотреть на цвет полигонов – в Блендере ). Следовательно, либо нам нужно будет развернуть круг в Unity3D, что может приводить к ошибкам при работе с игровыми объектами в локальной системе координат, либо вывернуть нормали в Blender’е. Чтобы вывернуть нормали 3D объекта, выебрите все его вершины (клавиша ‘A’, чтобы выделать все, либо клавиша ‘B’ или ‘C’, чтобы активировать режим прямоугольного выделения и выделения окружностью, соответственно) и нажмите сочетание клавиш Ctrl+Shift+N (или Ctrl+ N, в зависимости от направления нормалей).

Более подробно про нормали и связанные с их направлением артефактами в игровых движках, вы можете почитать в статье  Артефакты при импорте 3D моделей в игровые движки из 3D редакторов на примере Unity и Blender’а.

Теперь необходимо создать uv развертку для нашего круга, поскольку Unity3D не умеет работать с 3D моделями без развертки. В предыдущих статьях уже не раз было описано, как открыть меню редактора развертки и изображения, так что приведу рисунок из статьи про создание персонажа в редакторе персонажей MakeHuman и использование его в Unity3D, в которой также описывается запекание карты нормалей с высокополигональной (highpoly) 3D модели на низкополигональную (lowpoly).

На рисунке показан процесс открытия редактора UV/Изображения (UV/Image Editor) в Blender.
На рисунке показан процесс открытия редактора UV/Изображения.

Чтобы создать uv развертку для 3D объекта в Блендере, выберите его в одном из окно 3D вида Правой Кнопкой Мыши и нажмите клавишу ‘U’.

На рисунке показана созданная uv развертка для круга и меню созданию uv развертки/uv mapping (справа внизу) в Blender
На рисунке показана созданная uv развертка для круга и меню созданию uv развертки/uv mapping (справа внизу).

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

На рисунке показано меню создания изображения для uv развертки и текстурных карт в 3D Blender.
На рисунке показано меню создания изображения для uv развертки и текстурных карт в Блендере.

Для того, чтобы 3D модель правильно отображалась на сцене в Unity, необходимо подготовить ее в Blender перед тем, как экспортировать. Подготовка 3D модели для экспорта в каждый из движков схожа, но имеет свои нюансы. Например, как правильно экспортировать 3D модель в Unity3D описано в статье Экспорт 3D моделей из Blender в игровые движки Unity3D и Unreal Engine и подготовка моделей к экспорту. Здесь же упомянем лишь про правильное выставление локальных осей для экспортируемой 3D модели. Поскольку изменение осей в меню экспорта в Blender никак не отражается на ориентации 3D модели после ее импорта в Unity3D, давайте руками выставим направление локальных осей 3D модели, покрутив ее на сцене и сбросив параметры поворота после такого поворота. Поверните 3D модель “лицом” в направлении оси минус игрек (-y). Верх 3D модели должен смотреть в направлении оси +z. Теперь поверните 3D модель в окне 3D вида слева против часовой стрелки вокруг ее Origin (либо через горячие клавиши ‘R’ -> ‘90’ -> ‘Enter’), подтвердите вращение Левой Кнопкой Мыши и нажмите сочетание клавиш Ctrl+A и в открывшемся меню “Apply” выберите пункт “Rotation &Scale” (хотя, если мы говорим только про поворот, то достаточно будет выбрать пункт “Rotation”). Теперь вы можете экспортировать модель: 3D модель будет ориентирована в Unity3D так, как после того, как вы повернули ее лицом в направлении оси –y. Для удобства работы с 3D моделью, вы можете повернуть ее обратно в вертикальное положение (лицо – минус игрек, верх — z), это никак не скажется на импорте: вы уже зафиксировали локальные оси для экспорта 3D модели.

Чтобы экспортировать круг, выберите его в режиме объекта Правой Кнопкой Мыши и в главном меню откройте вкладку “File”, в меню которой выберите “Export” и затем FBX (.fbx). Теперь в настройках слева оставьте нажатыми лишь кнопку “Mesh”, а “Empty”, “Camera”, “Lamp”, “Armature” и “Other” отожмите, чтобы экспортировать лишь меш. Затем отметьте флагом опцию “Selected Objects”, чтобы экспортировать лишь выбранную на сцене 3D модель. После того, как вы зададите имя файла для экспорта, выберите кнопку “Export FBX” в правом верхнем углу окна экспорта Blender.

Здесь я выложил изображения ,которые я использовал при написании статьи, а также 3D модель получившегося круга, которую вы можете скачать в формате Blender и FBX. (1129 downloads)

Импортируйте 3D модель круга в Unity 3D путем простого перетаскивания модели из окна ОС Windows в окно ассетов Assets в Unity3D.

Добавьте импортированную 3D модель на сцену, перетащив ее из окна ассетов в окно Иерархии или на сцену.

Скачайте желаемую текстуру (которую хотите “закрутить”). Я использовал текстуру изображения Инь-Янь в классическом представлении и стилизованное драконами (с рыбами тоже красиво смотрится) на прозрачном фоне (прозрачный фон важен, если вы используете нативную плоскость или четырехугольник Unity).

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

Добавьте текстуру кругу, например, перетащив ее на модель круга, добавленного на сцене, либо в слот Albedo в меню материала, как показано на рисунке ниже. Также, как добавить текстуру и другие основы работы в Unity3D более подробно разобраны в предыдущей статье данной серии и других статьях на данном сайте, например, в статье Создание 3D модели с оптимизированной uv разверткой. Из Blender в Unity3D или От тайлинга и смещения до атласа текстур на примерах смены обложки для книги и текстуры одежды и кожи персонажа и других. Я, конечно, стараюсь наиболее подробно расписывать каждое свое действие в каждой статье, но рассчитываю, что после прочтения пары-тройки статей на данном сайте, вы уже изучили основы Unity 3D и Blender : ).

Если в начале статьи в качестве поверхности для визуализации вращающейся текстуры вы выбрали стандартную плоскость или четырехугольник-квад в Юнити, или импортированного квадратного полигона из Блендера (на самом деле, превращаемого видеокартой в два треугольника), то вам необходимо выбрать либо прозрачный шейдер (описываемый в предыдущей части серии статей про эффекты, посвященной созданию эффекта исцеления персонажа), либо у стандартного шейдера выставить режим рендеринга  в “Cutout”, “Transparent”  или “Fade”. Также вы можете выбрать другой шейдер с поддержкой прозрачности, например, ”Particles/VertexLit Blended”, “Nature/Tree Creator Leaves” и т.д. Более подробно о способах рендеринга можно почитать в руководстве пользователя на сайте Unity3D.

В противном случае, если в начале статьи вы выбрали создание круга в Blender, то вам подойдет стандартный шейдер Standard со способом рендеринга Opaque, если размеры текстуры совпадают с размерами uv развертки круга на uv плоскости. Если размеры текстуры и размеры развертки не совпадают, то вы можете подогнать размер текстуры под uv развертку, экспортировав ее из файла в формате Blender’а, который прилагается к данной статье, либо использовать режим рендеринга с поддержкой прозрачности.

На рисунке показан процесс добавления импортированной 3D модели на сцену, а также процесс назначения текстуры и скрипта игровому объекту, в данном случае нативной плоскости Unity. Также для плоскости на рисунке выделен способ рендеринга Fade. Unity3D
На рисунке показан процесс добавления импортированной 3D модели на сцену, а также процесс назначения текстуры и скрипта игровому объекту, в данном случае нативной плоскости Unity. Также для плоскости на рисунке выделен способ рендеринга Fade.

Создайте скрипт и назовите его, например, YingYangRotation, откройте его двойным щелчком Левой Кнопки Мыши на нем и допишите в метод Update между фигурными стрелками, открывающими и закрывающими тело метода, строку:

transform.Rotate(Vector3.up * 400F * Time.deltaTime);

Перетащите скрипт на подложку с текстурой и запустите проект. Картинка вращается!

Конечно, включать константы, типа “400F” в параметры функции не совсем верно (или, лучше сказать, совсем не верно : ) ), так что лучше вынести ее из параметров метода Rotate и сделать переменной, чтобы мы могли изменять ее значение в редакторе, а не подбирать ее значения каждый раз путем изменения ее величины в скрипте.

 

 

public float rotationSpeed = 400F; — объявляем публичную переменную rotationSpeed типа float (простой тип, используемый для хранения 32-разрядных значений с плавающей запятой) и присваиваем ей значение, равное 400, причем уточняя, что значение – именно float путем добавления в конец значения литеры F.

transform.Rotate(Vector3.up * rotationSpeed * Time.deltaTime); — метод, параметр данного метода складывается из перемножения трех значений:

Vector3.up – сокращение для Vector3(0, 1, 0), единичного вектора, направленного по оси y, т.е. вверх в Unity;

rotationSpeed – значение переменной rotationSpeed;

Time.deltaTime  – время в секундах, потребовавшееся для отрисовки последнего кадра. Используется для того, чтобы игра не зависела от частоты кадров.

Сохраняем скрипт.

На рисунке показано поле отображения значения публичной переменной, отображающееся в редакторе Unity.
На рисунке показано поле отображения значения публичной переменной, отображающееся в редакторе Unity.

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

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

Осталось лишь сделать наш эффект (плоскость, круг и т.д.) дочерним для нашего зомби и эффект будет следовать за ним. Наследственность можно установить путем перетаскивания кругу/плоскости/квада на 3D модель персонажа в окне Иерархии в редакторе Unity. Также определить связь между родительским и дочерним объектами можно, например, при помощи Transform.SetParent или Transform.parent, из скрипта, назначенного 3D модели либо из скрипта, из которого вызывается заклинание, либо любого другого скрипта.

Эффект вращающегося рисунка на земле под персонажем

Такая техника отображения вращающихся текстур отлично подходит для плоских поверхностей, поскольку часть плоскости или вся плоскость перестанет быть видимой, как только она будет перекрыта объектами, расположенными ближе к камере.

Одним из способов решения данной проблемы является использование специфичных шейдеров, так, например, если доработать шейдер, предоставленный Kaanin25 на answers.unity3d.com, который в том виде, в котором он приведен на сайте позволяет отображать объект поверх всех объектов, то вполне можно добиться желаемого эффекта.

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

 

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

А мы тем временем продолжим забавляться с вращающейся плоскостью.

СТРОБОСКОП

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

Процесс создания такого круга ничем не отличается от описанного выше способа, за тем исключением что сразу после создания окружности, необходимо изменить количество вершин окружности со стандартных 32 на 64. Сделать это можно через панель, расположенную в левой части окна 3D вида и открывающуюся по нажатию клавиши ‘T’, либо в меню изменения параметров последней операции/преобразования, которое открывается по нажатию клавиши F6.

На рисунке показана созданная в Blender окружность, состоящая из 64 вершин.
На рисунке показана созданная окружность, состоящая из 64 вершин.

После того ,как вы создадите круг, через выдавливание/экстридурирование вершин окружности и слияния их в ее центре, смените режим выбора элементов меша на режим выбора Поверхностей (плоскостей, полигонов), для чего нажмите сочетание клавиш Alt+TAB и в открывшемся м еню выберите “Faces”.

На рисунке показано меню выбора режима редактирования меша в Blender.
На рисунке показано меню выбора режима редактирования меша.

Теперь при помощи Правой Кнопки Мыши и клавиши Shift выберите полигоны (треугольники) круга через один, как показано на рисунке ниже и нажмите клавишу Ctrl+N или Ctrl+N, чтобы вывернуть нормали только выбранных полигонов (являющимися по совместительству секторами круга).

На рисунке показан круг, нормали части полигонов которого вывернуты наизнанку. Blender 3D.
На рисунке показан круг, нормали части полигонов которого вывернуты наизнанку.

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

 

Скачать 3D модель флипнутой плоскости с использованными в статье текстурами. round_flipped.zip (1148 downloads)

 

Импортируйте 3D модель в Unity и добавьте ее на сцену.

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

На рисунке показана созданная в Blender’е 3D и импортированная в Unity 3D модель круга, нормали секторов которой вывернуты через один.
На рисунке показана созданная в Blender’е 3D и импортированная в Unity 3D модель круга, нормали секторов которой вывернуты через один.

Добавляем кругу использованный выше скрипт вращения и наслаждаемся результатом!

На рисунке показан стробоскопический эффект при вращении круга с текстурой Инь-Янь. Особенно он заметен у круга, на котором стоит зомби. Скорость вращения равна 679.

На рисунке показан стробоскопический эффект при вращении круга с текстурой Инь-Янь. Особенно он заметен у круга, на котором стоит зомби. Скорость вращения равна 679.

Если подобрать скорость сращения окружности, то можно добиться стробоскопического эффекта. Вы, наверное, замечали “неподвижные” или вращающиеся “в обратную сторону” колеса у едущего рядом мотоцикла: колеса не вращаются, как будто спицы колеса замерли на месте? Это и есть стробоскопический эффект.

Давайте теперь, чтобы было проще подобрать частоту вращения, добавим слайдер к нашей публичной переменной rotationSpeed.

Для этого добавьте в скрипте вращения объекта строчку “[Range(-1000F, 1000F)]” сразу перед строчкой “ public float rotationSpeed = 400F; ”, чтобы получился следующий скрипт:

 

На рисунке показан слайдер, созданный при помощи скрипта для публичной переменной, в редакторе Unity.
На рисунке показан слайдер, созданный при помощи скрипта для публичной переменной, в редакторе Unity.

Чтобы стробоскопический эффект был лучше виден, возьмите однотонную текстуру, например, синюю размером 512 на 512 пикселей, и поместите ее в слот текстуры Albedo в меню материала в Unity3D в окне Инспектора.

 

Здесь я выложил изображения ,которые я использовал при написании статьи, а также 3D модель получившегося круга, которую вы можете скачать в формате Blender и FBX. (1129 downloads)

 

Скачать 3D модель флипнутой плоскости с использованными в статье текстурами. round_flipped.zip (1148 downloads)

 

Автор: Максим Голдобин

goldmaxval@gmail.com

Добавить комментарий