Progress Bar, он же Индикатор выполнения - это по своей сути графический элемент, показывающий либо прогресс (например загрузка уровня), либо количество какого-нибудь ресурса (например жизни, или заряд батареи).
Сегодня попробуем нарисовать прогресс бар в виде индикатора заряда батареи. Такое часто применяется в играх, в той же Katana Zero так отображался заряд умений персонажа.
Приступим😊
Подготовка
Тут ничего сложного делать не будем, поэтому возьмем холст размера 32x16 пикселей, и приступим к работе.
Рисуем батарейку
Набросаем простую батарейку с четырьмя полосками зарядки.
Для большей выразительности добавим под неё задний фон.
Чтобы наша батарейка не смотрелась слишком плоско, добавим бликов.
Тут, чтобы сильно не мучиться, можно нарисовать блики белы с прозрачность. Верхний примерно 50 % прозрачности, а нижний примерно 25%. Но в общем лучше подбирать на глаз, как больше понравится😋
Сделаем тоже самое для разных уровней зарядки, только подберём для каждого свой цвет.
Так же добавим прозрачный чёрный фон для пустой полоски
С батарейкой вроде всё)
Сделаем простую анимацию, чтобы посмотреть как будет выглядеть в динамике.
Добавляем анимацию
Сами изображения разделим на фреймы. Каждый фрейм это отдельная степень зарядки.
Кстати, чтобы поменять скорость анимации можно либо вставить промежуточные фреймы, либо изменить в настройках.
Frame -> Constant Frame Rate
По умолчанию задержка между сменой фреймов 100 мс, изменим её на 200 мс.
В конечном итоге, после нажатия на кнопку Play (стрелка в окошке с фреймами) у нас должна запуститься анимация.
Вот и всё!
Осталось только подписаться и поставить лайк😁