Уроки Unreal Engine

Unreal Engine 4: использование материалов

Из этой части самоучителя Unreal Engine 4 вы узнаете, как изменять в редакторе текстуру материалов, создавать новые материалы и научитесь их обновлять в готовой игре.

Также, как и в реальном мире, в любой игре есть множество объектов — каждый со своим внешним видом и свойствами. В Unreal Engine они определяются материалами – цвет объектов, блеск или матовость, прозрачность и т.п.

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

В этом уроке вы научитесь:

  • Манипулировать текстурами, чтобы менять их яркость и цвет;
  • Использовать различные материалы для быстрого создания объектов;
  • Использовать динамические виды материалов, чтобы менять цвет аватарки, когда персонаж собирает определённый тип предметов.

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

Это занятие является частью серии, которая состоит из 10 уроков, посвященных Unreal Engine:

Введение

Скачайте стартовый проект, разархивируйте и откройте его с помощью программы. Для этого перейдите в папку проекта и найдите файл BananaCollector.uproject.

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

Вы можете выбрать из двух возможных вариантов в этой ситуации – открыть копию или преобразовать ее для продолжения работы.

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

Чтобы изменить яркость цвета банана вам необходимо перейти в папку «Materials» и дважды кликните мышью п файлу M_Banana, чтобы открыть его в редакторе материалов.

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

Изменение структуры объекта

По своей сути, текстура — это изображение, а изображение — это набор пикселей. В цветном изображении цвет пикселя определяется его красным (R), зеленым (G) и синим (B) каналами.

Ниже приведен пример изображения размером 2 × 2 пикселя с помеченными значениями «RGB»:

Примечание: диапазон каналов RGB в Unreal Engine составляет от 0,0 до 1,0 единиц. Однако в большинстве других программ этот же диапазон составляет уже от 0 до 255 единиц. По сути, это просто разные способы отображения одной и той же графической информации, однако это не означает, что цветовой диапазон Unreal Engine меньше, а качество структур хуже.

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

Ниже приведен пример фиксации каждого канала в диапазоне от 0,4 до 1,0. Таким образом минимальное значение каждого канала становится выше, что делает каждый пиксель текстуры светлее.

Посмотрите, как это выглядит в редакторе, поставьте такие же настройки и у себя:

Узел умножения (Multiply)

Узел Multiply он умножает один вход на другой, что это значит: используя умножение вы можете изменить яркость пикселя, не влияя на его оттенок или насыщенность цвета. Ниже приведен пример уменьшения яркости вдвое путем умножения каждого канала на 0,5:

Проделав эту манипуляцию для каждого пикселя, вы можете изменить яркость всей текстуры объекта:

В этот раз мы не будем затрагивать эту тему, однако вам следует знать, что вы также можете использовать узел Multiply в сочетании с текстурой маски. Используя маску, вы можете указать, какие области базовой текстуры должны быть темнее или светлее. Посмотрите, это пример использования текстуры плитки в сочетании с текстурой камня:

В этом случае применение эффекта маски сработало, потому что шкала серого представляет диапазон от 0 (черный) до 1 (белый):

Белая область изображения имеет максимальную яркость, потому что каналы умножены на 1. Серые области этого изображения темнее, потому что каналы умножены на значения меньше 1. Черные области соответственно не имеют яркости, потому что каналы изображения умножены на 0.

Настройка яркости текстуры

Для продолжения вам необходимо разорвать связь между узлом образца текстуры и выводом базового цвета. Вы можете сделать это, щелкнув правой кнопкой мыши по любому контакту и выбрать команду «Break Link». Кроме того, вы также можете удерживая клавишу Alt щелкнуть левой кнопкой мыши на контакте (белая лини между узлами).

Теперь создайте два новых узла — Multiply и Constant. Вы можете сделать это быстро, удерживая клавишу M (для создания узла Multiply) или клавишу 1 (для создания узла Constant), а затем щелкните мышью по пустой области и свяжите эти узлы следующим образом:

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

В данный момент ваша текстура черного цвета, потому что множитель установлен в нулевое положение (умножение на ноль, как вы знаете, дает ноль). Чтобы изменить значение множителя, вам нужно выбрать узел «Constant» и перейдите на панель «Details». Установите значение = 5.

Нажмите кнопку «Apply» и вернитесь в главный редактор. Посмотрите, бананы стали намного светлее:

Что такое Material Instances (экземпляр материала)

Material Instances — это небольшая копия этого же материала. Любые изменения, сделанные в базовом материале, также происходят в его экземпляре.

Такие экземпляры хороши тем, что вы можете вносить в них изменения без перекомпиляции. Обратите внимание, когда вы нажали «Apply» в редакторе, появилось уведомление о том, что шейдеры компилируются:

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

Работа с экземплярами подходит для того, чтобы:

  • Вносить изменения в структуру сложного материала;
  • Создания различных вариаций базового материала. Это может быть что угодно, например, изменение цвета, яркости или даже самой текстуры.

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

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

Настройка параметров материала

Сейчас вам нужно вернуться в редактор материалов и убедиться, что у вас для работы выбран материал M_Banana. Теперь необходимо добавить узел HueShift для того чтобы иметь возможность изменять цвет текстуры. Соедините новый узел следующим образом:

Далее вам необходимо создать еще один узел Scalar Parameter. Он будет содержать всего одно значение, которое можно редактировать в экземпляре данного материала (M_BAnana). Для быстрого создания узла удерживайте клавишу S и щелкните мышью на любом пустом пространстве рабочей области. После создания подключите новый узел к выходу Hue Shift Percentage (S) на узле HueShift.

Теперь нужно обозначить новые параметры, выбрав узел «Scalar Parameter» и перейдя на панель «Details». Измените имя параметра на HueShiftPercentage.

Кроме того, вы также можете преобразовать константы в скалярные параметры. Для этого щелкните правой кнопкой мыши узел «Constant», который вы добавили ранее, и выберите команду «Convert to Parameter», после чего введите новое название «Brightness».

Теперь нажмите кнопку Apply и закройте редактор материалов.

Создание Material Instances

Вам нужно перейти в Content Browser и найти папку «Materials», в которой находится материал M_Banana. Щелкните по материалу правой кнопкой мыши и выберите команду «Create Material Instance». Назовите новый объект MI_Banana_Green.

Дважды щелкните MI_Banana_Green, чтобы открыть файл в редакторе Material Instances.

Этот редактор состоит из трех рабочих панелей:

  1. Details: здесь будут отображаться параметры и другие общие настройки.
  2. Instance Parents: тут находится список исходных материалов текущего экземпляра. Сейчас этим материалом является
  3. M_Banana: это окно предварительного просмотра, в котором будет отображаться ваш Material Instances.

Чтобы увидеть изменения которые произошли с вашим материалом, вам нужно перейти на панель «Details» и найти раздел «Previewing». Щелкните левой кнопкой мыши раскрывающийся список рядом с Preview Mesh и выберите SM_Banana. Теперь вместо сферы вы увидите банан.

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

Установите параметр яркость на 0,5 и параметры HueShiftPercentage на 0,2. У вас должен получится приблизительно такой цвет:

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

Использование Material Instances

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

Выберите любой банан и перейдите на панель «Details». В списке найдите компонент StaticMesh.

Данные панели «Details» обновятся со свойствами компонента StaticMesh. Измените материал на MI_Banana_Green.

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

Динамически меняющийся материал

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

Перед созданием Material Instances вам необходимо настроить материал куба. Для этого перейдите в папку Materials и откройте файл M_Cube. Вам необходимо создать способ создавать и менять цвета. Посмотрите на узел Constant3Vector, подключенный к базовому цвету. Он идеально подходят для выбора цветов, потому что они имеет красный, зеленый и синий каналы.

Красный цвет уже создан, поэтому вам необходимо создать белый цвет. Добавьте еще один узел Constant3Vector, это можно сделать, удерживая клавишу «3» и щелкнув левой кнопкой мыши пустое место рабочей области.

Откройте палитру цветов, дважды щелкнув мышью по Constant3Vector:

Найдите белый цвет, используя ползунки или введя значение 1,0 в каналы R, G и B. После этого нажмите кнопку ОК.

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

Что такое линейная интерполяция?

Линейная интерполяция — это способ найти значения между A и B. Например, вы можете использовать линейную интерполяцию, чтобы найти значение, которое находится на половине отрезка между значениями 100 и 200.

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

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

Использование узла LinearInterpolate

Добавьте новый узел LinearInterpolate, для этого также можно использовать клавишу «L» и мышку.

Затем создайте параметр узла Scalar Parameter и назовите его ColorAlpha. Подключите ваши узлы как показано на изображении (обратите внимание, где теперь находится белый цвет):

 

Примечание: узел LinearInterpolate будет выводить значение входа A, потому что начальное значение альфа равно 0. Когда альфа приближается к 1, выход приблизится к значению входа B.

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

Чтобы куб мог менять цвета, необходимо отредактировать параметр ColorAlpha.

Динамичное изменение цвета Material Instances

Динамичный Material Instances возможно редактировать прямо во время воспроизведения игровой сцены. Для этого вы можете использовать Blueprints или C++.

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

Кроме того, каждый Material Instances можно редактировать по отдельности, используя индивидуальные настройки.

Посмотрите, как это выглядит на практике:

Создание Material Instances

Находясь в Content Browser перейдите в папку «Чертежи» и дважды щелкните BP_Player, чтобы открыть ее.

Убедитесь, что вы находитесь в разделе Event Graph и найдите узел Event BeginPlay.

Добавьте узел Create Dynamic Material Instance (StaticMesh). Он будет одновременно создавать и применять новый Material Instances материала к объекту.

Теперь вам нужно указать, какой материал должен использовать куб. Щелкните раскрывающийся список под пунктом «Source Material» и выберите «M_Cube».

Чтобы потом было легче использовать материал, мы рекомендуем хранить его в переменной. Самый простой способ сделать это — щелкнуть правой кнопкой мыши на значке «Return Value» в узле «Create Dynamic Material Instance» и выбрать пункт Promote to Variable.

Если вы обратите внимание на вкладку My Blueprint, то увидите, что там появилась новая переменная. Переименуйте ее в CubeMaterial нажав клавишу F2.

Теперь соедините узел Event BeginPlay с узлом Create Dynamic Material Instance.

Примечание: при создании BP_Player, в программе автоматически создается dynamic material и применяется к компоненту StaticMesh. Затем Unreal сохраняет материал в качестве переменной с именем CubeMaterial.

Создание счетчика бананов

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

Узел On Component Begin Overlap будет выполняться, когда куб пересечет другой объект. Затем узел Cast to BP_Banana проверит, является ли этот объект бананом, если да, то узел DestroyActor уничтожит его, поэтому он исчезнет из локации.

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

Создайте новую переменную Float, назовите ее BananaCounter и выберете пункт Get, наведя мышь на переменную:

Теперь, чтобы увеличить значение на единицу, добавьте еще один узел IncrementFloat и подключите к нему BananaCounter:

Затем вам нужно подключить узел DestroyActor к IncrementFloat:

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

Если бы вы сейчас использовали BananaCounter в качестве альфы, то получили бы неоднозначный результат. Дело в том, что узел LinearInterpolation имеет значение в диапазоне от 0 до 1, и вы можете использовать нормализацию для преобразования счетчика в диапазоне только от 0 до 1.

Чтобы ввести нормализацию, разделите BananaCounter на максимальное значение. Это значение — сколько бананов нужно собрать игроку, прежде чем куб станет полностью красным. Добавьте узел float/float и соедините его верхний контакт с оставшимся контактом узла IncrementFloat:

 

Установите нижний вход узла float/float на 6. Это означает, что куб будет полностью красным, когда игрок соберет 6 бананов.

Однако, если более 6 бананов, альфа будет иметь значение больше 1. Чтобы исправить это, вам нужно использовать узел Clamp (float), чтобы альфа сохраняла значение в от 0 до 1. Добавьте узел Clamp (float) и соедините Value с узлом float/float.

Обновление материала

Перетащите переменную CubeMaterial в поле Event Graph и нажмите «Get». После этого вам нужно вывести список узлов, которые могут использовать переменные типа CubeMaterial. Добавьте узел «Set Scalar Parameter Value», чтобы установить нужный параметр в указанное значение.

Теперь необходимо указать, какой параметр будет обновляться. Впишите в поле «Parameter Name» значение ColorAlpha.

Соедините узел Clamp (float) с выходом Value узла Set Scalar Parameter Value.

В завершении соедините узел IncrementFloat с узлом «Set Scalar Parameter Value»:

Подробная описание функций всех узлов:

  1. StaticMesh: выполняется, когда сетка куба пересекается с другим объектом.
  2. BP_Banana: проверяет, является ли пересекаемый объект бананом.
  3. DestroyActor: если объект действительно является бананом, эта функция уничтожает его.
  4. IncrementFloat: увеличивает переменную BananaCounter на единицу.
  5. float/float: разделяет счетчик на указанное число, чтобы нормализовать его значение.
  6. Clamp (float): фиксирует результат деления, чтобы его значение не превышало 1.
  7. Set Scalar Parameter Value: Устанавливает параметр ColorAlpha материала куба в нужное значение.

Проверьте, все ли верно, нажмите кнопку «Compile», а затем закройте редактор Blueprint.

Нажмите Play и попробуйте собрать бананы. Посмотрите, в самом начале куб имеет белый цвет, но постепенно его окрас меняется. Как только вы соберете 6 бананов, он станет полностью красным.

Что делать дальше?

Вы можете скачать готовый проект и все материалы для работы на этой странице.

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

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

Если вы хотите узнать больше о материалах, рекомендуем вам статью Material Inputs из документации Unreal Engine.

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

Перевод
raywenderlich.com
Показать больше

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Закрыть
Закрыть