Was ist das? Wie geht das?

Verläufe erstellen

Farbverlauf · Graustufenverlauf · Verlaufsrichtung ändern · Hotspot-Verlauf · Fading


Alphakanäle
Bild 1: Alphakanäle
Bump Maps
Bild 2: Bump Maps
Fading-Masken
Bild 3: Fading-Masken

Im Zusammenhang mit dem Programmieren des Laders 4Bit&Fade fiel uns auf, dass wir in GoDot an manchen wichtigen Stellen relativ häufig mit echten Graustufenbildern arbeiten (um damit andere Bilder zu beeinflussen), aber nirgends erklären, wie man an solche Graustufenbilder herankommt. Mit diesem Tutorial soll diesem Mangel Abhilfe geschaffen werden.

Wissenswert

Die Graustufen in Dateien, die in GoDot als Alphakanäle, Bump Maps oder fürs Fading (oder für den Spezialfall Stereogramme) eingesetzt werden, sind dazu da, die Bilder in GoDots Speicher gezielt zu beeinflussen. Die Graustufen steuern regelrecht die Veränderung der Pixel im bearbeiteten Bild. Das ist der tatsächliche Sinn solcher Graustufendaten. Sie stellen keine selbständigen Bilderzeugnisse mit eigenem Anspruch an ästhetische Qualität dar. Mit ihren Inhalten wird nur die ästhetische Qualität anderer Bilder beeinflusst.

In den drei genannten Anwendungsbereichen geht es darum, im zu bearbeitenden Bild einen erkennbaren Übergang zwischen einem definierten Zustand hier und einem ebenso definierten Zustand dort zu erzeugen, z.B. ein Übergang von hell nach dunkel oder von braun nach weiß. Solche kontinuierlichen Übergänge nennt man Verlauf (auf Englisch: Gradient). Dieses Tutorial soll zeigen, wie man für seine Zwecke solche Verläufe gezielt herstellen kann.

Hinweis: Alle Graustufenbilder auf dieser Seite sind mit dem Saver GIF/Gray16 entstanden. Auf einem C64 sieht man diese Graustufen als Falschfarben (s. Bild 21).

Erforderliche Werkzeuge: Gradient · ClipWorks · 4Bit&Map · 4Bit&Fade · Random · Smear · Spin · MoveClip · DrawMask · MaskTo4Bit · Blur High · ApplyMap · DynaRange


Aber zuerst der

Farbverlauf

Das Problem mit einem brauchbaren Verlauf ist, dass er kontinuierlich sein muss. Kontinuierlich bedeutet hier, dass er optisch möglichst ohne sichtbare Abstufungen erscheinen sollte. Das bekommt man gut hin, wenn der Farbbereich, in dem man sich bewegt, hoch aufgelöst ist. Auf den C64 trifft gerade diese Voraussetzung für gute Ergebnisse nicht zu. Schauen wir uns den oben vorgeschlagenen Verlauf von braun (über fünf weitere Farben - rot, orange, hellrot, hellgrau, gelb) nach weiß über 256 Stufen an (das ist die Auflösung, die z.B. ein GIF-Bild bietet) und vergleichen mit dem, was mit dem C64 möglich ist:

Roter Farbverlauf 256 Stufen
Bild 4: Rötlicher Farbverlauf mit 7 C64-Farben über insgesamt
256 Zwischenstufen
Roter Farbverlauf auf dem C64
Bild 5: Derselbe Farbverlauf (mit 7 C64-Farben) auf dem C64, der ja
nur über sechs Farben aus dem rötlichen Spektrum verfügt (purpur
und die im Bild sichtbaren), Zwischenstufen sind nicht möglich.

Das ist deutlich, oder? Von "möglichst nicht sichtbaren Abstufungen" keine Spur. Man kann noch nicht einmal überhaupt von einem Verlauf sprechen. Das Problem selbst ist auf dem C64 mangels Farbvielfalt nicht lösbar. Aber: man kann es umgehen, indem man dem Auge des Betrachters vortäuscht, man hätte mehr Farben zur Verfügung als nur diese sieben. Das erreicht man durch Aufrasterung: Dicht beieinander liegende Punkte verschiedener Farben mischen sich im Auge und erwecken den Eindruck einer nicht vorhandenen weiteren Farbe. Diese Technik der Aufrasterung (englisch: Dithering) steht auch in GoDot zur Verfügung. Im folgenden Bild sieht man ein mit GoDot-Mitteln (mit Gradient) erstelltes Ergebnis. Das Bild enthält tatsächlich ausschließlich sieben Farben, genau wie Bild 5!

Roter Farbverlauf 16 Stufen
Bild 6: Rötlicher Farbverlauf über 7 C64-Farben (gerastert)

Hierfür stellt man den Screen-Modus auf Hires, die Anzahl Farben hinter Colors auf 7 (beides in Screen Controls), setzt Dith (in Color Controls) auf Pattern, öffnet mit Palette die Palettenbearbeitung (ebenfalls in Color Controls), setzt die fünf weiter oben bereits genannten Farben ein (und dazu als erste braun, als letzte weiß), übernimmt diese Einstellung (Accept) und aktiviert dann Gradient (auf Execute in Image Operators klicken, natürlich nachdem man zuvor Gradient installiert hat). Nach Abschluss des Prozesses (ein weißer Strich wandert solange im Preview-Fenster nach unten), setzt man die Anzahl Farben wieder auf 16, resettet in Palette die für den Verlauf geänderte Farbeinstellung auf Default und rendert das Bild (mit Display). Das ergibt nebenstehenden Screenshot, der tatsächlich fast so aussieht wie der Farbverlauf über 256 Stufen in Bild 4 (eine Anwendung s. im Tutorial zum Beschriften).

Es kommt bei der Erstellung eines Verlaufs mit C64-Mitteln also darauf an, die wenigen vorhandenen Farben möglichst stark aufzurastern, um gelungene Farbübergänge zu schaffen. Eine gut taugliche Möglichkeit ist der eben beschriebene Dither-Operator, der bei Gradient zur Anwendung kam.

nach oben


Und nun endlich zum

Graustufenverlauf

Mit Graustufen meinen wir hier nicht die fünf Graus, die in der C64-Palette zu finden sind. Die muss man eher wie Farben behandeln, um damit einen Verlauf zu erzeugen (siehe oben unter Farbverlauf). Auch die von der C64-Hardware gelieferten analogen neun Graustufen des VIC II sind hier nicht gemeint. Vielmehr ist GoDot mit seinem 4Bit-Datenformat von vornherein so konzipiert, dass die 16 Farben des C64 auch als Graustufen interpretiert werden können. Daher die geänderte Anordung der Farben in GoDot. Betrachtet man die C64-Farben auf diese Weise als Graustufen, ergeben sich überhaupt erst GoDots Möglichkeiten der Einflussnahme mithilfe von Verläufen auf Bilder jeder Art.

Ein geditherter Graustufenverlauf über 16 Stufen mit Gradient sieht aus wie im folgenden Bild 7. Wer es etwas weniger gradlinig haben will, bearbeitet Bild 7 mit Smear (6 mal) und OddSwap und erhält Bild 8. Und in Bild 9 sieht man einen waagerechten Verlauf, diesmal erzeugt, mittels Gradient wie gehabt, mit dem Raster Halftone (PatternEd), dann nach rechts gedreht mit TurnScreen, und - weil dabei nur 200 Pixel Breite übrig bleiben - auf 320 Pixel gestreckt mit ClipWorks/Zoom bei der Einstellung Row: 0, Col: 0, Wid: 25, Hgt: 25.

Graustufenverlauf über 16 Stufen
Bild 7: Gerasterter Graustufenverlauf über 16 Stufen (Graustufenbild)
Graustufenverlauf über 16 Stufen
Bild 8: Graustufenverlauf (16 Stufen), Zufallsraster (Graustufenbild)
waagerechter Graustufenverlauf über 16 Stufen
Bild 9: Waagerecht geht auch (Dither: Halftone, Graustufenbild)

Vielleicht habt ihr es schon gemerkt: das Ergebnis von Gradient füllt immer den ganzen Canvas (die ganze Zeichenfläche). Schmalere (oder einfach: andere) Verläufe müssen durch zusätzliche Bearbeitung aus diesem Ergebnis herausentwickelt werden. Problem dabei ist, dass die Rasterung erhalten bleiben muss, damit der Eindruck des Verlaufs nicht verloren geht.

Die noch fehlende Rasterung erreicht man nun mit Membrane und Scroll und dem Lader 4Bit&Mask: zuerst den Canvas als 4Bit abspeichern (vorzugsweise als Undo 4Bit), in Membrane eine 50%-Hires-Maske erstellen (und ab jetzt nicht mehr rendern, sonst zerstört man sie!), mit Scroll das Bild um die halbe Zielhöhe nach unten versetzen (bei Zielhöhe 6 also 3 Pixel), mit 4Bit&Mask (Use Mask: yes und Get 4Bit) das abgespeicherte Bild wieder nachladen und schließlich mit Scroll den Ausgangszustand wiederherstellen (im Beispiel: 3 Pixel nach oben scrollen). Jetzt kann man rendern. Wenn man das Ergebnis dann noch nach unten im Bild kopiert (ClipWorks, MoveClip) und dort auf den Kopf stellt (Flip&Mirror/Flip), kommt Bild 10 dabei heraus. In Bild 11 kann man erkennen, wie das aufgetragene Membrane-Raster aussieht.

gespiegelter Verlauf
Bild 10: Ein schmaler, gespiegelter Verlauf, Anwendung bei Sirds
(auf der Seite dort ganz unten; Graustufenbild)
Vergrößerung
Bild 11: Eine starke Vergrößerung der linken oberen Ecke von Bild 10:
So sieht der gerasterte 3-Pixelversatz dann aus (Graustufenbild)
horizontaler Verlauf
Bild 12: Durch Drehung sind auch Verläufe von links nach rechts
möglich. Dieser Verlauf ist aus Bild 10 entstanden. (Graustufenbild)

nach oben


Verlaufsrichtung ändern

Eine weitere Eigenschaft von Gradient haben wir auch schon mitbekommen: Die Verläufe gehen immer von oben nach unten, genauer: der Anfang der eingestellten Palette wird beim Rendern des Verlaufs zuerst verwendet, das Ende zuletzt.

Wenn man das anders herum haben möchte, hat man vier Möglichkeiten: Man verwendet die INV-Funktion in Gradient (die einfachste und schnellste Alternative), man definiert die Palette neu (aufwendig), man führt Negative aus (schnell, aber nur für Graustufenverläufe geeignet) oder man stellt mit Flip&Mirror/Flip den Canvas überkopfs (schnell).

Einen von links nach rechts ausgerichteten Verlauf haben wir weiter oben (in Bild 9) bereits kennengelernt. Hierfür drehen wir mit TurnScreen den ganzen Bildschirm um 90° nach links oder rechts (sofern uns eine REU zur Verfügung steht, sonst drehen wir einfach mit TurnClip einen einzelnen Streifen der Breite 1, und vervielfachen danach diesen Streifen mit TileClip/Snap to Border über den ganzen Canvas). Der Nachteil beim Drehen ist jedoch, dass der C64-Bildschirm nicht quadratisch ist. Gedreht wird aber nur der größtmögliche quadratische Teil des Canvas (200×200 Pixel), sodass nach dem Drehen auf der rechten Seite 120 schwarze Pixel entstehen. Die füllen wir entweder auf, indem wir den quadratischen Teil mit ClipWorks/Zoom oder StretchClip nach rechts strecken (wie in Bild 9), oder wir verschieben mit Scroll den Verlauf an eine andere, vielleicht besser passende horizontale Position (und füllen links per ClipWorks/ClrClp mit der ersten Graustufe des gedrehten Bereichs auf, s. Bild 12).

Beliebig geneigte Verläufe kann GoDot auch, aber leider steht dafür kein Modifier zur Verfügung, der den ganzen Canvas drehen würde. Wir müssen vorliebnehmen mit Spin, das zwar beliebig dreht, aber nur einen kreisförmigen Ausschnitt des Canvas bis maximal 200 Pixel Durchmesser. In diesem kreisförmigen Bereich müssen wir dann ein geeignetes Clip-Rechteck definieren, mit dem schließlich MoveClip den schrägen Verlauf zusammenbauen kann. Als sehr brauchbar hat sich ein Clip mit den Werten Row: 5, Col: 10, Wid: 20, Hgt: 15 erwiesen.

diagonaler Verlauf
Bild 13: Ein diagonaler Verlauf, im Text wird beschrieben, wie er
erzeugt werden kann. (Graustufenbild)

Für Bild 13 haben wir einen ungerasterten Verlauf mit der Zielstärke 8 (pro Streifen) hergestellt (wie das geht: siehe oben unter Informationen). Da dieser Verlauf ja von oben nach unten geht, wir ihn aber von links nach rechts brauchen, drehen wir ihn mit TurnScreen bzw. TurnClip/TileClip wie oben beschrieben. Bei TurnScreen landet das Ergebnis am linken Rand und wir müssen es mit Scroll nun mittig verschieben, damit Spin seine größtmögliche Wirkung entfalten kann (Scroll/Set Amount: 48, zweimal Execute). Bevor Spin zur Anwendung kommt, füllen wir den links entstandenen schwarzen Bereich (12 Kacheln Breite) mit dem am weitesten links stehenden Graustufenwert des Verlaufs auf (ClipWorks/ClrClp mit weiß). Und jetzt Spin: Die Neigung in Bild 13 beträgt 45°, sie wird hinter Angle eingetragen (da die Drehung mathematisch negativ - nach rechts - erfolgen soll, mit dem Wert 360 minus 45, also 315). Ist das erledigt (Exec), folgt zunächst der Reparaturservice für die von Spin "vergessenen" Pixel (mit Tidy und PixelEdit) und dann ClipWorks mit den Einstellungen für den geeignetsten Clip (s. oben: Clip 5/10/20/15, am besten von Hand eingeben). Nun übernimmt MoveClip. Erstes Ziel: Row: 0, Col: 20, das ist die rechte obere Ecke (auch von Hand eingeben), Copy. Nächstes Ziel: Row: 10, Col: 10, noch einmal Copy. Wenn wir jetzt rendern, stellen wir fest, dass einige Stellen in der Diagonale noch aufgefüllt werden müssen (ebenfalls mit MoveClip), was ein bisschen genaues Hinschauen erfordert, aber nach ein paar Versuchen bestimmt klappt. Am Ende wird mit ClipWorks/ClrClp "aufgeräumt" (Reste löschen) und dann sind wir fertig (Bild 13 haben wir noch etwas linksverschoben und auf den Kopf gestellt): wir haben nun einen Alphakanal, wie unten in den Beispielen. Andere Neigungen verlangen andere Werte, da muss dann probiert werden.

nach oben


Hotspot-Verläufe

Hotspots definieren wir mal als Stellen im Bild von besonderer Wichtigkeit, und Hotspot-Verläufe sollen Verläufe sein, die von diesen Stellen radial (in alle Richtungen) ausgehen.

Ein Weg, solche Verläufe zu erstellen, allerdings ohne genauen Einfluss auf die Position der Hotspots, ist der Modifier Plasma (siehe Beipiele unten, Bilder 32 bis 35). Plasma generiert sehr feinstufige Übergangsmasken für 4Bit&Fade und kann dort sowohl für das Abdunkeln als auch für das Aufhellen eingesetzt werden.

Ein anderer, etwas aufwendigerer Weg, der aber erlaubt, dass man die Hotspots selbst definieren kann, führt über einen Teil von GoDots Maskierungswerkzeugen. Zuerst wird das zu bearbeitende Bild einfach gerendert (egal, in welchem Modus), damit wir dessen Bitmap erhalten. Diese Bitmap bearbeiten wir mit DrawMask: die Stellen, die den Hotspot bilden sollen, werden großflächig übermalt (Mode: Draw), die anderen ebenso großflächig gelöscht (Mode: Clear), siehe Bild 14. Hier soll der Baum einen Hotspot erhalten, der ganze Rest soll später zurücktreten. Dabei müssen nicht alle Kanten eines Hotspots sauber an den Hintergrund grenzen (in diesem Bild kann das Geäst des Baumes ruhig teilweise stehen bleiben), das schafft mehr Stufen im späteren Verlauf.

Bearbeiten einer Bitmap
Bild 14: Auf die Bitmap des Bildes
werden die Hotspots aufgemalt.
Der grüne Kreis ist der Malpinsel.
Verlaufsmaske
Bild 15: Mit MaskTo4Bit und
Blur High verwandeln wir die
Bitmap in eine Verlaufsmaske.
Soll der Hintergrund noch
durchscheinen, hebt man die
Helligkeit des Verlaufs mit
Balancing an (wie hier).
Hotspot mit dunkler Umgebung
Bild 16: Hotspot mit dunkler Umgebung mit 4Bit&Fade/Darken.
Hotspot mit heller Umgebung
Bild 17: Heller geht auch: mit 4Bit&Fade/Brighten. Hier haben
wir Balancing/Brightness nur um zwei Stufen angehoben,
damit die dunkelgraue Rinde des Baumes erhalten bleibt.

Die Bitmap verwandeln wir im nächsten Schritt mit MaskTo4Bit in ein 4Bit-Bild mit seinen potentiellen 16 Graustufen. Noch sind die Pixel schwarz und weiß, haben also noch den größtmöglichen Kontrast, den härtesten Übergang. Aber das weichen wir jetzt auf (wie schon im Tutorial über Beschriftungen beschrieben): Wir aktivieren dreimal Blur High, heben nun die Helligkeit des Verlaufs um zwei, drei Stufen an (Balancing/Brightness: 3 und ApplyMap), damit die Umgebung des Hotspots später durchscheinen kann, und führen nochmals dreimal Blur High aus. Das Ergebnis sieht man in Bild 15. Damit ist der Hotspot-Verlauf fertig und kann in 4Bit&Fade mit Darken oder Brighten angewendet werden (Bilder 16 und 17).

nach oben


Fading

Schon im vorigen Abschnitt über Hotspot-Verläufe haben wir das Fading eingesetzt, dort, um bestimmte Stellen im Bild hervorzuheben. Fading - allgemein gesprochen - ist ein Wort aus der Filmsprache und bezeichnet dort den Übergang zwischen zwei Szenen. Wird das Bild während des Übergangs abgedunkelt, spricht man von Schwarzblende, wird es aufgehellt, haben wir eine Weißblende. Fading in GoDot braucht man also zum Abdunkeln oder Aufhellen von Bildbereichen, wie in den folgenden beiden (von GoDot) animierten Bildern:

fade out
Bild 18: Abdunklung (GoDot-Animation)
Vergrößerung
Bild 19: Aufhellung (GoDot-Animation)
Basisdatei
Bild 20: Basis-Datei (Graustufenbild)
die Ecken
Bild 21: Die linke obere Ecke (Falschfarbenbild)

Die Animationen sollen zeigen, dass man schon allein mit einer Basis-Verlaufsdatei mehrere unterschiedliche Effekte ins Bild einbringen kann, in diesem Fall die unterschiedlich breiten Bildränder. Im oberen kleinen Bild ist diese Basisdatei zu sehen (Bild 20). Wie macht man so etwas?

Wie in den Informationen bereits dargestellt, kann man jeden Verlauf auf beliebige Ausmaße einstellen, hier haben wir eine Dicke von einem Pixel pro Graustufe ausgewählt. Die 16 Streifen umfassen nach dem Shrink-Vorgang also 2 Kacheln Höhe, die wir in ClipWorks einstellen (0,0,40,2). Durch ein nachfolgendes Negative erhalten wir sofort die gewünschte Transparenzfarbe (weiß) für den größten Teil des späteren Verlaufs und zusätzlich nimmt nun zum Rand hin die Helligkeit ab, auch wie gewünscht. Mit MoveClip kopieren wir diesen Clip an den unteren Rand und stellen ihn mit Flip&Mirror/Flip auf den Kopf. Das Ergebnis speichern wir als 4Bit (Undo) ab. Dann verkürzen wir die Breite des Clips auf 25 (ClipWorks/Wid) und drehen ihn mit TurnClip nach rechts. Er landet dadurch am linken Rand des Bildes, Ausmaße jetzt: 0,0,2,25. Auch dieser Clip wird mit MoveClip auf die rechte Seite des Bildes dupliziert und danach (mit Flip&Mirror/Mirror) gespiegelt. Als nächstes markieren wir (mit ClipWorks) den Bereich zwischen diesen beiden Graustufenstreifen als Clip (0,2,36,25) und laden mit 4BitGoDot/Load into Clip dorthinein das Zwischenergebnis von eben. Nun müssen wir noch die Ecken korrigieren, so dass sie so aussehen wie Bild 21 zeigt. Das geht nur von Hand, muss also mit PixelEdit (wie im Bild zu sehen) durchgeführt werden.

Danach markieren wir mit ClipWorks diese Ecke (0,0,2,2) und kopieren sie auf die rechte Seite (MoveClip), spiegeln sie (Mirror) und kopieren sie erneut, diesmal in die untere rechte Ecke. Dort stellen wir sie auf den Kopf (Flip) und kopieren sie ein letztes Mal, jetzt in die linke untere Ecke, wo sie wieder gespiegelt werden muss. Das Endergebnis (Bild 20) speichern wir als Basisdatei ab (4BitGoDot). Dieser Verlauf ist ungerastert.

Tipp: Ohne Rasterung ist die Anwendung in 4Bit&Fade nicht ratsam, die Abdunklungsstreifen bleiben auch nach der Anwendung eben Streifen, was nicht gut aussieht. In Bild 18 und 19 haben wir die Streifen mit zweimal Random und dann Smear so durcheinandergewirbelt, dass der streifige Charakter nicht mehr erkennbar ist.

Um nun aus der Basisdatei Verläufe mit weniger Übergangsstufen zu generieren, brauchen wir Balancing und ApplyMap (wie schon bei den Hotspot-Verläufen) und zusätzlich DynaRange. Wollen wir z.B. einen Verlauf über 8 Graustufen aus dieser Basisdatei herstellen, erhöhen wir in Balancing die Helligkeit auf 8 und fixieren das Ergebnis mit ApplyMap. Da dadurch alle Graustufen unter 8 verloren gegangen sind, verteilen wir mit DynaRange die übrig gebliebenen gleichmäßig über die Palette und erhalten damit das gewünschte Ergebnis: Ein Verlauf von acht 1 Pixel dicken Graustufen zwischen schwarz und weiß, je nach Anzahl der Graustufen also unterschiedlich breit (acht Graustufen überstreichen eine Kachel).

Mit so einer Basisdatei muss man nicht für jede Anzahl Graustufen eine eigene Rändermaske erstellen und spart sich Zeit.

nach oben


Beispiele:

Die Wirkungsweise einer Verlaufsmaske bei einem Alphakanal (4Bit&Map):

Alphakanal
Bild 22: Die Verlaufsmaske, erzeugt mit Gradient, Spin und
MoveClip
Alphakanal neg
Bild 23: Alphakanal: Negative zuerst (Graustufenbild, schwarz ist
transparent, je heller desto undurchlässiger)
Alphakanal pos
Bild 24: Alphakanal: Positive zuerst (Graustufenbild, weiß ist
transparent, je dunkler desto undurchlässiger)
Original 1
Original 2
Bild 25 u. 26: Die Vorlagen (in dieser
Reihenfolge).

Die Wirkungsweise einer Verlaufsmaske bei einer Bump Map (ebenfalls 4Bit&Map):

Bump Map
Bild 27: Eine Verlaufsmaske, erzeugt mit Emboss (mittelgrau ist
transparent, dunkler dunkelt ab, heller hellt auf)
Bump 1
Bild 28: verwendet als Bump Map in 4Bit&Map
 
Bump 2
Bild 29: noch eine Bump Map (gedreht)
 
Bump3
Bump 4
Bild 30 u. 31: und noch welche

Die Wirkungsweise einer Verlaufsmaske beim Aufhellen/Abdunkeln (Fading mit 4Bit&Fade):

Plasma
Bild 32: Die Verlaufsmaske, erzeugt mit Plasma (weiß ist
transparent)
aufgehellt
Bild 33: Brighten: die dunklen Stellen in der Maske hellen auf, je
dunkler desto mehr, weiß ist transparent.
abgedunkelt
Bild 34: Darken, die dunklen Stellen in der Maske dunkeln ab, je
dunkler desto mehr, weiß ist auch hier transparent.
Original
Bild 35: Die Vorlage (siehe auch
die Bilder 14 bis 17).

nach oben


zurück

Arndt Dettke
support@godot64.de