Wie erstelle ich mehrere 2D-Strahler?

12

Ich möchte einen 2D-Spotlight-Effekt erstellen, mit dem ein Spotlight auf mehrere Objekte angewendet werden kann. Das heißt, als hätten mehrere Sprites Fackeln in der Hand. Für ein einzelnes Objekt (ein Spotlight) verwende ich eine Technik, bei der ich ein Sprite mit Farbverlauf überlagere und den Mittelpunkt diesem Objekt nachjagen lasse. Diese Technik eignet sich gut für einen einzelnen Scheinwerfer. Hier ist ein Screenshot, um zu veranschaulichen, wovon ich spreche:

Single Spotlight - Funktioniert

Scheinwerfereffekt mit einem Scheinwerfer

Das Problem, auf das ich stoße, ist, dass sich diese Technik nicht auf mehrere Entitäten erstreckt. Wenn ich ein anderes Spotlight-Bild überlagere, treten mehrere Probleme auf. Hier ist ein simulierter Screenshot:

Mehrere Scheinwerfer = Probleme

Scheinwerfereffekt mit zwei Scheinwerfern

Das offensichtlichste Problem sind die sichtbaren Ecken. Dies könnte gelöst werden, indem das Scheinwerferbild gigantisch gemacht wird, um die gesamte Ebene abzudecken, aber das fühlt sich nicht richtig an. Das zweite und schwierigere Problem ist, dass ich die Dunkelheit mit dieser Technik effektiv multipliziere. Jedes hinzugefügte Sprite verdunkelt also alle anderen. Offensichtlich gehe ich dieses Problem falsch an.

Irgendwelche Ideen?


Fortsetzung der Bemühungen

In den Kommentaren wurden einige Überblendungsoptionen erörtert. Hier ist mein aktuelles Denken. In meinem obigen Beispiel mit einem einzelnen Spotlight verwende ich eine Bilddatei, die ungefähr so ​​aussieht: (Ich habe die Transparenz durch die Farbe Grün ersetzt, um die Darstellung zu vereinfachen.)

Transparenzansatz

Wie oben diskutiert, besteht das Problem darin, dass das Alpha-Mischen dieses Bildes mit einem anderen Bild nicht den gewünschten Effekt erzeugt. Stattdessen wird dies erzeugt:

Überlagern von zwei Transparenzkreisen

Das ist für mich kein Problem mit den Mischoptionen. Das Problem ist meines Erachtens, dass in diese Art von Bild die Transparenzmaske und das Bild (ein schwarzes Quadrat) eingebaut sind, wenn sie getrennt werden sollen.

Anstelle eines schwarzen Bildes mit integrierter ausgeschnittener Transparenz sollte ich Transparenzmasken verwenden, die zur Laufzeit für das schwarze Quadrat verwendet werden. Dabei kann ich immer noch keine herkömmliche weiße und schwarze Transparentmaske verwenden, da sonst das gleiche Problem auftritt. Hier ist ein Beispiel, diesmal stehen Weiß und Schwarz für Weiß und Schwarz:

Transparenzmaske

Die Lösung scheint darin zu bestehen, eine Transparenzmaske anzuwenden, die selbst Transparenz nutzt. So ähnlich: (grün = transparent)

Transparenzmaske mit Transparenz

Auf diese Weise können mehrere Transparenzmasken Alpha-gemischt und dann als Transparenzmaske gegen das schwarze Quadrat verwendet werden. Hier ist ein Beispiel für zwei der Transparenzmasken, die Alpha zusammenblendet:

Zwei Transparenzmasken mit Transparenz

Jedenfalls ist das der Ansatz, an dessen Umsetzung ich gerade arbeite. Ich werde Ergebnisse veröffentlichen, wenn dies funktioniert. Was ich (derzeit) nicht weiß, ist, ob ich eine Transparenzmaske verwenden kann, die selbst Transparenz hat.

Cameron Fredman
quelle
Wenn ich darüber nachdenke, sollte ich anscheinend Transparenzmasken verschieben und sie auf eine große schwarze Textur auftragen. Keine Ahnung, wie das gemacht werden würde.
Cameron Fredman
7
Sie sind sich nicht sicher, wie Sie Ihre Farbverläufe erstellen oder anwenden. Dies kann jedoch ein Problem beim Überblenden sein. Wenn Sie die richtige Überblendung verwenden, funktioniert dies problemlos. Wir brauchen mehr Informationen zu den Texturen.
Dennmat
Ich verwende AndEngine als Framework und ein Großteil der Überblendung geschieht hinter den Kulissen, obwohl eine "setBlendFunction ()" verfügbar ist.
Cameron Fredman
Wenn Sie sich ansehen, was Sie verlinkt haben, möchten Sie wahrscheinlich die zweite Lösung unten oder die dritte, wenn dies nicht funktioniert. Ich bin mir nicht sicher über andEngine, und sie schienen keine Dokumente zu haben. Wenn Sie Ihre Antwort in diesem Thread nicht finden, können sie möglicherweise weiterhelfen, da sie anscheinend bereits mit dem Mischen herumspielen Optionen viel hinter den Kulissen.
Dennmat
Obwohl dieser Thread Ihr Problem an erster Stelle zu beheben scheint, haben Sie die Version, die diese Änderung enthält?
Dennmat

Antworten:

3

Konzeptionell besteht die Lösung für mehrere Scheinwerfer aus:

  1. Beginnen Sie mit einem vollständig schwarzen Array, um die Beleuchtungswerte für jedes Pixel in der Szene zu speichern.
    • Null repräsentiert einen Bereich des Bildes ohne jegliches Licht.
    • 100% stellen einen Bereich dar, der vollständig mit Tageslicht gesättigt ist.
    • Wenn Sie Lust auf Phantasie haben, können Sie einen Wert über 100% (z. B. 200%) festlegen, der einen Bereich des Bildes darstellt, der übersättigt ist, und alles zu einem blendend weißen Pixelklecks verwischt. Sorgen Sie sich später darüber und begrenzen Sie die Werte vorerst auf 0-100%.
  2. Fügen Sie für jede Lichtquelle innerhalb des Bildschirms oder nahe genug an der Kante, die der Lichthof zum Licht hinzufügen würde, die Lichtwerte dieser Lichtquelle zu Ihrem Array von Lichtwerten für die Szenenpixel hinzu.
  3. Verwenden Sie das resultierende Lichtwert-Array, um die Pixel für Ihre Szene so zu ändern, dass:
    • Pixel, die von 0% Licht beleuchtet werden, sind schwarz.
    • Pixel, die mit 100% Licht beleuchtet werden, haben ihre normale Farbe.
    • Andere Pixel sind eine Farbe zwischen.
    • Sie scheinen bereits zu wissen, wie man diesen Schritt macht, gemessen an Ihren Screenshots.

Der Trick besteht darin, zu verstehen, dass Alpha-Blending einen oder mehrere dieser Schritte ausführen kann. Alpha-Blending bezieht sich nur auf die Verwendung einer Alpha-Karte / eines Alpha-Bildes, um die Pixel eines Bildes oder einer Textur auf einfache Weise zu ändern. Dies bedeutet normalerweise auch, dass es sich um einen schnellen Satz von Funktionen handelt oder mit speziellen Hardwarebefehlen implementiert wird, um ihn schneller zu machen. Sie können dies mit regulären Arrays und normalen Sprachbefehlen tun, aber die Verwendung der speziellen Funktionen der Alpha / Mischbibliothek ist wahrscheinlich besser. ... und keine Bugs haben. Manchmal bedeutet dies, dass die Pixel teilweise transparent sind. In Ihrem Fall bedeutet dies jedoch Folgendes:

  • Addiere Alpha-Werte zu jedem Pixel, um das Lichtwert-Array von # 1 aufzubauen.
  • Verwenden Sie das Lichtwert-Array aus # 1, um die endgültigen Farben für Pixel aus Schritt # 3 aufzulösen.

In der Dokumentation zu Ihren Alpha-Mischfunktionen werde ich nachsehen, welche Funktionen sie zum Kombinieren von Pixeln verschiedener Art bieten. Ich vermute, dass sie Funktionen für jeden der Schritte haben werden, die Sie ausführen müssen, aber sie könnten unter Namen stehen, die nicht offensichtlich sind.

ET
quelle
Ich grabe diese Antwort und werde es versuchen. Die Idee eines Lens-Flare / Blur für Werte über 100% ist ebenfalls ein schöner und inspirierender Bonus. Sendet Updates mit den dabei gewonnenen Erkenntnissen. Danke ET
Cameron Fredman