Как создать динамическое освещение для 2D-игры

Подробный туториал для Unity.

Инди-разработчик из студии Half Human Games Перси Лежандр опубликовал на Gamasutra текст, в котором рассказал о процессе создания динамической системы освещения для своей игры Dwerve. Он подробно описал каждый шаг, а мы выбрали главное.

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

Основной инструмент для реализации освещения — ассет Smart Lighting 2D. Лежандр подробно расписал все необходимые действия для использования этого ассета в игровых проектах.

Создайте новый проект Unity с помощью шаблона 2D-игры и импортируйте туда Smart Lighting 2D. Создайте новую сцену и добавьте Tilemap, щёлкнув правой кнопкой мыши по окну Hierarchy и выбрав 2D Object — Tilemap. Далее вам понадобится тайлсет для создания подземелья — вы можете собрать его сами или взять сторонний (на itch.io есть множество бесплатных наборов тайлов).

Затем откройте редактор спрайтов и установите размер сетки 16х16 ячеек. Многие спрайты разделены на несколько фрагментов — вам нужно объединить их в один. Убедитесь, что длина и ширина кратны 16. На рисунке ниже красным контуром показаны сгенерированные спрайты, а синим — то, как они должны выглядеть.

Далее вам нужно сгенерировать тайлы из окна Tile Palette. Откройте окно на верхней панели инструментов, выбрав пункт Window — 2D — Tile. Затем создайте новый Tile Palette под названием Dungeon Palette и сохраните его в новой папке Assets — Palettes.

Чтобы автоматически создать тайлы из спрайтов, просто перетащите их из Assets в окно Tile Palette. Когда появится окно Select Folder, создайте новую папку Assets — Tiles и сгенерируйте тайлы в эту папку.

Теперь окно Tile Palette должно выглядеть следующим образом:

Продублируйте свой Tilemap в окне Hierarchy. Переименуйте оригинал в Ground Tilemap, а копию — в Obstacle Tilemap. У Obstacle Tilemap установите параметр Order in Layer равным 10, чтобы этот тайлмап рендерился поверх Ground Tilemap.

Теперь нужно разукрасить тайлмап. Убедитесь, что пол и землю вы разукрашиваете на Ground Tilemap, а стены, колонны и пропсы на Obstacle Tilemap. Факелы нужно будет добавить позже.

На изображении ниже в правом нижнем углу стена рендерится поверх мебели. Такую проблему можно исправить в настройках проекта. Откройте окно Project Settings на верхней панели инструментов, выбрав Edit — Project Settings — Graphics. В разделе Camera Settings установите Transparency Sort Mode на Custom Axis, а Transparent Sort Axis на (0, 1, 0). Это должно исправить проблему.

Затем нужно добавить Tilemap Collider 2D к Obstacle Tilemap и поставить галочку на Used by Composite. После этого добавьте Composite Collider 2D, с которым автоматически идёт компонент Rigidbody 2D — у него нужно изменить Body Type на «Static». Выберите Obstacle Tilemap — ваш коллайдер должен выглядеть примерно так:

Вы можете заметить проблему с этим коллайдером. Он должен находиться только у основания объектов, а не охватывать спрайты полностью. Откройте окно Sprite Editor в Texture Import Settings и отредактируйте фигуры спрайтов, выбрав Sprite Editor — Custom Physics Shape.

Выберите Obstacle Tilemap в Hierarchy. Если коллайдеры не обновились автоматически, отключите и снова включите компонент Tilemap Collider 2D. Теперь коллайдеры должны выглядеть так.

Далее нужно добавить тайлы факелов. Выберите объект Grid и создайте новый тайлмап — щёлкните правой кнопкой мыши и выберите 2D Object — Tilemap. Переименуйте этот тайлмап в Torch Tilemap и установите показатель Order in Layer на 20.

Факелы должны двигаться: Unity 2D Extras включает AnimatedTile.cs, поэтому тайлы можно легко анимировать. Можно просто скачать этот скрипт и поместить его в Assets — Scripts. В окне проекта нажмите правой кнопкой мыши и выберите Create — 2D — Tiles — Animated Tile. Это позволит вам анимировать спрайт. Переименуйте его в Pillar Torch Tile и выберите его.

Перетащите спрайты факела в контейнер. Установите минимальную и максимальную скорость на 10. Разблокируйте Inspector. Повторите эти шаги, чтобы создать тайлы настенного факела. Теперь перетащите тайлы факела в окно Tile Palette.

Теперь нарисуйте пару факелов на Torch Tilemap. Левый факел в синем круге предназначен для колонн, а правый — для стен. Когда вы закончите, войдите в Play Mode, чтобы увидеть анимированные факелы.

Теперь можно приступить к созданию освещения. Создайте Lighting Manager 2D: щёлкните правой кнопкой мыши на Hierarchy и выберите 2D Light — Light Manager. Таким же образом добавьте Light Source и переименуйте объект в Torch Light. Перетащите его в Assets — Prefabs, чтобы создать префаб. Теперь дублируйте свет факела и перетащите его на каждый факел. Поместите его на землю прямо перед колонной или стеной, чтобы сам источник света не находился внутри какого-либо препятствия.

Войдите в Play Mode, чтобы проверить освещение.

Пока препятствия не блокируют свет. Чтобы исправить это, добавьте компонент Lighting Tilemap Collider 2D к объекту Obstacle Tilemap.

Получилось не совсем то, что нужно: тени формируются самими тайлами, а не физической формой препятствий. Чтобы исправить это, нужно поставить Collision Type на «Sprite Custom Physics Shape».

Тени получились слишком тёмными. Чтобы исправить это, нужно сделать их более прозрачными. Откройте окно Lighting 2D — Preferences и установите Shadow Darkness на 0,85. Также можно сделать оттенок более тёплым. Откройте Torch Light префаб и выберите светлый коричнево-рыжий цвет (автор использовал #FFAF64 ). Поставьте параметр Size на 3.

Далее факелам можно добавить свечение и частицы. Откройте префаб Torch Light и сделайте пустой объект корневым, а затем переместите компонент Lighting Source 2D в дочерний объект Light Source. Добавьте ещё два объекта Light Glow и Ember Particles.

Источник света расположен на земле, а свечение и частицы должны быть над факелом. Установить положение Light Glow и Ember Particles на (0, 0,5, 0). Затем добавьте компонент SpriteRenderer к игровому объекту Light Glow и выберите светло-жёлтый цвет (например, CD7319 ). Также установите Order in Layer на 20, чтобы он отображался поверх любых препятствий.

Создайте новый материал под названием Additive Particle Material в Assets — Materials и установите для шейдера значение Legacy Shader — Particles — Additive. Поставьте Material, чтобы использовать его в качестве материала. Чтобы он начал мерцать, скачайте SpriteAlphaFlicker.cs и переместите его в Assets — Scripts. Затем добавьте его к объекту Light Glow.

Чтобы сделать частицы, добавьте Particle System к объекту Ember Particles. Автор использовал следующие настройки:

Чтобы затемнить края экрана, можно добавить виньетку. Откройте окно Package Manager — Post Processing — Install. Создайте новый слой Post Processing. Затем добавьте компонент Post Process Layer к объекту Main Camera. Далее поставьте Layer на «Post Processing».

Создайте объект Post Process Volume и также поставьте Layer на «Post Processing». Добавьте к нему компонент Post Process Volume и установите галочку на «Is Global». Создайте новый профиль. Нажмите кнопку Add effect — Unity — Vignette.

Чтобы проверить динамическое освещение, можно добавить скрипт FollowMouse.cs и добавить его в Assets — Scripts. Продублируйте один из факелов, переименуйте его в Mouse Torch и добавьте компонент Follow Mouse. Отключите свечение и частицы.

#арт #опыт #unity