UIПочатковий

Delayed Health Bar

Смужка-привид, що затримується після шкоди й показує, скільки саме зняв удар.

uifeedbackcombathealth

Приклади

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

Огляд

Смужка здоров'я із затримкою складається з двох шарів: справжня смужка падає миттєво в момент шкоди, а другий, «привидний» шар (зазвичай білий чи жовтий) на мить тримає старе значення й потім стікає до нового — класика файтингів, знайома зі Street Fighter, босів Dark Souls і безлічі інших ігор.

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

Окрім читабельності, саме стікання несе відчуття — шматок смужки, що на очах спливає, зчитується як наслідок і загроза так, як миттєво оновлене число не зчитується ніколи.

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

HP 100 / 100

Затримка привида500ms

Тривалість стікання300ms

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

ФайтингиБосфайтиRPGБій

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

Варто

✓Опускайте справжню смужку миттєво — затримка стосується лише привидного шару, ніколи не справжнього значення.
✓Скидайте таймер утримання привида, коли удари йдуть один за одним, — комбо має зчитуватись як один накопичений шматок.
✓Обирайте колір привида, що контрастує і з заповненням, і з фоном (білий на червоному став класикою недарма).

Не варто

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

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

⚠Анімувати привида лінійним твіном фіксованої тривалості незалежно від розміру шматка — дрібна подряпина й величезний удар не мають стікати однаково довго.
⚠Дозволити привидному шару рендеритись поверх справжнього, ховаючи поточне значення замість втраченого.
⚠Вести ефект від ширини намальованої смужки замість самого значення здоров'я — накопичуються дрейфи округлення.

Реалізація

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

Промт

Додай у мій проєкт ефект "Delayed Health Bar": Смужка-привид, що затримується після шкоди й показує, скільки саме зняв удар.

Як це працює: Смужка здоров'я із затримкою складається з двох шарів: справжня смужка падає миттєво в момент шкоди, а другий, «привидний» шар (зазвичай білий чи жовтий) на мить тримає старе значення й потім стікає до нового — класика файтингів, знайома зі Street Fighter, босів Dark Souls і безлічі інших ігор.

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

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

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