Pixel-Tutorial für Anfänger (Sammlung)

Es gibt einfache Kniffe, mit denen man schnell zu eigenen Grafiken und eigenen Animationen gelangt. Hier soll eine Sammlung entsprechender Tipps entstehen, die drei ganz einfachen Grundsätzen folgt:

1. kein Vorwissen nötig
2. Praxisbezug
3. anschaulich erklärt

Natürlich darf jeder gerne etwas beitragen, ich mache einfach mal den Anfang - und zwar mit animierten Türen. Ich möchte eine Methode vorstellen, mit der man in sehr kurzer Zeit eine Animation einer Türöffnung erstellen kann.

http://file1.hpage.com/002672/73/bilder/tuer.gif

Alles, was man benötigt, ist ein beliebiges Grafikprogramm (selbst Paint reicht) und eine Türgrafik, die animiert werden soll. So geht's:
http://file1.hpage.com/002672/73/bil...urs_tueren.png
Schritt 1:
Wählt eine Türgrafik aus, die ihr animieren wollt. Tipp: Guckt vorher, ob die Türmaße auch den Kachelgrößen in eurer Makerversion entsprechen. Meine Tür hat die Abmessungen 32x16 Pixel (hier doppelt vergrößert dargestellt, damit man auch was erkennen kann) und passt damit ohne Probleme in alle Makerversionen, deren Gitternetz auf Grundfeldern von 16x16 Pixeln aufbaut.

Schritt 2:
Die Tür wird nach hinten wegschwingen, wodurch es zu einem perspektivischen Effekt kommt. Dem Betrachter kommt es so vor, als würde die Tür schmaler. Genau das pixeln wir nun. Da die Tür in drei Stufen animiert wird (Tür geschlossen - Tür halb offen - Tür ganz offen), benötigen wir drei Einzelbilder. Die geschlossene Tür haben wir bereits, die offene Tür entsteht, indem ihr die Türgrafik einfach schwarz ausmalt. Wir brauchen in dieser Methode also nur ein Zwischenbild, eben die halboffene Tür.
Wie macht man sie nun schmaler? Indem man die Hälfte der Pixel weglässt. Warum gerade die Hälfte? Weil wir bei dieser Methode nur ein einziges Zwischenbild benötigen. Im Bild der geschlossenen Tür sind noch alle Pixel da (Tür zu), im dritten Bild mit dem schwarzen Rechteck sind bereits alle Pixel weg (Tür auf), der Zwischenschritt besteht also aus exakt der Hälfte an Pixeln.
Löscht nicht einfach die linke Hälfte der Türgrafik, denn wir wollen ja keine Schiebetür, sondern eine aufschwingende Tür erstellen. Wie ihr sehr, habe ich jede zweite Pixelspalte gelöscht. Macht das auch bei euer Türgrafik.

Schritt 3:
Schiebt die verbliebenen Pixelspalten zusammen. Je sicherer ihr in eurem Grafikprogramm mit den Auswahl- und Kopierfunktionen umgehen könnt, desto schneller kommt ihr voran. Nicht nur hier, vielmehr generell.

Schritt 4:
Jetzt lassen wir die Tür aufschwingen. Da nur ein Zwischenbild gepixelt wird, brauchen wir den exakten Zwischenzustand der Tür zwischen geschlossen und offen. Ist die Tür auf, hat die Türkante einen 90°-Bogen beschrieben - einen rechten Winkel. Für das Zwischenbild benötigen wir demnach exakt die Hälfte, also 45°. Das ist eine sehr einfach zu pixelnde Linie. Jeder Pixel ist einfach eine Reihe höher als sein Nachbar in der vorhergehenden Pixelspalte.
Seht ihr die drei Pixel in Schritt 4 auf der Grafik? Die hängen diagonal über Eck zusammen. Genauso verschiebt ihr nun die verschmalerte Türgrafik aus Schritt 3. Bei mir geht die Tür links auf, also schiebe ich die linke Türenseite schräg hoch. Macht das jetzt Spalte für Spalte, bis eure Tür ebenfalls diese 45°-Verschiebung in die Höhe aufweist.

Schritt 5:
Einen Teil der aufgeschwungenen Tür soll man später nicht sehen können, damit die Illusion der RPG-Maker-Perspektive aufrecht erhalten bleiben kann. Die Tür schwingt hinter dem Türrahmen entlang, folglich muss alles von der Türgrafik abgeschnitten werden, was andernfalls den Rahmen überdeckte. Vergleicht die Abbildung einfach mit eurer Ausgangsgrafik und schneidet ab, was über deren Höhe hinausragt. Wupp, weg.

Schritt 6:
Setzt die entstandene Grafik auf eine Kopie des Bildes der offenen Tür, so dass beim Aufschwingen bereits der Teil des Raumes sichtbar wird, der nun nicht mehr von der geschlossenen Tür verdeckt wird. Ich habe eine ganz banale schwarze Hintergrundfläche eingesetzt, aber ihr könnt natürlich eurer Fantasie freien Lauf lassen. Ein sanftes Licht, ein blutüberströmter Fleischereikachelfußboden, ein Teppich - was auch immer hinter eurer Tür liegen soll, könnt ihr schon beim Öffnen aufschimmern lassen, indem ihr der Türgrafik eine kleine Vorschau einsetzt. Das kann im fertigen Spiel sehr effektvoll sein. Nur achtet darauf, sowohl der halboffenen als auch der offenen Türengrafik den gleichen Hintergrund einzusetzen.

Schritt 7:
Importiert alle drei Türgrafiken (geschlossen - halboffen - offen) in euer Projekt. Zersiedelt die Grafiken nicht, sondern baut euch thematisch sortierte Inseln gleichartiger Grafiken, damit ihr später beim Makern schnell alles findet, wenn ihr Türen, Laternen, Throne oder Zimmermädchen sucht und vergesst nicht, die Tür beim Öffnen auch mittels der Makerbefehle zu animieren, damit die Arbeit nicht für die Katz war.

Wenn ihr die Anleitung Schritt für Schritt durchgeht, fällt euch bestimmt auf, dass ihr an keiner Stelle wirklich zeichnen müsst und das ist auch der Sinn dieser Methode. Sie setzt kein Vorwissen voraus. Verschieben reicht. Ihr könnt damit so ziemlich jede geeignete Ausgangsgrafik als Animation in euer Projekt einarbeiten. Das sieht nicht nur schick aus, es geht mit jedem Mal auch immer schneller.