Эффекты в Unity3D. Часть IV. Материалы в Unity3D: прозрачность, свечение, эмиссия, цвет. Мигающая кнопка. Плавно исчезающий и появляющийся объект. Плавная смена материалов. Индикатор заряда батареи.

Данная часть серии статей, посвященной эффектам в Unity3D, посвящена эффектам, связанным с изменением параметров материала, включая параметры эмиссии, прозрачности,а также параметров текстур (основной Albedo и вторичной Albedo Detail x2) и координат текстуры в uv пространстве

Данная часть серии статей, посвященной эффектам в Unity3D, посвящена эффектам, связанным с изменением параметров материала, включая параметры эмиссии, прозрачности,а также параметров текстур (основной Albedo и вторичной Albedo Detail x2) и координат текстуры в uv пространстве.

Кнопка включения и выключения через изменение цвета эмиссии

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

Давайте посмотрим, зачем еще это может пригодиться.

Создадим, например, квад, и поместим на него текстуру кнопки с прозрачным фоном.

button_transparent

Теперь откроем меню материала и поместим в слот “Emission” сердцевину кнопки на черном фоне.

button_grey_blue

Если в слот Detail Albedo x2 добавить кнопку с серым фоном, то выглядеть она будет значительно лучше:

На риcунке показано назначение текстур в слоты материала “Albedo”, “Emission” и “Detail Albedo x2”.
На риcунке показано назначение текстур в слоты материала “Albedo”, “Emission” и “Detail Albedo x2”.

 

Создайте С# скрипт и назовите его “EmissionColor”. Откройте его и замените его внутренности на следующий код:

Повторяться не буду, остановлюсь лишь на том, что еще не было описано в предыдущих частях серии по эффектам:

emissionColor = new Color(0,0,0,1); — назначаем переменной emissionColor цвет. В данном случае Color(0,0,0,1) является одним из способов определения цвета, в частности, в RGB. Последний параметр является значением для альфа-канала и определяет прозрачность материала.

Color.black является еще одним способом определения цвета, в частности, черного.

if(emissionColor == Color.white) — в данном цикле проверяется, является ли текущий цвет белым и если да, то меняем его на черный “emissionColor = Color.black;”, в противном случае (если текущий цвет – черный) меняем его на белый “emissionColor = Color.white;”.

mat.SetColor(«_EmissionColor», emissionColor); — устанавливаем цвету эмиссии (_EmissionColor) значение emissionColor.

button-new-07sec

Изменяя прозрачность и цвет основной текстуры Albedo иDetail Albedo можно получить различные результаты.

На рисунке показаны варианты текстур кнопок на черном фоне и без него.
На рисунке показаны варианты текстур кнопок на черном фоне и без него.

buttons

Чтобы сделать плавную анимацию кнопки, можно использовать следующий C# скрипт ShowButton:

 

Здесь используется метод для смены цвета Color.Lerp (public static Color Lerp(Color aColor b, float t)), позволяющий линейно интерполировать значения между первым и вторым параметрами метода с шагом, задаваемым третьим параметром. Несколько ниже будет продемонстрирован схожий метод для материалов — Material.Lerp.

Результатом работы метода Mathf.PingPong (public static float PingPong(float t, float length);) являются значения между 0 и length. Данная функция возвращает остаток от деления значения t на length, поэтому при постоянном увеличении/уменьшении значения t наблюдается зацикленность выдаваемых результатов.

button

Теперь вы можете сделать свою кнопку “Сделать всё хорошо”! 🙂

 

Плавная смена материалов

changematerial

Создайте скрипт C# ChMaterails и замените все, что найдете внутри, на следующие строчки:

Скрипт взят с о страницы API скриптов, посвященной методу Material.Lerp. Как было сказано выше, метод Lerp выполняет линейную интерполяцию между двумя заданными величинами. В частности,  Material.Lerp () интерполирует свойства между двумя материалами (текстуры, карты нормалей, шейдеры  и т.д. не относятся к этим свойствам).

Поместите данный скрипт на ваш объект, после чего перетащите в слот “Material  1” скрипта  один из имеющихся у вас в проекте материалов (или создайте новый), а в слот “Material  2” – второй материал, отличающийся, например, цветом материала, цветом излучения и т.д.

На рисунке показан процесс добавления карты нормалей объекту, скрипта - объекту и материалов - в слоты скрипта. Change materials
На рисунке показан процесс добавления карты нормалей объекту, скрипта — объекту и материалов — в слоты скрипта.

Запустите проект.

planets.gif

 

Медленное исчезновение объекта

Для осуществления данного эффекта необходимо, чтобы материалы был назначен необходим шейдер, поддерживающий прозрачность. Для стандартного шейдера в Unity5 для этого достаточно выставить режим рендеринга в Transparent вместо Opaque. В зависимости от того, выбрать  Fade/Cutout или Transparent вы получите разный результат. Если хотите, чтобы у материала оставались его свойства, назначенные в меню материала, то используйте Transp, если хотите сделать полностью прозоачным, то Fade или Cutout.

Создайте C# скрипт ChangeTransparency следующего содержания

и повесьте его на свой 3D объект, находящийся на сцене.

На рисунке показан процесс назначения скрипта игровому объекту на сцене в Unity3D и отмечен режим рендеринга (Rendering mode), поддерживающий прозрачность "Transparent"
На рисунке показан процесс назначения скрипта игровому объекту на сцене в Unity3D и отмечен режим рендеринга (Rendering mode), поддерживающий прозрачность «Transparent»

Запустите проект.

transparancy

 

 

Как установить цвет и прозрачность материалу

 

Данный скрипт позволяет задать цвет материалу объекта в RGB.

Последнее значение в Color(255,0,0,0.5) определяет прозрачность материала между 0 (полностью прозрачный) и 1 (ни разу не прозрачный).

На рисунке показан пример смены цвета и прозрачности материала в заданную в скрипте величину. Halftransparent material in Unity3D
На рисунке показан пример смены цвета и прозрачности материала в заданную в скрипте величину.

Обратите внимание, что режим рендера материала (Render mode)  выставлен в “Fade”.

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

Color setColor = Color.white; — установка белого цвета для материала (назначение Color.white в качестве значения для переменной setColor типа Color), а public делает возможным изменение значения setColor в Инспекторе посредством нативного ColorPicker’а;

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

На рисунке показан пример смены цвета у материала путем изменения его параметров (в частности, цвета Albedo) с созданием нового экземпляра материала при нажатии клавиши Пробел.
На рисунке показан пример смены цвета у материала путем изменения его параметров (в частности, цвета Albedo) с созданием нового экземпляра материала при нажатии клавиши Пробел.

Вообще, при любом изменении параметров материалов через Renderer.material создается новый инстанс материала. Это и плохо и хорошо одновременно: большое количество инстансов может нагрузить систему, зато у каждого объекта может быть материал со своими свойствами. Так вы можете создать много зеленых человечков с одним материалом на всех (только у меня при словосочетании “один на всех” возникают ассоциации с 40к обезьянами и одним бананом?), а потом программно изменить свойства для каждого отдельно взятого пришельца, который, если его стукнуть, станет фиолетовым, с попутным созданием экземпляра материала для уже фиолетового пришельца.

Если же вы не хотите создавать копию материала, то следует воспользоваться Renderer.sharedMaterial вместо Renderer.material.

 

Индикатор батареи

Чтобы создать индикатор батареи воспользуемся смещением текстуры, описанным в статье Эффекты в Unity3D. Часть III. Билборды (биллборды), бегущая строка, неоновая реклама, информационные щиты, реклама, рекламные щиты, баннеры и  Эффекты в Unity3D. Часть I. Визуализация заклинания лечения. Но в данном случае перемещать будем не основную текстуру, а вторичную (Detail Albedo x2).

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

Вот так выглядит 3D модель батарейки с uv разверткой в Blender.

На рисунке показана 3D модель батарейки в Blender’е. battery blender
На рисунке показана 3D модель батарейки в Blender’е.

На изображении выше часть модели, соответствующая положению индикатора заряда батареи вынесена отдельно на uv развертке. Это связано с особенностью применения вторичной текстуры Detail Albedo. Светлые тона на вторичной текстуре подчеркивают основную текстуру, темные – маскируют. Так, области, окрашенные черным цветом на вторичной текстуре, будут полностью перекрывать соответствующие белые области на основной текстуре.

В соответствии с этим были подготовлены две текстуры.

На рисунке показаны текстуры для Albedo (слева) и для Detail Albedo (справа) с наложенной Uv разверткой.
На рисунке показаны текстуры для Albedo (слева) и для Detail Albedo (справа) с наложенной Uv разверткой.

Поскольку мы будем двигать Detail Albedo, то именно поэтому часть модели и была вынесена отдельно, так чтобы при ее перемещении она не залезала бы на другие острова uv развертки.

На рисунке показана 3D модель батарейки в Unity3D и процесс назначения основной и вторичной текстур. battery charge level unity3d
На рисунке показана 3D модель батарейки в Unity3D и процесс назначения основной и вторичной текстур.

 

Скрипт C Sharp:

 

offset — значение смещения вторичной текстуры;

0.078f — величина, на которую смещается вторичная текстура каждый цикл Update(). Вычисляется, как показано на рсиунке выше, либо подбирается эмпирическим путем (экспериментально).

battery-charge

 

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

goldmaxval@gmail.com

1 Comment

  1. Gygy says: Ответить

    Ооооо-оооо-ооо, батарейка!
    Спасибо, оказывается можно лерпить и материалы
    Отличные разъяснения по работе со второй текстурой. Так держать

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