Эффект свечения пикселей в игре за четыре шага

Эффект свечения пикселей в игре за четыре шага

Разрешение экрана у меня в игре 320х180. При таком низком разрешении видно каждый пиксель, и я решил сделать красивое ретро-свечение.
Свечение делается программно, но не шейдером, а C# скриптом во время загрузки. Мне показалось, что проще сгенерировать текстуры один раз, а не обсчитывать эффект каждый кадр. После нескольких итераций оптимизации добился того, что эффект свечения для нескольких тысяч спрайтов считается около шести секунд.
Алгоритм эффекта очень прост и состоит из четырех пунктов. Первые два - это неоновое свечение пикселей. Вокруг каждого пикселя делаются два свечения, каждый со своим радиусом R и значением непрозрачности A.
Берем цвет пикселя и подсвечиваем соседние таким же цветом, но с заданной непрозрачностью A. По мере удаления, свечение (непрозрачность) уменьшаем линейно, пока не дойдем до нуля на расстоянии R.
Шаг третий - скругление. Во время экспериментов оказалось, что если немного скруглить окончания непрерывных отрезков пикселей, то получается красиво. Если у пикселя в горизонтальном ряду нет соседа с какой-нибудь стороны (лево/право) - скругляем эту сторону.
Заключительный шаг: полоски. Разделив ряды пикселей полупрозрачными полосками, удается добиться дополнительного ретро-ощущения.
Осталось только подобрать параметры эффекта, чтобы смотрелось хорошо. Вот, например, картинка с исходными пикселями и с постобработкой.

Тут я установил параметры, которые дают, на мой субъективный взгляд, лучшую картинку на средних и больших мониторах. А вот на телефонах - темновато. Для телефонов надо подбирать свои параметры.

Аутентичность свечения пикселей на CRT мониторах - не основная задача. Главное, чтобы смотрелось прикольно и было не больно глазам во время игры. Сейчас картинка мне нравится процентов на 80. Буду еще допиливать.

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

1919
4 комментария

Я этот же эффект могу в Paint NET повторить одной кнопкой.

Ответить

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

1
Ответить

Ну, полоски должны быть на самом экране, а не на каждом спрайте, а свечение это просто bloom, тоесть это можно было сделать вообще без кода

Ответить

Решейд врубить и всё

Ответить