Основы материала

Создаем новый проект. Выбирайте любой шаблон, здесь не важно. Главное, добавьте
Starter Content.
Создадим новую папку, в которой, будем создавать наши материалы.

Переходим в нашу папку и создаем там новый материал. Назовем его BaseMaterial.

Открываем материал и видим уже знакомый MaterialEditor.

Управление в окно редактора простое. С помощью зажатой правой кнопкой мыши можно
перемещаться по viewport’у. С помощью колесика мышки можно менять масштаб.
Рассмотрим основные панели.
Preview окно. В нем вы будете видеть, как выглядит ваш
материал. Здесь можно поменять режим отображения и
модель, на которой будет отображаться материал.

Palette панель. Здесь находятся все функции, которые можно

использовать в материале. Рядом возле имени функции расположен
HotKey, для ее добавления.

Details панель. Показывает свойства текущего

материала или выбранной ноды.

Рассмотрим основные свойства вкратце.

Material Domain - этим свойством вы определяете, как будет использован ваш материал.
Surface - для обычных мешей, BSP геометрии.
Deferred Decal используется собственно для декалей.
Light Function - для использования с источниками света. Дает возможность
персонализировать освещение.
Post Process - для post эффектов.
User Interface - соответственно для UI.

Когда вы выбираете какой-то тип Material Domain, то в зависимости от него меняется и

BaseMaterial нода.

Blend Mode - определяет как будет смешиваться материал с тем, что уже нарисовано на
экране.

Opaque - материал будет рисоваться поверх всего.

Masked - маска используется для определения прозрачности. В этом режиме пиксель или
рисуется или не рисуется, то есть полупрозрачные объекты создавать нельзя.
Translucent - используется для прозрачных материалов.
Additive - материал будет смешиваться подобно режиму смешивания Add в фотошопе.
Modulate - материал будет смешиваться подобно режиму смешивания Multiply в
фотошопе.
AlphaComposite - тоже используется для прозрачных материалов. Используется с
текстурами, в которых основной цвет просчитан с альфой.
Shading Model - определяет модель освещения и входные параметры Base Material.
Unlit - материал не реагирует на свет. Всегда освещен с одинаковой интенсивностью
Default Lit - стандартная модель освещения.
Subsurface - используется для таких материалов, как лед или свеча.
Preintegrated Skin - используется для материалов человеческой кожи.
Clear Coat - используется для материалов схожих с автомобильной покраской.
Subsurface Profile - используется для материалов человеческой кожи.
Two Sided Foliage - используется для материалов растений.
Hair - используется для материалов волос.
Cloth - используется для материалов одежды.
Eye - используется для материалов глаз.

Далее мы создадим материалы с некоторыми типами и все станет ясно.

Режимы смешивания
Создадим простой материал и протестируем в нем Blend Mode. Для добавления нод в
Material Editor можно воспользоваться панелью Palette, просто перетянуть оттуда ноду,
либо же кликнуть правой кнопкой мыши в пустом поле и в выпадающем списке найти
нужную ноду. Эти 2 списка дублируются, так что не важно как добавлять ноды. Я буду
просто говорить какую ноду добавить, а вы уже сами будете добавлять откуда удобно.
Добавляем ноду Constant4Vector. Эта нода содержит 4 числа, которые формирует цвет.
Выберите эту ноду и в окне Details кликните по прямоугольнику, показывающему текущий
цвет

В выпадающем окне выберите любой цвет и нажмите OK.

Вы также можете менять цвет изменяя числа в окне Details.

Теперь соедините выход ноды Constant4Vector с входом Base Color

q
Наш шар поменял цвет. У нашего материала есть цвет, давайте теперь проверим Blend
Modes. Нажмите Apply и Save. Добавьте на сцену какой-нибудь объект из стандартных, к
примеру этого парня

И добавьте на этот объект наш материал. Можете просто перекинуть материал из

Content Browser на модель
Либо же назначить материал в нужный слот в окне Details у этого объекта.

По умолчанию Blend Mode установлен как Opaque, по этому моделька рисуется как
обычно поверх всего остального. Возвращаемся в Material Editor и меняем ставим Blend
Mode в Masked

Если сейчас нажать Apply, то вы заметите, что ничего не поменялось) Это потому что мы
не добавили маску. Возвращаемся в Material Editor. Добавляем текстуру
T_Perlin_Noise_M, просто перетяните ее в окно редактора материалов.
Соединяем верхний выход ноды с текстурой с входом Opacity Mask

Нажимаем Apply и видим, что наш шар стал немного дырявым)

Меняем Blend Mode на Translucent. Соединяем верхний выход ноды с текстурой с

входом Opacity

Нажимаем Apply и видим следующее.

Наверное, стоит остановится и рассказать, что это за выходные ноды у Texture Sample
ноды, так как вам частенько придется ей пользоваться. Идем
сверху вниз.
1) Это значения цвета по всем каналам RGB
2) Значение цвета по каналу R
3) Значение цвета по каналу G
4) Значение цвета по каналу B
5) Значение цвета по каналу A

Идем дальше, так как впереди еще много дел. Меняем Blend Mode на Additive

И для более наглядного результата уберите текстуру шума с входа Opacity. Для этого
зажмите клавишу Alt и кликните по белому кругу справа от параметра Opacity.

Не забываем нажимать Apply или Save, чтобы посмотреть как материал выглядит в игре.
Теперь наш шар выглядит так
Меняем Blend Mode на Modulate. Здесь нужно провести немного больше манипуляций,
чтобы он заработал.

Ставим Shading Model в Unlit.

Раскрываем вкладку Translucency и снимаем галочку Separate Translucency.

Соединяем как на рисунке

Нажимаем Apply и видим.

Остался последний AlphaComposite

Соединяем как на рисунке

Получаем.
Анимированный материал
Давайте сделаем какой-то материал и заодно рассмотрим базовые операторы для
работы с материалами. Создаем новый материал. Называем его AnimateMaterial.

Открываем. Добавляем в материал 2 текстуры T_Perlin_Noise_M и T_Smoke_Tiled_D

Добавляем ноду Multiply и соединяем как на рисунке.

Здесь не особо важен порядок. Но сейчас давайте соединим T_Smoke_Tiled_D с входом
A ноды Multiply. Эта нода умножит значения 2-ух цветов друг с другом. У каждой ноды
есть белый треугольник, нажав на который откроется превью результата действий этой
ноды.

Соединим выход Multiply с входом Base Color. Нажмем Apply. Применяем на наш
StaticMesh в сцене. Пока, что ничего интересного.

Добавим ноду Panner и соединим ее с входом UVs текстуры T_Perlin_Noise_M.

В настройках ноды Panner ставим параметр Speed Y равным 1.

Нажимаем Apply, теперь текстурка “ездит” по материалу.

Добавьте ноду LinearInterpolate и добавьте 2 ноды Constant3Vector. У нас уже была
похожая переменная, только здесь 3 цвета.

Задайте любые цвета для 2-ух последних нод. И соедините все как на рисунке.
Мы немного раскрасили нашу модель. Здесь с помощью ноды Lerp, мы перезаписываем
цвета из входа Alpha. Грубо говоря, то что было черным, станет цветом, который мы
подключили на вход A и, соответственно, то что было белым станет цветом, который мы
подключили на вход B. Закрываем, переходим к другому материалу.

Glow материал
Теперь сделаем светящийся материал. Создаем новый материал, называем его
GlowMaterial. Назначаем на модель, открываем. Добавляем сразу 2 текстуры
T_Tech_Hex_Tile_M и T_Tech_Hex_Tile_N

Сейчас вход Base Color оставляем пустым. Соединим пока что T_Tech_Hex_Tile_N с
входом Normal.
Нажимаем Apply. Теперь у нас появились некие вмятины на объекте. Теперь давайте
поиграемся с параметрами Metallic и Roughness. Создайте 2 переменные Constant и
соедините каждую из них с этими параметрами.

Нажмите Apply, посмотрите, как меняется ваша модель. Попробуйте другие значения. И
для лучшей наглядности, все же добавьте ноду Constant3Vector и соедините с входом
Base Color.

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

Добавьте рядом с текстурой T_Tech_Hex_Tile_N еще одну T_Metal_Rust_N. Добавьте

ноду Add и соедините все как на рисунке.

Add просто плюсует 2 текстуры. Теперь у нас появились дополнительные детали.

Добавляем ComponentMask и сразу же соединим его.
ComponentMask поможет нам сделать выборку по определенным каналам. Нажимаем на
ноду ComponentMask и в параметрах ставим галочку только напротив канала G.

Добавляем ноду OneMinus и соединим как на рисунке.

OneMinus инвертирует цвета. Цвета с выхода OneMinus мы будем использовать для

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

Создаем еще Constant3Vector и Multiply. Задаем сразу цвет Constant3Vector. И как

обычно, соединим как на рисунке)

Мы подключили на вход Emissive Color входные данные, но материал все равно не

светится.
Нужно увеличить интенсивность. Добавляем ноду Multiply и ноду Constant.

Ноде Constant задаем большое значение. У меня это 500. Нажимаем Apply. Переходим в
сцену. Можете также для наглядности выключить все источники освещений.

Здесь рассмотрим еще один секрет и идем дальше. Добавляем ноду Sine и ноду Time.
Как вы уже догадались, соединим все как на рисунке и смотрим)
В настройках Sine можете поменять период, чтобы сделать мигания чаще.

Еще один крутой материал

Создаем новый материал. Обзываем его GrassMaterial. Для этого
материала лучше будет добавить какой-то Plane на сцену.

Открываем материал и добавляем в него текстуру T_Bush_D.

Меняем Blend Mode на Translucent

Соединим текстуру на следующие входы

Сейчас в нашей текстуре находится 2 ветки, а нам нужна только одна.

Применим небольшую хитрость. Добавляем ноду TextureCoordinate. Соединим ее с

входом UVs

И в параметрах TextureCoordinate поставим VTiling 0.5.

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

Теперь добавляем знакомые нам уже ноды Sine и Time, а также Multiply. Соединим все
как на картинке.
World Position Offset позволит нам задать положение vertex’ов для нашего мэша. Если
сейчас нажать Apply, то мы заметим, что сейчас двигается весь плейник. Нам нужно
сделать маску, по которой будет фильтроваться, что двигать, а что нет. Обычно для таких
дел используется текстура, но у нас ее нет. Будем использовать ноду LinearGradient.
Добавляем ее в редактор. И соединим как на картинке.

При желании, можете посмотреть как выглядит градиент. Просто соедините его с Base
Color. Сейчас двигается нижняя часть. Исправим это с помощью ноды OneMinus

Осталось поправить один момент. Сейчас движение происходит по диагонали, а нужно

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

И, соответственно, соединим все

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

Готово. Идем дальше.

Material Instance
Вы уже, наверное, заметили, что чтобы посмотреть какие-то изменения, когда меняем
какую-то переменную, то приходится долго ждать, пока движок скомпилирует шейдер.
Сейчас мы создадим material instance, с которым будет легко и быстро тестировать
различные изменения в материале. Но сначала, нам нужно подправить материал. Потому
что, если мы сейчас создадим material instance, то мы не сможем редактировать
значения. Нужно создать специальные переменные. В качестве жертвы возьмем наш
материал GlowMaterial. Добавим немного больше контроля. Добавим ноду
ScalarParameter, поставим ее возле ноды Sine. Выбираем ноду ScalarParameter и в окне
Details ставим следующие значения

Добавляем ноду Multiply и соединим все.

И сразу же поправим еще один момент. Исправим черное затухание. Добавьте ноду Add
и ничего не меняя, соединим ее

Теперь заменим наше число 500 тоже параметром ScalarParameter. Для создания этой
ноды, можете воспользоваться HotKey S. Просто зажмите эту клавишу и кликнете левой
кнопкой мыши в пустом поле. Выставляем параметры для этой ноды.
Соединим и ноду 500 смело удаляем.

Заменим еще 2 ноды, которые отвечают за цвет нашего материала. Добавляем ноду
VectorParameter, выставляем в ней следующие настройки

Заменяем этой нодой наш основной цвет

Добавляем еще один VectorParameter и выставляем настройки.

Соединяем все.

Все готово. Сохраняем. Еще очень полезная штука в Material Editor это возможность
добавлять комментарии. Когда нод становится слишком много, то сложно разобраться
сразу, что и где находится. Чтобы добавить комментарий, выделите несколько нод и
нажмите правой кнопкой мыши по одной из них. В выпадающем списке выберите Create
comment from Selection.

Вводите имя и теперь вы можете перетягивать всю зону сразу.

И так, сохранили наш материал, закрываем его. В окне Content Browser кликаем правой
кнопкой по нему и выбираем Create Material Instance.
Вводим ему имя GlowMat_Instance. Назначаем нашего подопытного. И открываем его.
Он выглядит немного попроще, чем Material Editor.

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

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

сделать Material Instance и для других, ранее созданных, материалов.

Construction Script
Ну что же, выделяем наш шар

И нажимаем Blueprint/Add Script

Переходим во вкладку Construction Script. Выводим линию от ноды Construction Script
и выбираем Create Dynamic Material Instance(StaticMeshComponent)

Получаем следующее

Выводим линию от Create Dynamic Material Instance и выбираем Promote To Variable

Вводим имя переменной DynamicMat.

Нажимаем + возле вкладки Variables.
Вводим имя переменной GlowColor. Выделяем нашу переменную

И в окне Details меняем тип переменной на Linear Color.

Добавим еще одну переменную Change Color с типом Bool. Я покажу все в скринах

Нажимаем на две кнопки справа от переменных

Теперь наши переменные видно в окне Details у выбранного объекта.

Возвращаемся в Blueprint Editor. Выводим линию от ноды SET и выбираем Branch

Вытаскиваем переменную Change Color в редактор

Выбираем Get

Соединяем

Снова вытягиваем эту переменную, но выбираем уже Set

Соединяем

Наша переменная будет работать как триггер. Мы нажали на нее, произошло действие и
она сбросилась.
Добавьте в редактор переменную DynamicMat. Выберите Get.
Вытяните линию из ноды DynamicMat и выберите Set Vector Parameter Value.

Соедините все и в параметр Parameter Name введите имя “Цвет свечения”

Вытяните переменную GlowColor, выберите Get

Соедините все как на рисунке

Вот весь Blueprint

Нажимаем Compile и Save. Переходим в свойства объекта, выставляем любой цвет и при
нажатии на галочку Change Color. У нас меняется цвет освещения на тот, который мы
выбрали.
Давай теперь добавим возможность задавать таким образом интенсивность свечения, а
также сделаем, чтобы основной цвет перекрашивался в случайный. Возвращаемся в
Blueprint и выводим линию от ноды DynamicMat и добавляем следующие ноды Set
Vector Parameter Value и Set Scalar Parameter Value

Добавляем переменную GlowIntensity и нажимаем на кнопку справа, чтобы сделать ее

публичной.

Меняем ей тип на Float

Вытягиваем ее на поле, выбираем Get и соединим с Set Scalar Parameter Value. В
качестве Parameter Name введем “Интенсивность мигания”

Добавляем ноду Random Float In Range.

Выставляем параметр Max равным 1

Дублируем эту ноду 2 раза

Добавляем ноду Make Linear Color

Соединим

Соединяем дальше. В качестве Parameter Name введем “Основной цвет”

Осталось еще немного соединить

Нажимаем Compile и Save. Применяем материал на нашу модель. И пробуем нажимать

кнопку Change Color.

Для проверки ПЗ, присылайте скриншоты с Material Editor, Blueprint Editor и скриншоты
с окна игры.