Jak mogę proceduralnie renderować paski zdrowia o nieregularnym kształcie?

Problem tradycyjnego prostokątnego paska zdrowia opartego na sercu jest czymś dobrze zrozumiałym i łatwym do rozwiązania. Ale jakie jest zaakceptowane rozwiązanie dla bardziej „kreatywnych” pasków zdrowia, takich jak makieta, którą wykonałem poniżej?

Oczywistym sposobem na to byłoby mieć duszki „pomiędzy”, więc trzeci obraz byłby własnym duchem, wraz z wieloma innymi przejściami dla różnych poziomów zdrowia. Wydaje się to jednak nieeleganckie, a liczba osób w wieku dojrzałym potrzebnych do płynnego przejścia między stanami zdrowia byłaby duża.

Jedynym innym pomysłem, jaki mogę wymyślić, jest nałożenie duszka „pełnego zdrowia” na duszka „pustego zdrowia” i wstępne upieczenie zestawów współrzędnych pikseli, które reprezentują każdy tik zdrowia, a następnie uczynienie ich nieprzezroczystymi lub przezroczystymi jako zdrowie idzie w górę lub w dół.

Mam nadzieję, że to pytanie będzie niezależne od języka i platformy, ale mogę podać konkretną próbkę w dowolnym języku / bibliotece / środowisku, jeśli pomoże to w uzyskaniu odpowiedzi.

Jest to bardzo prosty sposób osiągnięcia tego za pomocą shaderów, potrzebujesz trzech * tekstur: pusty pasek zdrowia, tekstura paska zdrowia i maska ​​z gradientem rozkładu zdrowia z jednym skrajnym (np. Najciemniejsza, nie czarna lub najbardziej przezroczysta wartość alfa) na jednym końcu i inne na drugim końcu. Najlepiej widać to na obrazie, obecnie nie jestem w stanie narysować zakrzywionego gradientu tylko liniowego - ale jestem pewien, że twoi artyści nie będą mieli żadnych problemów: teraz w próbce cieniowania zarówno tekstury, jak i próg wartości maski, odrzucają wszystkie piksele, które nie są jaśniejszy niż próg wejściowy (na podstawie wejściowego% shadera zdrowia).
Państwo mogliużyj maski matematycznej do maskowania zamiast tekstury, ale jeśli to zrobisz, nadal będziesz bardzo ograniczony do kształtów, które jesteś w stanie (= proste) stworzyć za pomocą tych formuł - a znalezienie jednego nie jest trywialne.
* patrz komentarze

Zaimplementowane matematycznie, jako moduł cieniujący piksele:

Na CPU obliczyć HealthDirection i jego iloczyn iloczynu za pomocą V2

Na GPU obliczyć znormalizowany kierunek od punktu środkowego dla każdego piksela. Porównaj każdy produkt kropkowy z HealthDirections ', aby wybrać, czy odcień „tła”, czy kolor.

Jeśli „odwróciłeś” ten algorytm i działałeś w innym kierunku, możesz „rozproszyć” kierunek każdego piksela z powrotem na wartość procentową i porównać je z innymi z HealthPercent. Po obliczeniu procentu każdego piksela, przechodzenie z zanikania z czerwonego na zielony na GPU staje się banalne.

Najpierw narysuj pasek, stosując algorytm do kwadratu; kolory wyjściowe między rangeMin i rangeMax (można upiec) i clip () lub wydruk przezroczysty w każdym innym miejscu. Następnie narysuj (zmodyfikowany) duszek nad nim, używając alfa. Śledziłem twój pasek w CAD, wypełniłem go zalaniem, a następnie „magicznie wędrowałem” jednolitym kolorem w programie Paint, aby go usunąć. Mój wygląda jak gówno z powodu ręcznego mieszania AutoCAD i Paint; zakładając, że połączysz wewnętrzne krawędzie z przezroczystymi, twoje będą wyglądać idealnie .

Biała ramka to granice quada. To i czerwone X są tylko w celach informacyjnych:

„Duszek z dziurą” nie musi być renderowany w tym samym czasie co pasek zdrowia. Powinny otrzymać instancję i wylosować wszystkie naraz, po zakończeniu wszystkich pasków zdrowia. Ponieważ algorytm jest samowystarczalny w module cieniującym, możesz również dodać do niego instancję, a następnie narysować wszystkie paski zdrowia za pomocą jednego wywołania losowania. Narysowanie każdego paska zdrowia na ekranie powinno zająć 2 połączenia DrawInstanced (...) i być „szalonym szybkim”.