Как я могу процедурно визуализировать столбики здоровья неправильной формы?

Вопрос о традиционном прямоугольном или основанном на сердце стержне здоровья является чем-то хорошо понятым и легко решаемым. Но что является приемлемым решением для более «творческих» баров здоровья, таких как макет, который я сделал ниже?

Очевидный способ сделать это - иметь «промежуточные» спрайты, поэтому третье изображение будет его собственным спрайтом, наряду со многими другими переходами для разных уровней здоровья. Но это кажется действительно не элегантным, и число промежуточных интервалов, необходимых для обеспечения плавного перехода между состояниями здоровья, было бы большим.

Единственная другая идея, которую я могу придумать, - это наложить спрайт «полное здоровье» поверх спрайта «пустое здоровье» и предварительно испечь наборы пиксельных координат, чтобы представить каждый тик здоровья, а затем сделать их непрозрачными или прозрачными как здоровье. идет вверх или вниз.

Я предполагаю, что этот вопрос не зависит от языка и платформы, но не стесняйтесь предоставить конкретный пример на любом языке / библиотеке / фреймворке, если он поможет в ответе.

Есть очень простой способ добиться этого с помощью шейдеров, вам нужно три * текстуры: пустая полоса здоровья, текстура полоски здоровья и маска с градиентом распределения здоровья с одним экстремумом (например, самое темное, а не черное или самое прозрачное альфа-значение) на одном конце и другой на другом конце. Лучше всего это показать на изображении, в настоящее время я не могу нарисовать изогнутый градиент только линейным, но я уверен, что у ваших художников не возникнет никаких проблем: теперь в шейдере сэмплируйте и текстуры, и пороговое значение маски, отбрасывая все пиксели, которые не являются ярче, чем пороговое значение ввода (на основе данных о состоянии шейдера% здоровья).
Вы могли быиспользуйте математическую формулу для маскировки вместо текстуры, но если бы вы это сделали, вы все равно были бы очень ограничены фигурами, которые вы можете (= простые) создавать с помощью указанных формул - и найти одну из них нетривиально.
* см комментарии

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

На CPU рассчитайте HealthDirection и его точечный продукт с V2

На GPU рассчитайте нормализованное направление от центральной точки для каждого пикселя. Сравните каждый точечный продукт с HealthDirections ', чтобы выбрать, следует ли оттенять «фон» или по цвету.

Если вы «перевернули» этот алгоритм и работали в другом направлении, вы могли бы «снять» направление каждого пикселя обратно в процент и вместо этого сравнить их с HealthPercent. С вычислением процентного соотношения каждого пикселя, изменение затухания с красного на зеленый на GPU становится тривиальным.

Сначала нарисуйте планку, применяя алгоритм к четверке; выводить цвета между rangeMin и rangeMax (может быть запечен) и clip () или выводить прозрачный каждый раз где-либо еще. Затем нарисуйте (модифицированный) спрайт поверх него, используя альфа. Я проследил ваш бар в САПР, залил его, а затем «по волшебству побрел» сплошной цвет в Paint, чтобы удалить его. Мой выглядит как дерьмо из-за смешивания AutoCAD и Paint вручную; при условии, что вы смешаете внутренние края с прозрачными, ваши будут выглядеть идеально .

Белая граница - это границы четырехугольника. Это и красные X только для справки:

«Спрайт с дырой» не нужно отображать одновременно с индикатором здоровья. Они должны быть инстанцированы и нарисованы сразу после того, как все бары здоровья будут готовы. Поскольку алгоритм содержится в шейдере, вы также можете добавить к нему экземпляры, а затем также нарисовать все панели состояния одним вызовом экземпляра. Рисование каждой панели здоровья на экране должно занять 2 вызова DrawInstanced (...) и быть "сумасшедшим быстрым".