Subpixel-Animation

Was es ist

Bei einem kleinen Sprite ist die kleinste ganze Bewegung ein Pixel, und ein Pixel kann viel sein. Eine Figur mit 16 Pixeln, die zum Atmen ihre Brust um ein Pixel hebt, sieht aus, als hätte sie Schluckauf.

Subpixel-Animation umgeht das. Statt die Form zu bewegen, änderst du die Farbe der Pixel an ihrer Kante. Geht ein Randpixel von der Hintergrundfarbe zu einem Mittelton und dann zur vollen Formfarbe, scheint die Kante um ein Drittel Pixel nach außen zu kriechen, dann um zwei Drittel. Das Auge liest eine flüssige, kleine Bewegung.

Warum Artists es tun

• Sanfte Idles. Atmen, Schweben und Wippen wirken ruhig statt ruckig.
• Kleine Sprites. Bei 16 oder 32 Pixeln ist kein Platz für große Bewegungen, also zählen Bruchteile.
• Glätte ohne mehr Pixel. Sie verleiht Bewegung scheinbar mehr Auflösung, ohne in größerem Format neu zu zeichnen.

Häufige Fehler

• Zu viele Zwischenfarben. Fügst du nur für Kanten neue Farben hinzu, wächst die Palette und das Sprite wirkt verschwommen. Verwende Farben, die schon in deinen Rampen sind.
• Es für große Bewegungen verwenden. Ein Laufzyklus oder ein Schwerthieb liest sich mit klaren Posen auf ganzen Pixeln besser.
• Uneinheitliche Kanten. Wenn eine Seite einer Form Subpixel-Stufen nutzt und die andere springt, scheint sich die Form zu dehnen.
• Flackern. Ein Pixel zwischen Frames ohne klare Richtung hin und her zu ändern, wirkt wie Rauschen statt wie Bewegung.

So machst du es von Hand

1. Zeichne die Start- und Endpose, ein Pixel voneinander entfernt.
2. Füge dazwischen ein oder zwei Frames ein, in denen sich nur Randpixel ändern.
3. Führe jedes Randpixel, das von der Bewegung überdeckt wird, durch eine Zwischenfarbe aus der Rampe.
4. Spiel den Loop in Spielgeschwindigkeit und mit 1×-Zoom ab. Passe das Timing an, bevor du mehr Frames hinzufügst.
5. Halte jedes andere Pixel des Sprites still, damit die Änderung als Bewegung der Kante wirkt.

Wo Pixor passt

Pixors Style-Node Subpixel-Bewegung zeigt ein Teil, das sich um weniger als ein Pixel pro Frame bewegt, in seinen Randpixeln, so wie ein Artist es täte. Darüber hinaus hält Pixor eine gerenderte Animation ruhig genug, dass sich Subpixel-Details lohnen. Der Pivot ist in jedem Frame und auf jeder Seite auf ein Pixel fixiert, sodass der Körper nicht zittert. Lichtstufen werden gehalten, bis sich eine Oberfläche klar dreht, Dithering haftet an der Oberfläche, und ein Bereinigungsdurchgang entfernt Einzelpixel und Linien, die nur einen Frame lang erscheinen. Pixor misst auch das Flackern über einen Clip.

Von dort exportierst du nach Aseprite, wo jede Action und Seite ihren eigenen Tag hat, und fügst Subpixel-Details auf einer eigenen Ebene hinzu. Beim Neurendern bleiben die handgemalten Ebenen auf ihren Frames.

Verwandt

• Mixels: warum Bewegungen auf dem Pixelraster bleiben sollten
• Vorgerenderte Sprites
• Animation, Aseprite und das Export-Handbuch