Subpixel-Animation: ein Atmen, kleiner als ein Pixel
Ein sanftes Idle auf einem kleinen Sprite ist entweder gar nicht zu sehen oder springt auf einmal um ein ganzes Pixel. Pixel-Artists zeichnen das Zwischenbild mit einem dunkleren Randpixel. Pixors Subpixel-Bewegung macht dasselbe, nur dort, wo sich eine Kante wirklich bewegt.
Beispielprojekt
Subpixel-Bewegung, eine Truhe, die um weniger als ein Pixel atmet: das .pixor-Projekt und sein Bibliotheksmodell (CC0). Das Sheet links ist, was es rendert.
Einsteiger · etwa 5 Minuten · oder in 92 Sekunden ansehen
1. Ein kleines Sprite
Öffne ein Modell: Das Tutorial nutzt Truhe aus der kostenlosen CC0-Bibliothek. Klick im Schritt Szene auf die Kamera Süd, stell die Ansicht Spiel auf Top-down-RPG und Breite und Höhe auf 32. Subpixel-Bewegung zählt vor allem bei kleinen Sprites, wo ein Pixel ein großer Schritt ist.
2. Ein Atemzug
Klick in der Gliederung auf die Truhe, damit die Bewegung sie bewegt, und wähle dann im Schritt Action Action hinzufügen › Pulsieren. Setz im Action-Graphen die Menge der Pulsieren-Node auf 0.025: Die Truhe wächst und schrumpft um 2.5 %, weniger als ein Pixel bei 32 Pixeln.
3. Aus: Es springt
Zoom im Schritt Style in die 2D-Ansicht hinein und schalte das Pixelraster ein (Shift+G). Die Kanten stehen ein paar Frames still und springen dann um ein ganzes Pixel.
4. Subpixel-Bewegung
Wähle im Style-Graphen die Node Bereinigung und setz im Abschnitt Bereinigung des Inspektors den Haken bei Subpixel-Bewegung. Wähle wieder die Node Ausgabe, um das fertige Sprite zu sehen.
5. An: Es atmet
Solange das Modell nur einen Teil eines Randpixels bedeckt (weniger als sieben Achtel), nimmt dieses Pixel die nächstdunklere Farbe seiner eigenen Rampe an und kehrt zurück, wenn das Modell es wieder bedeckt. Die Truhe atmet jetzt in Schattierungen statt in Sprüngen.
6. Nur die Kanten
Was sich geändert hat (D) markiert die Pixel, die sich vom vorigen Frame unterscheiden: nur die, über die die bewegten Kanten laufen. Der Flackeranteil eines Renders steigt mit eingeschalteter Einstellung etwas, weil diese Pixel sich absichtlich ändern.
7. Exportieren
Exportieren schreibt das Sheet wie gewohnt; die Zwischenpixel sind darin, in den Farben der Palette.
Von der Kommandozeile
pxr render chest.glb --size 32 --clip none --motion pulse:8:0.3 --subpixel
pxr project set game.pixor --subpixel--no-subpixel schaltet sie für ein Projekt aus.
Weiter
- Subpixel-Animation erklärt: woher die Technik kommt.
- Antizipation und Nachschwingen: das umgekehrte Problem, Bewegung, die mehr Gewicht braucht.
Fragen
Verändert die Subpixel-Bewegung die Silhouette oder die Kontur?
Nein. Nur Randpixel, die die bewegte Fläche teilweise bedeckt, ändern sich, und nur zur nächstdunkleren Farbe ihrer eigenen Rampe. Kontur, Silhouette und alle anderen Pixel bleiben genau, wie sie waren.
Sind die Zwischenfarben neue Farben?
Nein. Jede ist die nächste Stufe abwärts auf der Rampe, auf die die Schattierung das Pixel schon gesetzt hat, also ist jede Farbe eine aus der Palette.
Welchen Bewegungen hilft es?
Alles, was sich um weniger als ein Pixel pro Frame bewegt: atmende Idles, ein schwebendes Wippen, ein langsames Schwanken, ein Pulsieren. Eine schnelle Bewegung bleibt unberührt; sie ist ohnehin lesbar.
Was ist der Unterschied zur Node „Subpixel-Bewegung“?
Die Node im Style-Graphen arbeitet Frame für Frame und kann ein Teil in leere Pixel kriechen lassen. Diese Einstellung betrachtet den ganzen Clip und ändert nie die Silhouette.
Weiterlesen
- Antizipation und Nachschwingen: einem Sprung Gewicht geben
- Todeseffekte: Zerbrechen, Auflösen und Erscheinen
- Eine laufende Figur in 8 Richtungen
- Dein erstes Sprite in fünf Minuten
- Lichtvarianten: Nacht, Fackel, unter Wasser, Gift
- Eine Mixamo-Figur in acht Richtungen
- Eine sich drehende Münze
Probier es mit deinem eigenen Modell aus, kostenlos im Browser, oder hol dir die Vollversion.
Im Browser testen Pixor kaufen