Як я можу процедурно відрегулювати оправи здоров’я неправильної форми?

Питання про традиційну прямокутну або сердечну базу здоров'я - це щось добре зрозуміле і легко вирішене. Але яке прийняте рішення для таких "креативно-образних" барів для здоров'я, як макет, зроблений нижче?

Очевидним способом цього було б мати спрайти "між", тому третім зображенням буде власний спрайт, а також безліч інших переходів для різних рівнів здоров'я. Але це здається дійсно неелегантним, і кількість внутрішніх людей, необхідних для створення плавного переходу між станами здоров'я, було б великим.

Єдина інша ідея, яку я можу придумати, - це накладення спрайту "повного здоров'я" поверх спрайту "порожнє здоров'я" та попередньо випікання наборів піксельних координат, щоб представити кожну галочку здоров'я, а потім зробити їх непрозорими або прозорими як здоров'я йде вгору або вниз.

Я маю намір це питання бути агностичним мовою та платформою, але не соромтесь надати конкретний зразок на будь-якій мові / бібліотеці / рамках, якщо це допоможе у відповіді.

Існує дуже простий спосіб досягти цього за допомогою шейдерів, вам потрібні три текстури: порожня панель здоров'я, текстура панелі здоров'я та маска з градієнтом розподілу здоров’я з одним крайнім (наприклад, найтемнішим не чорним чи найбільш прозорим значенням альфа) на одному кінці та інші з іншого кінця. Найкраще це показано на зображенні, я наразі не можу зробити малюнок вигнутого градієнта лише лінійним - але я впевнений, що у ваших художників не виникне жодних проблем: Тепер у шейдері вибірку текстур та порогове значення маски, відкидання всіх пікселів, які не є яскравіше, ніж поріг введення (базується на введенні% шейдера).
Ти міг би використовуйте математичну формулу для маскування замість текстури, але якби ви це зробили, ви б все одно дуже обмежений формами, які ви можете (= прості) створити за допомогою вказаних формул - і знайти їх не є тривіальним.
* дивіться коментарі

Реалізовано математично, як піксельний шейдер:

На процесорі обчисліть HealthDirection та його "крапковий продукт з V2

На GPU обчисліть нормалізований напрямок від центральної точки для кожного пікселя. Порівняйте кожен крапковий продукт із HealthDirections ', щоб вибрати, чи слід відтіняти "фон" чи колір.

Якщо ви "перевернули" цей алгоритм і працювали в іншому напрямку, ви можете "відкрутити" напрямок кожного пікселя назад у відсотках і порівняти їх із HealthPercent. З обчисленим відсотком кожного пікселя перетворення вимкнення від червоного на зелене на GPU стає тривіальним.

Намалюйте смугу спочатку, застосувавши алгоритм до квадрата; кольори виводу між rangeMin та rangeMax (можна було запекти) та clip () або вивести прозорим будь-де. Далі намалюйте (модифікований) спрайт над ним, використовуючи альфа. Я простежив твою смужку в CAD, заповнив її, потім "магією розмахував" суцільну кольорову форму в Paint, щоб видалити її. Шахта виглядає як лайно завдяки змішуванню AutoCAD та Paint вручну; якщо припустити, що ви змішуєте внутрішні краї до прозорих, ваші будуть виглядати ідеально .

Біла межа - це межі квадра. Це та червоний X - лише для ознайомлення:

"Спрайт з отвором" не потрібно надавати одночасно з панеллю здоров'я. Їх слід оформити і намалювати все одразу, після того, як всі бари здоров'я стануть готовими. Оскільки алгоритм є автономним у шейдері, ви також можете додати інстанцію до нього, а потім, також, намалювати всі панелі здоров’я одним інстальованим викликом малювання. Малювання кожної панелі здоров'я на екрані повинно приймати 2 виклики DrawInstanced (...) і бути "божевільним швидким".