В качестве небольшой практики соберем вот такой эффект «стекания», или «сползания» а-ля как в оригинальном Doom.
Добиваться 100% совпадения в качестве задачи не было. Делаем имитацию.
На самом деле сам шейдер состоит буквально из двух строк. И возможно станет для вас какой-то отправной точкой в разработке.
Расплавлять будем ноду Sprite с именем Score.
Вся сцена выглядит вот так :
Game - картинка которая лежит под экраном который будем мять.
AnimationPlayer - я в итоге задействовал для анимации.
Погнали.
Навешиваем на спрайт шейдер, и начинаем писать код.
Для начала заставим нашу картинку просто опускаться вниз. Для этого выведем переменную moveAll.
В функции fragment добавим нашу текстуру и подмешаем в UV.y нашу переменную.
Проверяем :
Всё двигается.
По сути осталось только каким то образом заставить медленнее двигаться какие то зоны текстуры.
Для этого создадим в любом из удобных редакторов вот такую картинку :
(Можно обойтись и без спрайта, и использовать генератор градиентов в годо.)
Я специально сделал её достаточно маленького разрешения (в моем случае разрешение 160х120), чтобы в последствии добавить такой эффект пикселизации при модификации основного спрайта.
Добавляем переменную в код . Попутно выключаем фильтрацию и повторяемость. И добавляем саму текстуру в меню.
Подмешаем текстуру в UV координаты и увидим как всё начинает искажаться.
Чтобы иметь возможность контролировать силу искажения, добавим еще одну переменную типа float , и будем перемножать наш градиент на это значение.
Двигаем ползунки - всё супер.
Заметно что границы спрайта растягиваются.
Чтобы это всё отрезать , можно создать альфа канал из нашей карты градиента.
Выведем альфа канал в отдельную переменную и посмотрим что он из себя представляет.
Понятное дело что в таком виде мы это использовать не можем. Нам нужно иметь маску без плавных переходов.
И для этого по традиции нам прекрасно подойдет старый добрый Step.
Подключаем Step, инвертируем маску, подключаем результат в альфу и видим под спрайтом фон !.
Ну и в завершении , вернём нашу самую первую переменную которая двигала весь спрайт целиком.
Далее всё это закидывается в AnimationPlayer где анимируется как вашей душе угодно.
Статьи по плееру есть в группе, как и еще куча статей по шейдерам.
Ну и вот для сравнения, как выглядит картинка если не менять фильтрацию текстуры :
На этом всё.
Подписывайтесь на канал, при желании вступайте в группу в ВК.
Удачи в изучении годо