Parallax heißt, dass entfernte Objekte sich langsamer zu bewegen scheinen als nahe. In Pixel Art baust du es aus Ebenen: Die nächste Ebene bewegt sich die meisten Pixel pro Frame, die fernste die wenigsten, zum Beispiel 4, 3, 2 und 1 Pixel. Damit die Schleife sauber läuft, nimm so viele Frames, wie die Leinwand breit ist.
Was Parallax ist
Stell dir vor, du sitzt im Auto. Die Gebäude an der Straße rauschen vorbei, während sich die Berge in der Ferne kaum bewegen. Das ist der Parallax-Effekt, und er gibt einer Animation Tiefe.
Warum das passiert
Jetzt kommt das Spannende: Das nahe und das ferne Objekt bewegen sich eigentlich gleich schnell. Aber dein Sichtfeld wird mit der Entfernung breiter. Ein fernes Objekt braucht also mehr Zeit, um es zu durchqueren, als ein nahes, und deshalb wirkt es langsamer.
Ebenen und Geschwindigkeiten
Parallax-Scrolling besteht aus Ebenen, die sich pro Frame um eine unterschiedliche Anzahl Pixel bewegen. Je näher die Ebene, desto mehr Pixel bewegt sie sich, also desto schneller ist sie. Meistens teilt man sie in Hintergrund, Mittelgrund und Vordergrund ein.
- Ebene 4, die Berge: 1 Pixel pro Frame, die langsamste.
- Ebene 3, die entfernten Gebäude: 2 Pixel pro Frame, doppelt so schnell.
- Ebene 2, die nahen Gebäude und die Straße: 3 Pixel pro Frame.
- Ebene 1, die Brücke und die Figuren: 4 Pixel pro Frame, viermal so schnell wie die Berge.
Den Loop schließen
Die Animation sollte nie mitten drin stoppen und zurückspringen. Sie sollte flüssig bis zum Ende laufen und von der anderen Seite wieder hereinkommen. Dafür muss die Anzahl der Frames der Breite der Leinwand entsprechen (bei horizontalem Scrolling) oder ihrer Höhe (bei vertikalem Scrolling). Die Animation oben ist 114 Pixel breit, also hat sie genau 114 Frames.
Probier es zuerst klein aus
Diese drei stammen aus der Challenge in meinem Kurs. Jede Leinwand ist 62 Pixel breit, also hat jeder Loop genau 62 Frames. Der Boden bewegt sich pro Frame um mehr Pixel als die Wolken, deshalb wirkt er näher. Mach selbst einen: ein paar Ebenen auf einer kleinen Leinwand, dann zähl die Frames.
So baust du es
Diese hier ist 320 Pixel breit, sie braucht also 320 Frames. Die zeichnet niemand von Hand. Ich habe das Platformer-Artwork in Ebenen aufgeteilt (Brücke, nahe Gebäude mit Straße und Wasser, entfernte Gebäude, Berge, Hintergrund) und ein Skript in Aseprite die Frames für jede Ebene erzeugen lassen, mit 50 Millisekunden pro Frame: 4 Pixel für die Brücke, 3 für die nahen Gebäude, 2 für die entfernten, 1 für die Berge.
Wenn du Spiele in Unity oder Godot machst, kann deine Engine Parallax für dich übernehmen. Trotzdem lohnt es sich zu wissen, wie man es im Sprite baut: für Prototypen, Konzepte und Art, die du teilen willst.