Unteres Fach, hinter der Zierbordüre links, unter den Knöpfen: Pixel Art!

Ich habe diesen Hintergrund als Lehrobjekt gewählt, weil er komplett mit der Maus entstanden ist. Keine Vorzeichnung, kein Tabelett, nichts gescannt. Mit anderen Worten: kein Talent notwendig, sondern nur Ausdauer.
Als Programm taugt eigentlich alles, was Ebenen unterstützt und Pixel kennt. Ich habe Photoshop 7 benutzt (Bleistift/Pencil 1px), aber Paint .net, Gimp, GraphicsGale etc. können das ebenso gut.

Der Beginn

Fangen wir also an. Zuerst sollte man sich über die Abmessungen Gedanken machen. Unter diesem Bild muss noch Platz für eine LucasArts Verben-GUI bleiben, diese benötigt genau 58 Pixel in der Höhe. Also darf das tatsächliche Bild nicht größer als 320×142 px werden. Ist das geklärt, fangen wir wirklich an.

Ich habe mich für einen schwarzen Hintergrund entschieden, weil das fertige Werk überwiegend dunkel ist, bzw. es sich um einen geschlossenen Raum handelt. Für Landschaften würde ich wahrscheinlich mit hellblau anfangen, im Wald mit dunkelgrün.

Auf die Leinwand platziere ich als nächstes die Spielfigur, um ein Gefühl für die Größenverhältnisse zu bekommen.

Nun kommt vielleicht der wichtigeste Teil: das Grundgerüst. Wenn das nicht stimmt, ärgert man sich den Rest des Bildes. Eine kleine Bleistift/Kugelschreiber Skizze kann helfen, um diesen Teil zu beschleunigen.

Ha! Jetzt hab’ ich natürlich geschrieben: “Zettel und Stift? Braucht kein Mensch”. Aber es geht wirklich schneller, wenn man sich vorher aufkritzelt, wie das Bild aussehen soll. Das kann ja auch gerne ein Lageplan oder so sein – es ist nur wichtig, dass man in etwa weiß, was man will.

Hier also das Ergebnis meiner Bemühungen:

Man sollte  sich in dieser frühen Phase auch Gedanken über die Lichquellen machen.

Die Perspektive ist nicht sonderlich aufregend oder kompliziert. Als Hilfestellung habe ich auf einem seperaten Layer (Ebene) Hilfslinien gezeichnet. Das sieht dann so aus:

Die Horizontlinie sollte man dabei auf keinen Fall vergessen.

Am unteren Rand sieht man auch schon, dass ich die Palette vorbereitet habe.

Die Palette

Beim Pixeln nutze ich eigentlich nie die Palettenverwaltung der einzelnen Malprogramme, ich finde es wesentlich übersichtlicher, die Palette direkt in das Bild zu malen. Idealerweise nimmt man hier auch einen eigenen Layer.

Für eine bessere Übersicht erstelle ich für jeden Bereich des Bildes eine eigene Palette, die Farben mische ich nicht mit RGB sondern mit HSB (Farbton/Hue, Sättigung/Satuation und Helligkeit/Brightness). Hier ein Beispiel:

Ich beginne mit der dunkelsten Farbe, dann erhöhe ich die Helligkeit und verringere die Sättigung. Das ganze wird wiederholt, bis man ausreichend mit Farben versorgt ist.

Grundierung

Sind jetzt alle Zweifel beseitigt beginnt die grobflächige Grundierung. Hier sei zur Farbwahl noch erwähnt, dass sich die Farben möglichst nicht beißen sollten. Macht euch einfach frei von: Stuhl = Holz = Braun, Hose = Jeans = Blau oder Wand… äh… ich hab nur weiße Raufaser zu hause.

Bei http://kuler.adobe.com/ gibt es unzählige Palettenmöglichkeiten und einen Farbenmischer (links auf ‘Create’ klicken), mit dem man zusammenpassende Farben ermitteln kann. Ich habe mich bei der Wand für ein mattes Grün entschieden.

Auch habe ich die beiden Lichtquellen hinzugefügt. Die Lampe auf der rechten Seite hatte ich in der Planungsphase gar nicht auf der Rechnung. Beim Kolorieren ist mir dann aber aufgefallen, dass der rechte Bereich sonst einfach schwarz bleiben müsste – also *zack*, Lampe. Auf dem Boden sieht man auch schon eine Textur, die habe ich in Wirklichkeit aber viel später hinzugefügt (mit “Rauschen hinzufügen).

Ich versuche immer zu vermeiden, dass große, freie Flächen entstehen. Die Wand in diesem Bild ist so ein Vertreter. Ursprünglich war sie komplett in oliv-braun gehalten und sah unglaublich langweilig aus, also sind für’s erste grünen Ränder hinzugekommen. Bei Ratlosigkeit kann man gerne Photos zum gleichen Thema zu suchen. Zum Beispiel hier in den Kategorien Marine, Bundeswehr, Krankenhaus etc. Flickr ist voll mit guten Ideen.

Mit den grünen Streifen ist diese Riesenfläche schon mal etwas bezwungen. Im nächsten Schritt habe ich noch Türen eingebaut und die Wand in Platten segmentiert.

Für die Platten musste ich im unteren Bereicht erstmal üben, hier ist es wieder von Vorteil zu wissen, woher das Licht kommt.

Die Balance

Jetzt ist zwar die Wand entschärft, dafür wirkt nun der obere Teil sehr leer. Das Problem hat sich also verlagert und es muss wieder Abhilfe geschaffen werden.

Was hängt nun an Decken? Hmm… vielleicht ein Kompressor?

Ich habe zuerst mit einer grünen Kiste angefangen und dann versucht, ein paar Details herauszuarbeiten. Jetzt klebt immerhin ein Kompressor unter der Decke. Der muss ja an irgendwas angeschlossen sein… Rohre! Die erwartet man sowieso in einem Keller/Verließ. Also zimmere ich von hinten nach vorn ein paar Rohre an die Decke:

Das “faule” Rohr, ein Balken im Hintergrund.

Das räumliche Rohr, dass auch die linke Wand miteinbezieht.

Die letzten Rohre, die am nähesten am Betrachter liegen. Außerdem kann ich nun den Schattenwurf der Rohre andeuten.

Jetzt kippt das Bild nicht mehr und wir können uns um die Details kümmern.

Flächen füllen

Die rechte Wand ist noch sehr kahl und auch in der Mitte gibt es Platz zu füllen. Da der rechte Teil ohnehin eine Zelle werden soll, habe ich mich für eine Pritsche und ein Pfütze entschieden. Die Wand selbst hat ein “komisches Muster” bekommen. Ich weiß selbst nicht so genau, was das sein soll, aber in StarWars ist auch immer komisches Zeug an den Wänden

Für den Maßstab der Pritsche habe ich den Häftling als zusätzliche Ebene eingefügt, so kann man auch gut den Abstand zum Boden abschätzen.

Betrachten wir das Bild wieder als Ganzes, so fällt jetzt die kahle Fläche in der Mitte auf – Zeit für einen Schreibtisch. Je nach Muße könnte man auch eine Nische einbauen oder anderes Mobiliar.

Der Schreibtisch bietet noch den Vorteil, dass ich eine Weltkarte drüber hängen kann. Mit einem großen Schrank wäre wahrscheinlich nichts gewonnen, weil das wieder eine kahle Fläche wäre.

Wie dem auch sei, eine weitere freie Fläche gibt es noch. Diesmal ist es die Trennwand in der Mitte. Hier habe ich Regal eingeplant und weil die Zelle auf der rechten Seite wahrscheinlich ein Frischluftproblem bekommen würde, setze ich noch ein Lüftungsgitter darüber.

Die Jagd nach freien Flächen ist beinahe vorrüber. Im oberen Teil des Bildes kann man noch sehen, dass ich ich ein Lüftungsgitter eingebaut habe, sowas ist immer schnell zu pixeln und passt gut zu den Rohren. Von der Komposition her würde ich sagen, das wir gut davor sind.

Man soll so einen Hintergrund ja auch nicht überfrachten – Hauptsache, dass alles einigermaßen balanciert ist. Für das Spiel, für das das Bild entstanden ist, fehlt nun noch ein Kummerkasten und Telefon. Auch hier ist der Schreibtisch eine gute Wahl, weil wieder beide Gegenstände zu ihm passen. Eine Turbiene oder ein Fahrradständer wäre hier wieder Käse.

Was noch an diesem Bild auffällt, ist die Sterilität. Abgesehen von der Pfütze ist der Raum quasi unbenutzt. Um hier der Glaubwürdigkeit nachzuhelfen, habe ich ihn rosten lassen. Das geht am besten, wenn man wieder einen Layer nimmt und dort mit Rostfarbe (hier die Farbe von der Pritsche) und geringer Deckkraft loslegt. Fast jedes Malprogramm bietet die Möglichkeit, die Deckkraft eines Pinsels einzustellen, ich habe hier 30% Deckkraft genommen.
Um den Rost überzeugend anzubringen muss man sich auch überlegen, wo Rost entsteht. Er breitet sich z.B. gerne von Ecken oder Kanten aus. Auch Rohrmündungen bieten eine gute Angriffsfläche.

Hier das vorläufige Ergebnis:

Das sieht doch schon wesentlich überzeugender aus. Diese atmosphärischen Kniffe sollte man möglichst spät einbauen. Falls man doch noch was ändern muss, stören Rost und Schatten ungemein. Gerade bei nachträglichem Schattenwurf muss man vieles von vorne zeichnen.

Objekte

Bei Adventures kommt es durchaus mal vor, dass man den Hintergrund “manipulieren” kann: also Gegenstände mitnehmen oder Türen öffnen, so auch hier. Damit es hier keine Probleme gibt, sollten diese Objekte dringend auf eigene Ebenen gepixelt werden. Ich erstelle die Türen immer so, dass die offene Tür durch ein Objekt dargestellt wird. Außerdem soll es in dem Spiel ein paar Clipboards geben, die mitgenommen werden können.

Hier das Bild mit den Objekten:

Und zur Verdeutlichung mit einer farbigen Ebene dahinter:

Diese Ansicht nutze ich auch immer, um die Objekte dann zu importieren.

Der letzte Schliff

Jetzt sollte soweit alles fertig sein. Der Nachteil an meiner Farbenmischerei ist allerdings, dass die Bilder nicht unbedingt vor Kontrast sprühen. Deshalb experimentiere ich am Ende gerne mit Bildeffekten (Sättigung, Kontrast etc).

Zum Schluss noch die Paletten entfernt (und ich habe die linke Treppe auch noch etwas verdünnt) und das Werk ist bereit, ins Spiel eingebaut zu werden.

Bei dem Spiel handelt es sich übrigens um AeroNuts. Falls Ihr mal einen Versuch wagen wollt, nur zu

Eine kleine Checkliste

Zum Abschluss möchte ich euch noch eine kleine Checkliste mit auf den Weg geben, die die Planung von solchen Hintergründen erleichten soll.

• Spielt die Szene draußen oder drinnen
• Wo spielt die Szene (Fotos besorgen, Flickr oder Google)
• Von wo kommt das Licht
• Ist die Szene glaubwürdig
• Welche Leute/Charaktere spielen eine Rolle und wo stehen sie
• Welche Objekte werden benötigt, was gehört in den Hintergrund
• Passen die Farben zusammen

Und für die ganz kritischen Zeichner: Ist das Bild spannend, hat es Tiefe, stimmt die Komposition?

Ende

Also, vielen Dank für’s Lesen. Falls Ihr Fragen habt, immer gerne.

Eine Methode, die zumindest mir aus der Blockade geholfen hat, ist die Schneeflockenmethode. Kurz zusammengefasst beginnt sie damit, dass man sein Gesamtwerk in einen Satz quetschen soll. Darauf wird der Satz zu einem Absatz erweitert, der die markantesten Eckpunkte beschreibt.

Das sind an sich ganz einfache Aufgaben und trotzdem beschäftigt man sich mit dem Stoff auf einer anderen Ebene. Wenn man die Eckpfeiler wirklich ausformuliert hat, erhält man ein Grundgerüst, an dem man sich in Zukunft super orientieren kann.

http://www.schriftsteller-werden.de/kreatives-schreiben/wie-du-einen-roman-schreibst-die-schneeflocken-methode-1/

Erstmal gibt’s aber nur kleine Brocken aus der Entwicklerküche:
Anno 2008 hat KhrisMuc aus dem AGS Forum ein kleines Modul veröffentlicht (danke übrigens!), mit dem man Objekte in AGS auflösen konnte. Mittlerweile ist die Entwicklung bei uns auch mal so weit, dass ShattenReyze dieser Effekt gut zu Gesicht stehen würde.
Leider ist das alte Modul aber nicht über die Alpha-Phase hinaus gekommen, deshalb hat es mich noch einmal (schon wieder?) nach Skriptopia verschlagen, um das Ding neu zu schreiben.

Und so sieht’s aus:

Unglaublich hässlich ;D Aber bewegt schindet es deutlich mehr Eindruck, versprochen.
Jedenfalls funktioniert’s schon ganz gut und gibt auch viel Spielraum für interessante Puzzles. Konkret fallen mir z.B. Sanduhren ein. Auch irgendwelche Wiedersacher, die sich ganz langsam in die Quere des Spielers “beamen” hätten bestimmt was für sich.
Ich freu mich jedenfalls schon, Puzzles damit zu stricken

Ich -  vielleicht auch noch andere – werden hier in Zukunft Eindrücke aus der Entwicklung von ShattenReyze schildern. Außerdem gibt’s noch jede Menge Infos über das Spiel und die Story.

Es lohnt sich also, später noch mal reinzugucken.

Also nochmal, Viel Spaß auf den Seiten!