Wie kann ich eine gleichmäßige Schattierung / ein gleichmäßiges Leuchten von einer Kachel zur anderen erzielen?

7

Ich habe an einem auf Kacheln basierenden Spiel gearbeitet, bei dem einige Bereiche beleuchtet (derzeit gesehen), einige schwarz (nie gesehen) und andere dunkel (zuvor gesehen, aber derzeit nicht gesehen) sind.

Wenn man sich das absolut wundervolle Pixel Dungeon ansieht , das ein ähnliches Schema hat, hat es einen Effekt, bei dem die dunkel / schwarzen Kacheln in hellere Kacheln "bluten" (Bild aus dem Tumblr des Spiels ):

Beispiel

Schauen Sie 1oben - der Bereich hinter der Wand ist dunkel, die Wand selbst ist beleuchtet, aber die Dunkelheit "leuchtet" und schafft einen schönen Übergang zum Licht. Es gibt auch ein etwas anderes "Leuchten" von schwarzen Kacheln zu hellen Kacheln, wie zu sehen ist 2- es ist dunkler (man kann nicht einmal den Rand der Wand sehen).

Ich würde begeistert sein etwas ähnliches zu implementieren, und wenn ich will nur den Effekt , wie gesehen auf 1und 2ich kann einfach entsprechenden Overlays erstellen, so etwas wie: Schatten vor Dunkelheitfür Schatten-von-Dunkel und Schatten von Schwarzfür Schatten-from-schwarz.

Es ist jedoch nicht so einfach:

  • Für Orte wie 3ich brauche Schwarz-Dunkel-Schattierung.
  • Für Orte wie 4ich brauche Schatten von 2 dunklen Seiten und zwei beleuchteten Seiten.
  • Für Orte wie 5ich brauche Schattierung von 2 schwarzen Seiten, 1 dunklen Seite und einer beleuchteten Seite.
  • Für Orte wie 6ich brauche Schatten von 1 schwarzen Ecke , 1 dunklen ... Moment mal, das wird verrückt!

Deshalb suche ich nach einer vernünftigeren Lösung, um diesen schönen Effekt zu erzielen.

Bisher hatte ich folgende Ideen:

  1. Generieren von Texturen zur Laufzeit unter Berücksichtigung des "Lichtstatus" der 9 umgebenden Kachel der Kachel (und Zwischenspeichern dieser Texturen).
  2. Anwenden eines Shaders beim Zeichnen dieser Kacheln, um die an jedem Pixel erforderliche Schattierung von den umgebenden Kacheln zu interpolieren, entweder mit bilinearer oder bikubischer Interpolation.
  3. Ändern Sie die "dunklen" und "schwarzen" Texturen so, dass sie tatsächlich größer als eine Kachel sind - mit der Textur + Ausbluten in benachbarte Kacheln, etwa:

    Geben Sie hier die Bildbeschreibung ein

    Und dann lassen Sie diese Texturen einander überlagern (aber das ist viel Mischen).

  4. Byte56 schlägt vor, die Farbe pro Scheitelpunkt für die darunter liegende Kachel festzulegen und sie mit der Textur zu verschmelzen. Dies scheint jedoch nicht genau genug zu sein. Beispielsweise ist eine dunkle Kachel, die von schwarzen Kacheln umgeben ist, vollständig schwarz, was nicht gut ist. Und was ist, wenn in allen Ecken schwarze Fliesen und an allen Seiten beleuchtete Seiten sind? Ich denke, ich könnte dies genau modellieren, indem ich 9 Eckpunkte für jede Kachel anstelle von 4 habe.

Ich würde mich über einige Beiträge zu diesen Vorschlägen sowie über weitere Ideen dazu freuen.

Ich verwende Libgdx und Java, aber ich habe das Gefühl, dass eine Antwort nicht wirklich vom verwendeten Framework abhängt.

Eiche
quelle
2
Normalerweise wird hier nur die Farbe für das Quad festgelegt, auf dem die Kachel gerendert wird. Schwarz macht die Textur schwarz, Weiß zeigt die ursprüngliche Textur. Sie können diese Farben pro Scheitelpunkt festlegen, um weichere Übergänge zu ermöglichen. Für die Beleuchtung werden keine Texturen benötigt.
MichaelHouse
@ Byte56, das ist ein guter Vorschlag, wenn auch etwas problematisch (ich glaube, ich brauche tatsächlich 9 Eckpunkte, um dies genau zu modellieren) - die Frage wurde aktualisiert, um sie als weitere Alternative hinzuzufügen. Wenn Sie der Meinung sind, dass dies dennoch die beste Option ist oder dass 4 Eckpunkte ausreichen, fügen Sie bitte unten eine Antwort hinzu.
Eiche
@ Oak, was hast du am Ende gemacht? Ich stelle mir derzeit mehr oder weniger die gleiche Frage wie Sie.
Payne
@payne Am Ende hatte ich die Idee Nr. 1 oben und erzeugte eine Textur im laufenden Betrieb. Meine Referenz ist seitdem Open Source, also ist es möglich zu sehen, dass sie auch diese Technik verwendet: github.com/watabou/pixel-dungeon/blob/…
Oak

Antworten:

1

Eine Methode, die Sie ausprobieren könnten:

Erstellen Sie eine Textur mit einem Pixel für jede Kachel (auf dem Bildschirm sichtbar). Stellen Sie dann für jede Kachel das entsprechende Pixel auf Schwarz, 50% Grau oder Weiß ein und verwenden Sie diese Textur schließlich auf einem Quad, das die gesamte Szene mit einer Multiplikationsmischung abdeckt. Sie müssen sich keine Gedanken darüber machen, welche Ecke wie viele leuchtende / dunkle Nachbarn hat, und die OpenGL-Texturinterpolation (stellen Sie sicher, dass die Filterung auf GL_LINEAR und nicht auf GL_NEAREST eingestellt ist) sorgt für einen reibungslosen Übergang.

Das Beste daran ist, dass es auch jede Art von Beleuchtung ermöglicht, die Sie möchten, nur für den Fall, dass Sie eine 75% Grauzone oder irgendwo ein hellgrünes Licht wünschen.

Wenn Sie einen reibungslosen Bildlauf haben, müssen Sie entweder an den Texturkoordinaten des Quad herumspielen oder das Quad selbst verschieben, um die aktuelle Bildlaufposition der Unterkachel zu berücksichtigen.

Logan Pickup
quelle