Индикатор загрузки при помощи шейдеров⁠⁠

Привет, давайте поговорим о чем-нибудь симпатичном.

Предисловие.

В процессе разработки даже маленьких и простых игр посреди рутинных работ иногда появляются моменты, которые вызывают детский восторг. Собственно, такие моменты и отличают любимое дело (или хобби) от всех остальных.

У меня чаще всего такое происходит, когда понимаешь, как сотворить что-то новое, страшное и до этого момента непонятное. Сразу хочется об этом рассказать всем, кто все еще готов тебя слушать и поделиться, как делятся вкусным куском пиццы.

Поехали.

Мне понадобился индикатор загрузки для длинного подгружаемого списка (список друзей). Уже привычным и естественным жестом для пользователей мобильных является комбинация 1) потянуть резиновый список 2) поглядеть на спиннер 3) в списке появляется новое содержимое.

Индикатор нужен, чтобы пользователь понимал, что что-то происходит и это не конец списка.

В предыдущей игре я использовал простую вращающуюся картинку, но захотелось чего-то интереснее и технологичнее.

Сделаем простой индикатор при помощи шейдеров. Делать будем в Unity, конечно.

Процесс.

Идея простая. Нам нужна прямоугольная прозрачная картинка, на которой появится вращающееся кольцо, у которого начало будет непрозрачным, а конец полностью прозрачным. Примерно такая:

Я взял за основу стандартный шейдер (взять можно здесь: https://unity3d.com/ru/get-unity/download/archive). Выберите в выпадающем меню пункт "Встроенные шейдеры".

Создадим материал, укажем в нем наш новый шейдер и применим его к картинке. (в моем случае, для UI).

Удалил из него все лишнее и оставил только общую структуру.

Над вершинами мы издеваться не будем, только над текстурной частью.

По сути, мы должны описать, каким цветом нужно закрасить каждую точку нашей картинки. В данном случае, нам нужно получить окрашенное кольцо, все остальные точки оставив прозрачными. Напишем что-то такое:

И получим кривое колечко.

Обратите внимание на конструкцию lerp(a, b, step (c, X)). Она часто встречается в шейдерах и является заменой условного выражения. Читается как: “Если X >= с, тогда b, иначе a”.

Можете почитать о ней подробнее тут (https://shadowmint.gitbooks.io/unity-material-shaders/conten...).

Теперь сосредоточимся на получении нужного нам эффекта вращения.

Будем изменять значение полупрозрачности в зависимости от угла:

И получим что-то такое:

Отмечу, что функция frac() возвращает часть числа после запятой. С отрицательными значениями может работать странно, кажется, у меня была такая проблема.

А еще мы определили число Пи.

Ну и под конец - немного магии. Добавим прямо в шейдер влияние времени:

Про _Time в шейдерах можете почитать в мануалах (https://docs.unity3d.com/Manual/SL-UnityShaderVariables.html). Отмечу только, что я использовал _Time.y - это время в масштабе 1:1, прошедшее с запуска игры.

Для финализации результата я еще немного сгладил края и... “голову” кольца.

Ссылка на полный код в конце.

В игре получилось так (там добавлено немного свечения):

Заключение.

Ребятам, кто начинает - экспериментируйте.

Ребятам, кто разбирается - поправляйте!

Всем спасибо. Делайте хорошие игры.

P.S.

Конечный результат (немного сбилась табуляция, ну да ладно) - (https://github.com/imetelyov/unity-loading-ring-shader/blob/...)

Мои скромные поделки можете глянуть тут: https://vk.com/quasar.games