В Unity можно создавать 2D-визуальные эффекты несколькими различными способами. Например, чтобы создать эффект огня, вы можете анимировать пламя покадрово, анимировать спрайт с помощью шейдера, созданного в Shader Graph, или породить огненные частицы. Для последнего способа вы можете выбрать встроенную систему частиц, которая работает на CPU, или использовать VFX Graph и мощь GPU для порождения миллионов частиц. Обе системы можно использовать в одном проекте, поэтому вы можете выбирать, что лучше для того или иного эффекта.

Эта статья посвящена VFX Graph, который можно использовать в 2D-играх от Unity 2022 LTS и выше.

Перед созданием спецэффектов в проекте Unity 2D необходимо учесть несколько ключевых моментов:

• камеры, Если вы используете перспективную камеру, то ваши эффекты будут происходить в трехмерном пространстве, как в 3D-играх. Если вы используете ортографическую камеру, вам нужно настроить рендер системы на использование правильного сортировочного слоя. Подробнее о перспективе камеры читайте здесь.
• Постобработка Вы можете применить эффекты постобработки к 2D-проекту, если вы выберете Universal Render Pipeline (URP), например, добавить эффект расцвета к эффекту частиц с помощью URP Volume framework.
• Эффект может быть достигнут разными способами. Например, GameObject, представляющий эффект, может иметь несколько дочерних GameObject'ов, использующих различные системы, например спрайты с пользовательскими шейдерами или несколько систем частиц.
• Анимационные клипы: Анимационные клипы помогут вам создать плавные анимационные эффекты на основе спрайтов. Вы даже можете использовать систему скелетной анимации Unity (в редких случаях) для управления частями спрайта в спрайтовой анимации.
• Unity Asset Store Чтобы начать работу над добавлением визуальных эффектов в свой проект, загляните в Unity Asset Store, где вы найдете множество готовых 2D-эффектов.

Активы Visual Effect Graph совместимы с 2D-рендерером, использующим Shader Graph в Unity 2022 LTS. Чтобы создать новый VFX Graph в своем проекте, выполните шаги, описанные в документации.

Контексты вывода в графике VFX определяют, как будет отображаться эффект. Контексты вывода для сеток, такие как Output Particle Quad, предлагают возможность добавить шейдерный график. Неважно, начнете ли вы с Lit или Unlit Output, так как модель освещения будет изменена, чтобы адаптироваться к графику шейдеров. Вы можете использовать шейдеры по умолчанию, перечисленные ниже, или свой собственный шейдер на основе Shader Graph.

Для 2D-проектов в URP вы можете использовать один из этих трех шейдерных графиков, основанных на спрайтах:

• Лит: Получение света от системы 2D освещения
• Без света: Не подвержен влиянию системы 2D-освещения
• На заказ: Для реализации пользовательской 2D-модели освещения

Не забудьте отметить опцию Support VFX Graph в SRP target внутри Shader Graph.

Свойства, открытые в шейдерном графике, отображаются в VFX-графике. При необходимости их можно переопределить, например, если вы хотите, чтобы система частиц VFX Graph управляла изменением цвета шейдера с течением времени.

Дождь - распространенный эффект в играх, основанный на частицах. Вот основные шаги, использованные для создания дождя в Happy Harvest с помощью VFX Graph и GPU, которые позволяют перемещать множество отдельных частиц:

Частицы дождя (в иерархии они названы Visual Effect Rain ) отображаются в слое сортировки, над землей, но за объектами. Причина в том, что эффекты разбрызгивания воды возникают, когда частицы капель сталкиваются с землей, чтобы имитировать реакцию настоящего дождя. Если капли дождя видны на вертикальной поверхности, например на фонарном столбе, это может выглядеть неправильно. В реальном мире свет влияет на все окружающее пространство, включая капли дождя. В Happy Harvest VFX Graph для дождя использует Sprite Lit-based Shader Graph в Output Context для освещения частиц дождя. Без графики Lit Shader Graph, соответствующей дождю, его тон не сможет меняться, отражая меняющееся освещение в течение дня. Брызги от кадра к кадру: Когда частица дождя умирает, блок Trigger On Die запускает событие GPU, которое порождает одну частицу флипбука, воспроизводящую простую анимацию всплеска. Happy Harvest использует Flipbook Shader Graph UV Block для отображения различных кадров внутри текстуры. Кроме того, для достижения того же эффекта можно использовать блок Flipbook Player внутри VFX Graph.

На переднем плане появляются частицы дождя (в иерархии они названы Visual Effect Rain Foreground ). Так как они имитируют нахождение рядом с объективом камеры, то при падении на землю они не создают брызг воды.

Разновидность предыдущего эффекта используется с эффектом мигающего грома(Визуальный эффект Дождь передний план гром). Звуковой эффект для грома добавляется с помощью компонента VFX Output Event Play Audio. Этот компонент поставляется с примерами скриптов обработчиков выходных событий; контекст выходного события запускает его в графике. Вспышка грома: Простой, но эффективный способ создать этот эффект - породить на основе VFX Graph одиночную частицу, инициализированную в центре положения камеры и достаточно большую, чтобы заполнить весь экран. Блок Color Over Lifetime в узле Output изменяет цвет частицы, оценивая градиент с течением времени. В этом градиенте изменения прозрачности имитируют вспышки и угасание грозовых разрядов.

Дождь влияет на всю сцену в Happy Harvest, но поскольку через камеру видна только его часть, многие рассчитанные частицы не нужны. Вы можете установить опцию Frustum Culling в Инспекторе, чтобы избежать рендеринга этих частиц, или использовать тайлинг камеры - трюк, использованный в демо-версии.

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

Чтобы использовать чередование камер в Happy Harvest, дождевая икра устанавливается в соответствии с размерами камеры с помощью формы Set position: AABox. Формат камеры (введите размер вручную, используйте MainCamera напрямую или используйте слот aspectRatio) масштабируется на множитель размера, чтобы соответствовать настройкам камеры в сцене. AABox немного больше, чем реальный размер камеры, чтобы избежать эффекта всплытия, вызванного выбраковкой. Режим порождения формы установлен на Surface, потому что в 2D-проекте нет необходимости порождать весь объем (так как ось Z не используется).

После завершения этой настройки вам понадобится блок Tile/Warp Positions в выходных данных системы. Это связано с трансформацией камеры для соответствия ее положению и размерам камеры, что также необходимо сделать в контексте инициализации системы.

Эта техника также применима к эффектам дождя в 3D, за исключением того, что режим Shape Spawn должен быть установлен на Volume и со значением, отличным от нуля, для оси Z, если вы хотите получить эффект глубины.

Еще один распространенный эффект в играх - огонь. В Happy Harvest уютный костер во дворе и камин в доме фермера. Эффект огня состоит из трех наборов частиц: Пламя, искры и дым - все они порождаются одним и тем же графиком под названием VFX_Fire.

Анимация пламени

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

Если вы откроете файл ShaderGraph_Fireв проекте, то заметите, что один спрайт(Mask texture2D) используется для создания маски, чтобы придать пламени овальную форму. Анимация и спрайт создаются с помощью прокручивающегося узора "Вороной" с шумом и цветом оттенка для пламени и фона. Альфа-маска использует ту же форму пламени, но с оператором насыщенности, который создает более заметный контур.

Эффекты искр и дыма, добавляющие огню полированные детали, используют стандартную графику Lit Shader Graph. Комбинация изменений в блоках Velocity, Scale и Initial Position создает живой эффект, при этом требуется всего один спрайт. График для эффектов искр и дыма содержит примечания, которые помогут вам воссоздать эти эффекты в собственном проекте.

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

Материал по умолчанию 2D Lit, называемый Water , находится в рендере карты плиток. Он был заменен на пользовательский материал с шейдером воды. Все тайлы внутри карты отрисовываются с использованием одного и того же материала, поэтому данная карта используется только для тайлов воды.

В графе ShaderGraph_Water эффекты воды также генерируются из растянутого инвертированного шумового паттерна Вороного для имитации каустики (распространенный метод в водной каустике). Колеблющееся движение - это результат черепичной и смещенной ультрафиолетовой обработки с наложением шумового эффекта.

Эффект преломления

Эффект преломления смешивается с текстурой поверхности с помощью узла Lerp. Преломление использует текстуру Camera Sorting Layer, которая представляет собой снимок рендеринга камеры до определенного слоя сортировки, что означает, что все элементы предыдущих слоев сортировки будут отображаться в этой текстуре. В Happy Harvest рендеринг происходит до слоя сортировки Objects, который используется для таких элементов, как персонаж. UV текстуры слоя сортировки камеры искажается с помощью карты нормалей, созданной с помощью узла Normal and Height, который использует ту же текстуру Вороного, что и для текстуры поверхности.

Посмотрите этот урок, используя демо-версию Lost Crypt 2D, чтобы получить пошаговое руководство по другим эффектам воды в 2D.

Эффекты, о которых мы говорили до сих пор, не взаимодействуют с игровым процессом в Happy Harvest; они являются частью окружения и играют независимо от того, что происходит в демо-версии. Однако в большинстве игр вам придется запускать некоторые эффекты в зависимости от того, какое действие происходит в окружении и/или с персонажем. Давайте рассмотрим некоторые сработавшие эффекты в игре Happy Harvest.

Эффекты при использовании предметов

Некоторые эффекты прикрепляются к инструментам персонажа, например, к банке с водой. Файл Prefab_Tool_WaterCan содержит три анимационных ролика, которые меняют спрайт в зависимости от направления движения персонажа (вверх, вниз, в стороны). В этих анимациях есть событие анимации, которое вызывает функцию внутри компонента Tool Animation Event Handler.

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

Эффекты при итерации с плитками

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

Когда эффект обработки почвы срабатывает, он ссылается на эффект TillingPuff_prefab из компонента TerrainManager, прикрепленного к игровому объекту Grid. Он перемещается в центр плитки , а затем играет. Другие эффекты, например сбор урожая, вызывают VFX Graph, на который ссылается объект Data/Crops ScriptableObject. При инициализации скрипта TerrainManager создается словарь VFX-пула (переменная в скрипте m_HarvestEffectPool), в котором инстанцируется несколько VFX-префабов для воспроизведения при необходимости.

Небольшие эффекты в Happy Harvest придают демо-версии полировку и делают ее более приятной для изучения. Некоторые из них включают:

• VFX_DustParticles: Для распространения пыли в окружающей среде
• VFX/Вода:Для создания тонких волн и брызг воды
• VFX_Leaves: Вызывает падение листьев с кустов, когда игрок проходит мимо
• Персонаж Запускает эффект дымовой шашки, прикрепленной к персонажу; он создается с помощью встроенной системы частиц
• P_VFX_Moths: Запускает мотыльков, летающих вблизи прожекторов; это также делается с помощью встроенной системы частиц

Каждый из эффектов на основе VFX Graph в списке выше содержит примечания, объясняющие назначение каждого узла.

Созданное опытным разработчиком Unity при участии инженеров Unity и технических художников, это наше самое большое руководство по разработке визуальных эффектов. Электронная книга дает полное представление о том, как использовать инструменты создания визуальных эффектов в Unity для создания любых эффектов: вода и жидкость, дым, огонь, взрывы, погода, удар, магия, электричество - единственным пределом является ваше воображение.

Вы также можете посмотреть эти два видеоурока о том, как создавать спецэффекты с помощью VFX Graph:

• Как использовать декали в VFX Graph
• Как создать эффект портала с помощью VFX Graph