2D свет и тени¶
Введение¶
В этом руководстве объясняется, как работает двумерное освещение в демонстрационном проекте lights and shadows. Он начинается с краткого описания ресурсов, использованных в финальной демонстрации, а затем шаг за шагом описывает, как создать сцену наподобие демонстрационной.
Все ресурсы для этого руководства можно найти в официальном демонстрационном репозитории на GitHub. Предлагаю вам скачать его перед тем как начать. Кроме того, его можно загрузить из Менеджера проектов. Запустите Godot и в верхней панели выберите «Шаблоны» и выполните поиск «2D Lights and Shadows Demo».
Настройка¶
Для этой демонстрации мы используем четыре текстуры: две для источников света, одну для отбрасывания тени и одну для фона. Я включил ссылки на все из них здесь, если вы хотите загрузить их отдельно от демо.
Первое — это фоновое изображение (background.png), используемое в демонстрации. Вам не обязательно нужен фон, но мы используем его для демонстрации.
Второе — это обыкновенное черное изображение (caster.png <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png> _) для использования в качестве нашего объекта, отбрасывающего тени. Для игры сверху вниз это может быть стена или любой другой объект, отбрасывающий тень.
Далее идет сам свет (light.png). Если вы нажмете на ссылку, вы заметите, насколько оно велико. Изображение, которое вы используете для освещения, должно охватывать ту область, которую вы хотите осветить. Это изображение имеет размер 1024x1024 пикселей, поэтому вы должны использовать его для покрытия 1024x1024 пикселей в своей игре.
Наконец, у нас есть изображение-прожектор (spot.png). В демонстрации используется капля, чтобы показать, где находится свет, и более крупное световое изображение, чтобы показать влияние света на остальную часть сцены.
Узлы¶
- В демонстрации используются четыре разных узла:
CanvasModulate используется для затемнения сцены.
Спрайты используются для отображения текстур для световых пятен, фона и отбрасывающих тени.
Light2Ds используются для освещения сцены. Обычно свет работает путем добавления выбранной текстуры поверх остальной части сцены для имитации освещения. Но его можно использовать и по-другому, например, для маскировки частей сцены.
LightOccluder2Ds используются, чтобы сообщить шейдеру, какие части сцены отбрасывают тени. Тени появляются только в областях, покрытых Light2D, и их направление зависит от центра Light.
Света¶
Lights покрывают весь размер соответствующей текстуры. Они используют аддитивное смешивание, чтобы добавить цвет своей текстуры к сцене.
Lights <class_Light2D>`имеет четыре ``Режима`: Add, Sub, Mix, и Mask.
Add добавляет к сцене цвет световой текстуры. Осветляет участки под светом.
Sub вычитает цвет света из сцены. Он затемняет область под светом.
Mix смешивает цвет света с основной сценой. Результирующая яркость находится посередине между цветом света и цветом под ним.
Mask используется для маскировки участков, покрытых светом. Скрытые области скрываются или раскрываются в зависимости от цвета света.
Для демонстрации источники света состоят из двух компонентов : самого Light (который является эффектом света) и капли Sprite, который является изображением, показывающим расположение источника света. Дочерний элемент Sprite не нужен для работы Light.
Тени¶
Тени создаются путем пересечения Light с LightOccluder2D.
По умолчанию тени отключены. Чтобы включить их, щелкните Light и в разделе Тени отметьте Включено.
В демонстрации мы используем Sprite с текстурой на нем для создания «Отбрасывателей теней», но на самом деле все, что вам нужно, это пара LightOccluder2Ds. Сам по себе LightOccluder2D выглядит как темное пятно, а в этой демонстрации Sprite представляет собой просто черный квадрат.
Шаг за шагом¶
Теперь, когда мы рассмотрели основы используемых узлов, мы можем шаг за шагом пройти через процесс создания сцены наподобие той, что была в демонстрации.
Сначала добавьте Sprite и установите его текстуру на фоновое изображение. Для вашей игры это может быть любой фон на ваш выбор. Для этого стиля тени это, скорее всего, будет текстура пола.
Затем создайте три Light2D's и установите их текстуры на светлое изображение.Вы можете изменить их цвет в верхней части. По умолчанию тени отключены, а для параметра режим установлено значение добавить. Это означает, что каждый свет добавляет свой цвет всему, что находится под ним.
Затем добавьте дочерний элемент Sprite к каждому из узлов Light и установите текстуру Sprite на изображение капли. Каждый из них должен оставаться в центре узла: ref: Light <class_Light2D>. Капля — это изображение самого источника света, а Light показывает эффект, который свет оказывает на сцену. Элемент LightOccluder2D будет рассматривать положение источника света как центр узла Light, поэтому мы хотим, чтобы капля была центрирована на её родительском элементе :ref:` Свет <class_Light2D> `.
Примечание
Анимации в демонстраци не будутрассматриваться здесь. См. Введение в возможности анимации для получения информации о создании анимации.
Сейчас сцена должна выглядеть слишком яркой. Это потому, что все три источника света добавляют цвет сцене. Вот почему в демонстрации в сцене используется CanvasModulate. CanvasModulate умножает всю область просмотра на определенный цвет.
Добавьте в сцену CanvasModulate и установите его цвет на rgb (70, 70, 70). Это сделает сцену достаточно темной, чтобы отчетливо увидеть эффекты света.
Теперь мы добавляем отбрасываемые тени.
В демонстрации используется Node с именем "casters" для организации теневых отбрасывателей. Добавьте в сцену Node2D. Он будет использоваться для группировки всех отбрасывающих теней вместе. Таким образом, мы можем показать и скрыть их все одновременно.
Каждый отбрасыватель тени состоит из Sprite с дочерним элементом LightOccluder2D. Для демонстрации Sprite имеет текстуру, установленную на `изображение отбрасывателя <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png >`_ и больше ничего. В дочернем элементе LightOccluder2D происходит вся магия. В игре Sprite может быть чем-то большим, чем черный ящик; это может быть изображение любого объекта, отбрасывающего тень: стены, волшебного сундука или чего-нибудь еще.
LightOccluder2Ds сообщает игре, какую форму имеет окклюдер. Они содержат OccluderPolygon2D, который является контейнером для многоугольника и некоторой другой информации. В этой демонстрации, поскольку наша стена представляет собой квадрат, мы устанавливаем для параметра Полигон квадрат. Остальные настройки по умолчанию подходят.
Первая настройка Замкнутый может быть включена или выключена. Замкнутый многоугольник перекрывает свет, идущий со всех сторон. Открытый многоугольник закрывает свет только с одного направления.
Режим отбраковки позволяет выбрать направление отбраковки. По умолчанию установлено значение Отключено, что означает, что окклюдер будет отбрасывать тень независимо от того, с какой стороны горит свет. Две другие настройки По часовой стрелке и Против часовой стрелки относятся к порядку поворота вершин многоугольника. Порядок намотки используется для определения стороны линии внутри многоугольника. Только линии, обращенные наружу, отбрасывают тени.
Чтобы проиллюстрировать разницу, вот изображение LightOccluder2D с параметром Замкнутый, установленным на Выключено в соответствующем OccluderPolygon2D, так что линии многоугольника можно увидеть:
Примечание
Для параметра Режим отбраковки установлено значение Отключено. Все три линии отбрасывают тени.
Примечание
Для параметра Режим отбраковки установлено значение По часовой стрелке. Только верхняя и правая линии отбрасывают тени.
Примечание
Для параметра Режим отбраковки установлено значение Против часовой стрелки. Только нижняя строка отбрасывает тень. Если параметру Замкнутый установить значение Включено, слева будет дополнительная вертикальная линия, которая также отбрасывает тень.
Когда вы добавите LightOccluder2Ds, тени все равно не появятся. Вам нужно вернуться в Light2Ds и в разделе «Тень» установить для параметра Включено значение Включено. Это включает тени с резкими краями, как на изображении ниже.
Чтобы придать теням приятный вид с мягкими краями, мы устанавливаем переменные фильтр, фильтр гладкости и длина градиента. Godot поддерживает Более точная фильтрация в процентах (PCF), который берет несколько образцов карты теней вокруг пикселя и размывает их для создания эффекта плавной тени. Чем больше количество образцов, тем более гладкой будет выглядеть тень, но тем медленнее она будет двигаться. Вот почему Godot по умолчанию предоставляет 3-13 образцов и позволяет вам выбирать. В демонстрации используется PCF7.
Примечание
Это тень, созданная с настройками демонстрации. Параметру gradient lenght установлено значение 1.3, filter smooth — 11.1, а filter — PCF7.
Примечание
Параметру filter установлено значение PCF13. Обратите внимание, как тень становится шире, это потому, что расстояние между выборками основано на переменной filter smooth.
Чтобы использовать фильтрацию, вам необходимо установить переменную фильтр гладкости. Это определяет, насколько далеко друг от друга находятся образцы. Если вы хотите, чтобы мягкая область простиралась достаточно далеко, вы можете увеличить размер фильтр гладкости. Однако с небольшим количеством образцов и большим фильтром гладкости вы можете увидеть линии, образующиеся между образцами.
Примечание
filter smooth установлено значение``30``.
Различные узлы Light в демонстрации используют разные значения для сглаживания фильтра. Поиграйте с ним и посмотрите, что вам нравится.
Примечание
Переменной filter smooth установлено значение 0.
Наконец, есть переменная gradient length. Для некоторых плавных теней желательно, чтобы тень не начиналась сразу на объекте, так как это дает резкие края. Переменная длины градиента создает плавный градиент для начала тени, чтобы уменьшить эффект резкого края.
Примечание
gradient length установлено значение 0.
Примечание
Переменной gradient length установлено значение 10.
Вам нужно будет немного поэкспериментировать с параметрами, чтобы найти настройки, подходящие для вашего проекта. Не существует подходящего решения для всех, поэтому Godot обеспечивает такую гибкость. Просто имейте в виду, что чем выше установлен фильтр, тем затратнее будут тени.