Das Problem des traditionellen rechteckigen oder herzbasierten Gesundheitsriegels ist gut verstanden und leicht zu lösen. Aber was ist die akzeptierte Lösung für mehr "kreativ geformte" Gesundheitsriegel, wie das Modell, das ich unten gemacht habe?
Der naheliegende Weg, dies zu tun, wäre, "Zwischen" -Sprites zu haben, so dass das dritte Bild sein eigenes Sprite sein würde, zusammen mit vielen anderen Übergängen für verschiedene Gesundheitsstufen. Aber das scheint wirklich unelegant zu sein, und die Anzahl der Zwischenschritte, die erforderlich sind, um einen reibungslosen Übergang zwischen Gesundheitszuständen zu erreichen, wäre groß.
Die einzige andere Idee, die ich mir einfallen lassen kann, ist, das Sprite "voller Zustand" über das Sprite "leerer Zustand" zu legen und Pixelkoordinatensätze vorab zu backen, um jeden Tick des Zustands darzustellen und sie dann als Zustand undurchsichtig oder transparent zu machen geht rauf oder runter.
Ich beabsichtige, dass diese Frage sprach- und plattformunabhängig ist, kann aber gerne ein konkretes Beispiel in einer beliebigen Sprache / Bibliothek / einem Framework bereitstellen, wenn dies für die Antwort hilfreich ist.
Antworten:
Es gibt eine sehr einfache Möglichkeit, dies mit Shadern zu erreichen. Sie benötigen drei * Texturen: Leere Gesundheitsleiste, Textur der Gesundheitsleiste und Maske mit Gradient der Gesundheitsverteilung mit einem Extrem (z. B. dunkelster nicht schwarzer oder transparentester Alphawert) an einem Ende und dem andere am anderen Ende. Es wird am besten auf dem Bild gezeigt, ich kann derzeit keinen gekrümmten Farbverlauf nur linear zeichnen - aber ich bin sicher, dass Ihre Künstler keine Probleme haben werden:
Jetzt werden im Shader-Beispiel sowohl Texturen als auch Schwellenwerte für den Maskenwert verwendet, wobei alle nicht vorhandenen Pixel verworfen werden Heller als der Eingabeschwellenwert (basierend auf der Eingabe von Health% Shader).
Sie könntenVerwenden Sie anstelle einer Textur eine mathematische Formel zum Maskieren, aber wenn Sie dies tun, sind Sie immer noch stark auf Formen beschränkt, die Sie mit diesen Formeln erstellen können (= einfache) - und es ist nicht trivial, eine zu finden.
* siehe Kommentare
quelle
Mathematisch implementiert als Pixel Shader:
Berechnen Sie auf der CPU HealthDirection und sein Skalarprodukt mit V2
Berechnen Sie auf der GPU für jedes Pixel eine normalisierte Richtung vom Mittelpunkt weg. Vergleichen Sie jedes Punktprodukt mit HealthDirections, um zu entscheiden, ob "Hintergrund" oder Farbe verwendet werden soll.
Wenn Sie diesen Algorithmus "invertiert" und aus der anderen Richtung gearbeitet haben, können Sie die Richtung jedes Pixels wieder in einen Prozentsatz "auflösen" und sie stattdessen mit HealthPercent vergleichen. Wenn der Prozentsatz jedes Pixels berechnet ist, wird das Verblassen von Rot zu Grün auf der GPU trivial.
Zeichnen Sie den Balken, indem Sie den Algorithmus zuerst auf ein Quad anwenden. Gibt Farben zwischen rangeMin und rangeMax (kann gebacken werden) und clip () aus oder gibt sie überall transparent aus. Als Nächstes zeichnen Sie das (modifizierte) Sprite mit Alpha darüber. Ich habe Ihre Leiste in CAD nachgezeichnet, sie mit Fluten gefüllt und dann die Volltonform in Paint mit einem Zauberstab "umwandelt", um sie zu löschen. Meins sieht nach Mist aus, weil AutoCAD und Paint von Hand gemischt wurden. Vorausgesetzt, Sie mischen die Innenkanten transparent, wird Ihre perfekt aussehen .
Der weiße Rand ist die Grenze des Quadrats. Es und die roten X dienen nur als Referenz:
Das "Sprite mit Loch" muss nicht gleichzeitig mit der Gesundheitsleiste gerendert werden. Sie sollten alle auf einmal instanziiert und gezeichnet werden, nachdem alle Gesundheitsriegel vollständig sind. Da der Algorithmus im Shader in sich geschlossen ist, können Sie ihm auch eine Instanz hinzufügen und dann alle Healthbars mit einem instanziierten Draw-Aufruf zeichnen. Das Zeichnen jeder Healthbar auf dem Bildschirm sollte zwei DrawInstanced-Aufrufe (...) annehmen und "verrückt schnell" sein.
quelle