UIПочатковий

Cooldown Radial

Кнопка здібності темніє, і радіальний сектор відкриває її по колу — гравець зчитує очікування одним поглядом і відчуває точний момент готовності.

uicooldownabilitymobile

Приклади

Записано з інтерактивного демо нижче на цій сторінці.

Огляд

У кожній грі зі здібностями на екрані постійно висить те саме питання: «а вже можна тиснути?» Радіальний кулдаун відповідає на нього без слів — кнопка тьмяніє, темний «шматок пирога» змітається за годинниковою стрілкою, і темний сектор, що лишився, І Є часом, що лишився. Гравець зчитує це периферійним зором посеред бою — цифра, що тікає, такого не дає.

Магія — в останньому кадрі: коли розгортка завершилась, не повертайте кнопку тихцем. Спалахніть нею, підкиньте масштаб, пустіть кільце від її краю — біт «готово» є нагородою і закликом до дії водночас. У мобільних іграх цей один поп помітно піднімає використання здібностей: кнопка, що святкує власну готовність, отримує натискання.

Реалізація майже безкоштовна на будь-якому стеку: в Unity UI є Image.fillAmount з методом заповнення Radial360, у вебі — conic-gradient. Весь ефект — один лерп від 0 до 1 плюс панч масштабу наприкінці. Зусилля вкладіть у деталі: тьмяніть саму іконку (не лише оверлей), вимикайте зону натискання на час кулдауну, а для здібностей довших за ~3 с розгляньте дрібний відлік секунд.

Інтерактивне демо

темний сектор і є залишком часу — поп оголошує готовність

Кулдаун1500ms

Поп готовності20%

Де застосовується

Кнопки здібностей у мобільних екшенахБустери й розхідники на HUDКулдауни атаки чи ривка на екраніНагороди за часом і поповнення енергії в мета-екранах

Найкращі практики

Варто

✓Святкуйте момент готовності — спалах плюс малий поп масштабу перетворюють кінець кулдауну на заклик до дії.
✓Тьмяніть саму іконку, а не лише оверлей, і вимикайте зону натискання, щоб тапи не з'їдалися мовчки.
✓Розгортайте за годинниковою стрілкою від позиції 12 — саме так читати навчив кожен годинник.

Не варто

✕Не покладайтеся лише на цифру — вона вимагає фокуса, а сектор, що тане, читається периферійно.
✕Не додавайте їзинг до заповнення — прогрес кулдауну це дані, і нелінійна розгортка бреше про залишок часу.
✕Не нашаровуйте кілька стилів (сектор + смуга + лічильник) на одну маленьку кнопку; оберіть один.

Поширені помилки

⚠Оверлей крутиться, а кнопка лишається натисною — з'їдає ввід під час кулдауну і вчить гравця, що UI ненадійний.
⚠Стан «готово», ідентичний стану охолодження мінус оверлей, — без попу гравець продовжує переглядати кнопку, щоб перевірити.
⚠Радіал скидається миттєво при повторному використанні, пропускаючи біт «витрачено» — спершу впустіть заповнення в 0 з маленьким провалом.

Реалізація

Встав це у свого ШІ-асистента (Cursor, Copilot, Claude), щоб додати ефект у проєкт.

Промт

Додай у мій проєкт ефект "Cooldown Radial": Кнопка здібності темніє, і радіальний сектор відкриває її по колу — гравець зчитує очікування одним поглядом і відчуває точний момент готовності.

Як це працює: У кожній грі зі здібностями на екрані постійно висить те саме питання: «а вже можна тиснути?» Радіальний кулдаун відповідає на нього без слів — кнопка тьмяніє, темний «шматок пирога» змітається за годинниковою стрілкою, і темний сектор, що лишився, І Є часом, що лишився. Гравець зчитує це периферійним зором посеред бою — цифра, що тікає, такого не дає.

Рекомендації:
- Святкуйте момент готовності — спалах плюс малий поп масштабу перетворюють кінець кулдауну на заклик до дії.
- Тьмяніть саму іконку, а не лише оверлей, і вимикайте зону натискання, щоб тапи не з'їдалися мовчки.
- Розгортайте за годинниковою стрілкою від позиції 12 — саме так читати навчив кожен годинник.

Чого уникати:
- Не покладайтеся лише на цифру — вона вимагає фокуса, а сектор, що тане, читається периферійно.
- Не додавайте їзинг до заповнення — прогрес кулдауну це дані, і нелінійна розгортка бреше про залишок часу.
- Не нашаровуйте кілька стилів (сектор + смуга + лічильник) на одну маленьку кнопку; оберіть один.

Реалізуй ефект у тому рушії/стеку, який уже використовується в проєкті, і дотримуйся наявного стилю коду. Підключи його там, де це доречно.