Animation und die Zeitleiste

Eine Animation ist ein Sprite mit mehr als einem Frame. Die Zeitleiste zeigt die Frames als Spalten und die Ebenen als Zeilen; jedes Feld, in dem sich eine Ebene und ein Frame treffen, ist ein Cel (So ist deine Arbeit aufgebaut).

Die Zeitleiste

Am oberen Rand der Zeitleiste:

Jede Frame-Spalte zeigt die Nummer des Frames und darunter, wie lange er in Millisekunden zu sehen ist: Klick auf das Nummernfeld, um eine neue Dauer einzutippen. Die Ebenenzeilen laufen links entlang, die oberste Ebene zuerst.

Im Raster zeigt ein Cel mit Inhalt einen gefüllten Punkt, und ein leeres Cel zeigt einen hohlen Punkt. Eine Linie verbindet verknüpfte Cels, also Cels, die sich ein Bild teilen. Fahr mit dem Zeiger über ein Cel, um zu sehen, zu welcher Ebene und welchem Frame es gehört und womit es verknüpft ist.

Frames

Das Menü Frame und ein Rechtsklick auf eine Frame-Nummer bieten alles rund um Frames:

• Frame > Neuer leerer Frame fügt nach dem aktuellen einen leeren Frame hinzu.
• Frame > Neuer leerer Frame davor fügt direkt vor dem aktuellen einen leeren Frame hinzu. So setzt du einen Frame vor Frame 1.
• Frame > Neuer Frame kopiert den aktuellen Frame (oder die ausgewählten Frames) samt seinen Cels. Auf einer durchgehenden Ebene wird stattdessen das Cel der Kopie verknüpft.
• Frame > Neuer verknüpfter Frame kopiert ihn mit verknüpften Cels, sodass die Kopien ihre Bilder mit den Originalen teilen: Zeichnest du auf einem, ändern sich beide.
• Frame > Frame löschen löscht den aktuellen oder die ausgewählten Frames (ein Sprite behält mindestens einen).
• Frame > Frames umkehren kehrt die ausgewählten Frames um, oder alle, wenn weniger als zwei ausgewählt sind.

Timing. Jeder Frame hat seine eigene Dauer, von 10 ms bis 65.535 ms (etwa 65 Sekunden, wie in Aseprite). Tipp sie in das Feld unter der Nummer des Frames ein oder nutze Frame > Frame-Eigenschaften.... Frame > Alle Frames auf aktuelle Dauer setzen... gibt jedem Frame die Dauer des aktuellen.

Farbe und Sperre. Frame > Frame-Eigenschaften... gibt einem Frame außerdem eine Farbmarkierung, die als Streifen auf seinem Kopf erscheint, damit du Schlüsselposen oder Frames, die noch Arbeit brauchen, erkennst, und eine Sperre. Ein gesperrter Frame (mit einem Vorhängeschloss markiert) lehnt Änderungen an seinen Cels ab und kann weder entfernt noch verschoben noch neu getimt werden, von Werkzeugen wie von Skripten. Hebe die Sperre im selben Dialog auf. Beides wird mit dem Sprite gespeichert und synchronisiert, aber .aseprite kennt kein Gegenstück dazu, daher gehen beide beim Export dorthin verloren. Skripte nutzen app.setFrameProps.

Neu anordnen. Zieh einen Frame am Griff, der neben seiner Nummer erscheint, oder wähl ihn aus und drück Alt mit ← oder →. Mehrere ausgewählte Frames bewegen sich gemeinsam: Zieh einen beliebigen davon, und die ganze Auswahl wandert als Block, wobei Frames, die nicht nebeneinanderliegen, in der Reihenfolge der Zeitleiste zu einem Abschnitt zusammengezogen werden. Halte beim Ablegen Alt, um die ausgewählten Frames stattdessen dort zu kopieren; die Kopien werden an der Ablagestelle eingefügt und werden zur Auswahl. In beiden Fällen ist es ein einziger Schritt zum Rückgängigmachen. (Beende zuerst die Wiedergabe.)

Tags folgen den Frames nach Position, wie in Aseprite: Frames, die du aus einem Tag herausziehst, verlassen ihn, und eine Kopie, die direkt hinter dem letzten Frame eines Tags abgelegt wird, tritt dem Tag bei, wie jeder neue Frame, der dort hinzugefügt wird.

Wiedergabe

Drück Enter zum Abspielen und Pausieren. Jeder Frame wird für seine eigene Dauer gezeigt, skaliert mit der Geschwindigkeitseinstellung; die Wiedergabe hält sich an die Uhr und überspringt einen Frame, wenn der Computer hinterherhinkt. Wie in Aseprite stoppt jede Bearbeitung oder der Beginn einer Zeichnung die Wiedergabe. Der Wiedergabemodus legt fest, wie Tags abgespielt werden:

Die Wiederholung eines Tags zählt jeden Durchgang, und jede Richtung eines Ping-Pongs ist ein Durchgang: Ein Ping-Pong-Tag mit der Wiederholung 2 spielt 1, 2, 3, 2, 1. Eine Wiederholung von 0 spielt einen Tag im Vorbeigehen einmal ab (ein Ping-Pong hin und zurück) und wiederholt ihn in einer Schleife, wenn er der abgespielte Tag ist. Tags laufen in Exporten genauso, wie in Aseprite.

Um nur einen Tag abzuspielen, klick auf sein Band über den Frames (klick erneut, um zur ganzen Animation zurückzukehren). Er läuft in einer Schleife, und die Tags darin laufen auf ihre eigene Weise. Bei ausgeschalteter Schleife spielt er seine Wiederholungszahl ab und stoppt; das tut auch die ganze Animation an ihrem letzten Frame.

Das Vorschau-Bedienfeld spielt mit derselben Geschwindigkeit ab, sodass du die Animation beim Zeichnen beobachten kannst. Seine Schaltfläche 1:1 zeigt den Sprite in voller Größe, ein Sprite-Pixel pro Bildschirmpixel.

Tags

Ein Tag benennt einen Bereich von Frames („idle“, „walk“), damit du ihn einzeln abspielen und einzeln exportieren kannst. Wähl die Frames aus und drück die Schaltfläche Tag oder wähl Frame > Neuer Tag.... Der Dialog enthält:

• Name und Farbe;
• Von Frame und Bis Frame;
• Richtung: Vorwärts, Rückwärts, Ping-Pong oder Ping-Pong rückwärts;
• Wiederholen: wie oft er abgespielt wird, bevor die Wiedergabe weiterläuft; 0 wiederholt ihn endlos.

Zieh das Band eines Tags, um ihn zu verschieben, oder seine Enden, um seine Frames zu ändern. Per Tastatur gehst du mit Tab zum Band und drückst Alt+Left oder Alt+Right, um ihn um einen Frame zu verschieben, oder gehst mit Tab zu einem seiner Enden und drückst Left oder Right. Doppelklick auf das Band oder nutze den Stift, der erscheint, wenn du darauf zeigst, um den Tag zu bearbeiten; mit einem Rechtsklick löschst du ihn. Wie in Aseprite deckt ein Tag Frame-Positionen ab: Ein Frame, den du aus einem Tag herausschiebst, verlässt ihn, einer, den du zwischen zwei seiner Frames ablegst, tritt ihm bei, und ein neuer Frame direkt nach dem letzten Frame eines Tags verlängert den Tag. Ein neuer Frame vor dem ersten Frame eines Tags gehört nicht zum Tag: Der Tag bleibt bei seinen Frames und rückt mit ihnen weiter.

Cels

Klick auf ein Cel, um es auszuwählen. Dann gilt:

• Shift+Klick wählt einen Bereich aus, Ctrl+Klick fügt ein einzelnes Cel hinzu oder entfernt es, und Ziehen von einem nicht ausgewählten Cel aus wählt ein Rechteck aus;
• ein Klick auf eine Frame-Nummer oder einen Ebenennamen wählt die ganze Spalte oder Zeile aus;
• Shift mit den Pfeiltasten erweitert die Auswahl, und Esc hebt sie auf;
• auf einem Touchscreen hältst du eine halbe Sekunde gedrückt und ziehst dann.

Sind Cels ausgewählt und die Zeitleiste hat den Fokus, wirken die üblichen Kürzel auf ganze Cels: Ctrl+X, Ctrl+C und Ctrl+V schneiden sie aus, kopieren und fügen sie ein, und Del leert sie. Dieselben Befehle stehen unter Bearbeiten > Cel und im Rechtsklick-Menü:

• Bearbeiten > Cel > Cels verknüpfen lässt die ausgewählten Cels jeder Ebene sich ein Bild teilen; Bearbeiten > Cel > Cels trennen gibt jedem wieder eine eigene Kopie (löst du das Cel, mit dem die anderen verknüpft waren, bleiben die anderen miteinander verknüpft).
• Zieh ausgewählte Cels, um sie zu verschieben, oder halte beim Ziehen Alt, um sie zu kopieren. Der Umriss wird grün, wo sie hinkönnen, und rot, wo nicht. Alt+Shift mit einer Pfeiltaste verschiebt sie um einen Schritt.

Um auf mehreren Cels gleichzeitig zu malen, zum Beispiel um denselben Umriss in jedem Frame zu korrigieren, schalte in der Leiste der Werkzeugoptionen Über Cels hinweg malen ein und wähl die Cels aus. Malen auf einem davon malt auf allen, als ein Schritt zum Rückgängigmachen; auch die Auswahl von Frame-Nummern oder Ebenennamen funktioniert. Gesperrte und ausgeblendete Ebenen werden übersprungen, und verknüpfte Cels werden nur einmal bemalt. Siehe Werkzeuge.

Cels gehen nur dorthin, wo sie dasselbe bedeuten: Pixel auf Bildebenen, Tiles auf eine Tilemap-Ebene mit demselben Tileset. Gesperrte und ausgeblendete Ebenen werden übersprungen.

Die Cel-Eigenschaften (Rechtsklick auf ein Cel) legen seine Deckkraft fest, die sich mit der der Ebene verbindet, seinen Z-Index, der es nur in diesem Frame um so viele Ebenen höher oder tiefer zeichnet (wobei jede Ebene und Gruppe zählt, wie bei Aseprite; es kann eine einfache Gruppe verlassen, aber keine Gruppe mit eigener Deckkraft oder eigenem Mischmodus), und seine Benutzerdaten. Verknüpfte Cels teilen sich eine Deckkraft und einen Satz Benutzerdaten (wie in Aseprite); der Z-Index gehört jedem Cel einzeln. Die Cels der Hintergrundebene sind immer völlig deckend, und die Cel-Deckkraft einer gesperrten Ebene lässt sich nicht ändern.

Tweening

Ein Tween zeichnet die Frames zwischen zwei Keyframes für dich: Er verschiebt, skaliert, dreht oder blendet das Bild des Start-Keyframes auf dem Weg zum End-Keyframe aus und zeichnet jeden Frame dazwischen als gewöhnliches Cel. Der End-Keyframe behält deine eigene Zeichnung. Weil die Zwischenbilder einfache Pixel sind, sehen Exporte, Onion Skin und Skripte gewöhnliche Frames, und Aseprite genauso, wenn du als .aseprite speicherst (die Einstellungen des Tweens reisen in den Benutzerdaten der Cels mit, sodass pxstud.io den Tween wieder erkennt, wenn du die Datei öffnest). Tweens funktionieren auf Bildebenen, nicht auf der Hintergrundebene.

Der Tween-Inspektor

Zeichne den Start- und den End-Keyframe auf derselben Ebene, wähl den Start-Keyframe aus und wähl Bearbeiten > Cel > Tween erstellen... (Shift+T oder Rechtsklick auf das Cel). Der Inspektor tweent ihn zum nächsten Cel dieser Ebene mit einer Zeichnung oder, wenn du mehrere Frames ausgewählt hast, zum letzten ausgewählten mit einer Zeichnung. Auf dem Start-Keyframe eines Tweens oder auf einem seiner Zwischenbilder geöffnet, bearbeitet er diesen Tween. Gibt es auf der Ebene keine spätere Zeichnung, endet eine Auswahl über mehrere Frames auf dem letzten ausgewählten Frame, auch wenn er leer ist (zum Ausblenden oder Wegploppen).

Der Inspektor ist ein Fenster, das du an seiner Titelleiste ziehen und offen lassen kannst: Du kannst weiterhin durch die Zeitleiste scrubben, zeichnen und rückgängig machen, während er da ist. Esc schließt ihn.

• Vorschau: Spielt den Start-Keyframe, die Zwischenbilder und den End-Keyframe in einer Schleife ab, mit den eigenen Dauern der Frames und mit den anderen sichtbaren Ebenen darum herum. Sie folgt deinen Änderungen, während du sie machst. Pausiere sie und geh mit den Schaltflächen darunter Frame für Frame weiter. Bei einem großen Sprite zeigt sie nur den Teil, durch den sich der Tween bewegt. Die Zeile daneben sagt, wie viele Zwischenbilder es gibt und in welchen Frames („6 Zwischenbilder, Frames 3–8“).
• Presets: fertige Tweens (siehe „Tween-Presets“ unten). Preset verwenden füllt das Formular; Anwenden macht es wirksam.
• Mehrere Ebenen: erscheint, wenn deine Auswahl mehr als eine Ebene mit einer Zeichnung auf dem Start-Frame umfasst (siehe „Mehrere Ebenen tweenen“ unten).
• Pose: Die Spalten Von und Ende legen fest, wo das Bild am Anfang und am Ende ist: Position X und Y in Pixeln, Skalierung X und Y (1 ist die Originalgröße, ein negativer Wert spiegelt es), Drehung in Grad (im Uhrzeigersinn; 360 ist eine ganze Umdrehung, 720 dreht also zweimal), Neigung X und Y in Grad und Deckkraft in Prozent. Skalierungsverhältnis sperren hält X und Y im Verhältnis, wenn du eines änderst. Auf kürzestem Weg drehen macht aus 350° einen Schritt von 10° zurück statt einer fast vollen Umdrehung; schalte es aus, um den langen Weg zu drehen. End-Keyframe angleichen setzt Position und Skalierung am Ende so, dass das Startbild dort landet, wo die Zeichnung des End-Keyframes ist, und in deren Größe. Ein neuer Tween beginnt damit ausgefüllt. Von zurücksetzen setzt Von auf keine Änderung zurück.
• Easing: wie die Bewegung schneller und langsamer wird. Jede kleine Kurve ist eine Wahl: Linear (gleichmäßig), Halten (bleibt stehen und springt dann zum End-Keyframe), Stufen (bewegt sich in gleichen Sprüngen; leg fest, wie vielen), und Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic und Bounce, jeweils als in (beginnt langsam), out (endet langsam) oder in-out (beides). Mit den Pfeiltasten wechselst du zwischen ihnen. Back hat ein Überschwingen, Elastic eine Amplitude und eine Periode (wie lang jedes Wackeln ist), und Bounce eine Anzahl Abpraller. Unter Erweitert: Easing pro Spur kannst du Position, Skalierung, Drehung, Neigung, Deckkraft oder der Farbspur ein eigenes Easing geben, zum Beispiel einen Bounce auf der Position, während die Überblendung gleichmäßig bleibt. Kurve zeichnen macht aus dem gewählten Easing eine Kurve, die du selbst bearbeitest (siehe unten).
• Keyframes: End-Keyframe wählt den Frame, auf dem der Tween endet; verschieb ihn und wende an, um den Tween zu verlängern oder zu verkürzen (Zwischenbilder hinter dem neuen Ende werden entfernt oder als einfache Cels behalten, wenn du darauf gemalt hast). Über mehrere Keyframes verketten erzeugt in einem Schritt einen Tween von jedem Keyframe zum nächsten, bis zu dem, den du wählst; Jeden Tween auf seinem End-Keyframe landen lassen gibt jedem seine eigene Pose „End-Keyframe angleichen“. Erweitern fügt mit diesen Einstellungen einen weiteren Tween vom End-Keyframe dieses Tweens zum nächsten Keyframe hinzu.
• Pfad: wie die Position wandert. Gerade; ein Bogen mit einer bestimmten Höhe (ein Sprung; negativ geht in die andere Richtung); eine Welle mit einer Amplitude, einer Anzahl Zyklen und einer Phase, bei der sie beginnt; ein Zickzack mit einer Amplitude und Zyklen; oder ein Wackeln von bis zu Amplitude Pixeln pro Frame. Ein Wackeln ist bei einem Seed jedes Mal gleich; Neu würfeln wählt einen anderen. Gezeichnet ist eine Route, die du auf der Leinwand zeichnest (siehe „Einen Bewegungspfad zeichnen“ unten). Am Pfad ausrichten dreht das Bild in seine Bewegungsrichtung, auf jedem Pfad. Pfad auf der Leinwand zeigen zeichnet die Route und einen Punkt, wo jedes Zwischenbild landet.
• Squash and Stretch: Dehnt das Bild entlang seiner Bewegung, solange es schnell ist, und staucht es quer dazu, wobei seine Fläche erhalten bleibt. 0 % ist aus.
• Pivot: der Punkt, um den sich Skalierung, Drehung und Neigung drehen. Klick auf eines der neun Quadrate (Ecken, Kanten oder Mitte des Cels des Start-Keyframes) oder tipp X und Y ein, wobei 0 der linke oder obere Rand ist und 1 der rechte oder untere. Mit Pivot in: Leinwand-Pixeln sind X und Y stattdessen ein fester Punkt auf der Leinwand, sodass sich mehrere Ebenen, die um denselben Punkt getweent werden, zusammen als ein Stück bewegen.
• Überblendung: wie Änderungen der Deckkraft aussehen (siehe „Dithering-Überblendungen und Überblendungen zum End-Keyframe“ unten). Alpha ändert die Deckkraft des Cels; Dithering lässt ganze Pixel durch ein Muster erscheinen oder verschwinden. In den End-Keyframe überblenden verwandelt das Bild in die Zeichnung des End-Keyframes.
• Farbe: Setz ein Häkchen bei Farbe animieren, um die Farben des Bilds über den Tween zu ändern. Farbton (Grad), Sättigung und Helligkeit (Prozent) funktionieren wie Farbton/Sättigung, und Tönungsstärke mischt jede Farbe zur Tönungsfarbe hin; jedes hat einen Wert für Von und einen für Ende. Das Easing der Farbspur ist das mit dem Namen „Farbe und Verlauf“ unter dem Easing pro Spur. Jedes Zwischenbild wird aus dem Bild des Start-Keyframes neu eingefärbt, sodass sich Änderungen nicht aufsummieren. Bei indizierten Sprites rasten die neu eingefärbten Pixel auf die nächste Palettenfarbe ein.
• Palettenverlauf (indizierte Sprites): Setz ein Häkchen bei Palettenindizes entlang eines Verlaufs verschieben, um Farben zu zyklen, ohne sie neu einzufärben. Pixel, die die Paletteneinträge Erster bis Letzter nutzen (der transparente Eintrag bleibt außen vor), rücken bis zum Ende des Tweens um Versatz Stellen entlang dieser Reihe vor, entweder umlaufend über die Enden hinaus oder an ihnen stoppend. Andere Pixel bleiben, wie sie sind. Die Farbfelder zeigen die Farbreihe.
• Neuberechnung: wie gedrehte oder skalierte Pixel gezeichnet werden. Automatisch nutzt Nächster Nachbar (exakte Pixel) und wechselt zu RotSprite, sobald sich etwas dreht oder neigt; wählst du selbst eines, bleibt es. Bilinear mischt Farben, für malerische Grafik.
• Subpixel: wie Zwischenpositionen zu ganzen Pixeln werden. Monoton geht nie gegen die Bewegungsrichtung zurück, Runden nimmt das nächste Pixel, und Abrunden rundet ab.
• Timing: Frames verteilt die Bewegung gleichmäßig auf die Zwischenbilder; Zeit folgt den Dauern der Frames, sodass ein längerer Frame mehr von der Bewegung abdeckt.
• Verzögerung (Frames): hält die Startpose so viele Frames lang, dann füllt die Bewegung den Rest des Tweens und landet trotzdem auf dem End-Keyframe. Im Easing pro Spur kann jede Spur eine andere Anzahl Frames warten, zum Beispiel eine Überblendung, die nach der Bewegung beginnt.
• Belichtung: jeden Frame zeichnet in jedem Frame eine neue Pose; jeden zweiten Frame zeichnet nur in jedem zweiten Frame eine und hält sie für zwei, und so weiter bis acht.
• Ping-Pong (hin und zurück): Die Bewegung erreicht ihre Endpose in der Mitte des Tweens und kehrt bis zum End-Keyframe zur Startpose zurück, sodass eine Schleife, die dort endet, wo sie begann, keine zweite Zeichnung braucht. Das Easing formt jede Hälfte.
• Palettensperre: Ist sie bei einem RGBA-Sprite eingeschaltet (Sprite > Palette > Palettensperre), rasten neu berechnete und neu eingefärbte Zwischenbilder auf die Palette ein, wie alles, was du malst. Eine einfache Verschiebung kopiert das Bild exakt. Das Ein- oder Ausschalten der Sperre zeichnet Tweens neu, bei denen Automatisch neu erzeugen aktiv ist.
• Automatisch neu erzeugen: zeichnet die Zwischenbilder neu, wann immer sich der Start-Keyframe oder die Frames ändern. Schalte es aus, um sie selbst mit Bearbeiten > Cel > Tween neu erzeugen neu zu zeichnen.

Anwenden erzeugt den Tween (oder ändert ihn) und lässt den Inspektor dazu geöffnet; Anwenden & Schließen schließt ihn außerdem. Beides ist ein Schritt zum Rückgängigmachen. Probleme mit einem Wert oder ein Tween, der einen anderen auf der Ebene überlappen würde, erscheinen am unteren Rand des Fensters, und Anwenden wartet, bis sie behoben sind.

Liegen die Keyframes nebeneinander, ist kein Platz für Zwischenbilder: Setz ein Häkchen bei Hinzufügen und wähl, wie viele leere Frames beim Anwenden dazwischen eingefügt werden sollen. Frames gehören allen Ebenen gemeinsam, daher sind die neuen Frames auch auf den anderen Ebenen leer. Ist der Start-Keyframe ein verknüpftes Cel, bietet der Inspektor Verknüpfung lösen an, weil ein Tween das eigene Bild des Start-Keyframes braucht.

Tipps:

• Jeden zweiten Frame wirkt handgezeichnet und halbiert die Posen, die du aufräumen musst, wenn du sie übermalst.
• Nimm das Subpixel Monoton für langsame, weiche Bewegungen: Einfaches Runden kann das Bild um ein Pixel hin und her zittern lassen. Bei Easings, die überschwingen (Back, Elastic, Bounce), und bei anderen Pfaden als Gerade wirkt es wie Runden.
• Für alles, was sich dreht, hält RotSprite Pixel-Art-Kanten sauber und erfindet nie Farben. Nächster Nachbar ist schneller, hinterlässt aber gezackte Diagonalen.
• Um ein Zwischenbild von Hand zu korrigieren, male einfach darauf: Deine Änderung bleibt erhalten, wenn der Tween neu zeichnet.
• Der End-Keyframe zeigt deine eigene Zeichnung. Für eine Bewegung, die zur Ruhe kommt, zeichne (oder kopiere) das ruhende Bild auf den letzten Frame; lass ihn leer zum Ausblenden oder Wegploppen.

Tween-Presets

Presets oben im Inspektor enthält fertige Tweens: Ein- und Ausblenden, Dithering ein und aus, eine Dithering-Überblendung, Auf- und Wegploppen, Fallen und Abprallen, Hereingleiten von jeder Seite, ein Hereinschwingen auf einem gezeichneten Pfad, Schütteln, einen Hüpfer mit Squash and Stretch, Squash and Stretch, Schweben, Schwingen, Drehen und Blinken. Wähl eines und dann Preset verwenden: Es füllt das Formular, das du noch ändern kannst, und Anwenden (oder Auf Ebenen anwenden) macht es wirksam.

Presets sind relativ, deshalb passt ein Preset zu jeder Zeichnung und jeder Länge:

• Abstände werden in der Größe der Startzeichnung gemessen: Ein Hereingleiten „aus einer Breite links“ bewegt eine 16 Pixel breite Zeichnung um 16 Pixel und eine 40 Pixel breite um 40, die Höhe eines Bogens und die Stärke eines Schüttelns richten sich nach der kürzeren Seite der Zeichnung, und ein gezeichneter Pfad dehnt sich mit Breite und Höhe der Zeichnung. Abstände landen auf ganzen Pixeln;
• die Bewegung füllt den Tween, egal wie viele Frames er hat, und eine Verzögerung ist ein Anteil davon;
• der Pivot ist ein Anteil des Rahmens der Startzeichnung;
• alles andere (Easing, Skalierung, Drehung, Deckkraft, Farbe, Squash, Belichtung, Ping-Pong, Überblendung) wird übernommen, wie es ist. Neuberechnung, Subpixel und Timing bleiben deine Einstellungen.

Auf einem indizierten Sprite nutzt ein Preset, das ausblendet, eine Dithering-Überblendung, weil teilweise Deckkraft auf einer Palette nicht darstellbar ist.

Unter Presets speichern und verwalten gib einen Namen ein und wähle Als Preset speichern, um das aktuelle Formular als eigenes Preset zu behalten (Speichern unter einem schon benutzten Namen ersetzt es); wähle eines deiner Presets, um es Umbenennen oder mit Preset löschen zu entfernen. Deine Presets bleiben auf diesem Gerät, wie gespeicherte Kurven: Sie sind nicht in der Datei und werden nicht synchronisiert. Exportieren lädt sie als JSON-Datei herunter, und Importieren… liest eine wieder ein (etwa auf einem anderen Gerät) und überspringt alles, was kein gültiges Preset ist.

Dithering-Überblendungen und Überblendungen zum End-Keyframe

Pixel-Art kann halbtransparente Pixel oft nicht zeigen, und indizierte Sprites gar nicht: Eine Alpha-Überblendung ändert dort nur die Deckkraft des Cels, die der Editor abseits der Palette mischt. Stell Überblendung auf Dithering, und die Deckkraft-Spur löst das Bild stattdessen auf: Ganze Pixel erscheinen oder verschwinden durch ein Bayer 2×2-, 4×4-, 8×8- oder Cluster-Muster (Raster), und der Anteil der behaltenen Pixel folgt der Deckkraft mit ihrem Easing. Das Muster ist an der Leinwand fest, nicht am Bild, deshalb wandert es nicht mit, wenn sich das Bild bewegt, und ein Einblenden fügt immer nur Pixel hinzu. Behalten werden nur ganze Pixel in den eigenen Farben der Zeichnung, sodass indizierte Sprites und Sprites mit Farbtiefe exakt bleiben. Neue Tweens auf indizierten Sprites beginnen mit Dithering.

In den End-Keyframe überblenden verwandelt das Startbild über den Tween (nach dem Easing der Deckkraft-Spur) in die Zeichnung des End-Keyframes: Mit Dithering zeigt jedes Pixel die eine oder die andere Zeichnung, mit Alpha werden beide gemischt. Malst du auf den End-Keyframe, wird die Überblendung neu gezeichnet.

Mehrere Ebenen tweenen

Wähle Cels auf mehreren Ebenen (Kopf, Körper und Hut, oder die Buchstaben eines Titels) vom Start-Frame bis zum End-Frame aus und öffne den Inspektor. Mehrere Ebenen zeigt, wie viele Ebenen eine Zeichnung auf dem Start-Frame haben; stell den Tween wie gewohnt ein und wähle Auf Ebenen anwenden, um allen in einem Rückgängig-Schritt denselben Tween zu geben.

• Versetzt um lässt jede Ebene so viele Frames nach der vorigen starten, in der gewählten Reihenfolge: oberste Ebene zuerst, unterste Ebene zuerst oder in der Reihenfolge, in der du sie ausgewählt hast. Eine spätere Ebene hält ihre Startpose, bis sie dran ist.
• Länge: Gemeinsam enden lässt alle Tweens auf demselben End-Keyframe enden, spätere Ebenen bewegen sich also etwas schneller; Verlängern behält dieselbe Bewegungslänge, jede spätere Ebene endet also später (bei Bedarf werden am Ende Frames hinzugefügt).
• Gemeinsamer Gruppen-Pivot skaliert, dreht und neigt alle Ebenen um einen Punkt (die Pivot-Einstellung, bezogen auf den Rahmen um die Startzeichnungen aller Ebenen), sodass sie sich als ein starres Stück bewegen, statt dass sich jede um ihre eigene Mitte dreht.

In der Zeitleiste werden die Frames, in denen eine Ebene wartet, mit gestricheltem Pfeil und blasserer Tönung gezeichnet.

Einen Bewegungspfad zeichnen

Stell Pfad auf Gezeichnet, um das Bild entlang einer selbst gezeichneten Kurve zu führen. Sie beginnt als die Route, die du hattest (ein Bogen wird zu einem gekrümmten Pfad), von der Start- zur Endposition. Solange der Inspektor offen ist, zeigt die Leinwand den Pfad mit seinen Ankerpunkten, ihren Anfassern und einem Punkt für jedes Zwischenbild:

• zieh einen Ankerpunkt (einen Kreis), um ihn zu verschieben; der erste und der letzte Ankerpunkt sind Start- und Endposition, sie zu ziehen setzt also auch die Endposition;
• zieh einen Anfasser (ein Quadrat), um die Kurve zu biegen; der gegenüberliegende Anfasser dreht sich mit, oder halte Alt, um nur einen zu bewegen;
• klicke auf die Linie, um dort einen Ankerpunkt hinzuzufügen, Alt+Klick auf einen Ankerpunkt entfernt ihn, und ein Doppelklick schaltet ihn zwischen glatt und Ecke um;
• Ankerpunkt hinzufügen und Ankerpunkt entfernen im Inspektor tun dasselbe über die Tastatur.

Ankerpunkte und Anfasser rasten auf Pixelmitten ein. Das Bild durchläuft den Pfad mit gleichmäßigem Tempo: Das Easing der Position bestimmt den Rhythmus entlang des Pfads, nicht die Form der Kurve. Setz ein Häkchen bei Am Pfad ausrichten, um das Bild in seine Bewegungsrichtung zu drehen (es beginnt ungedreht); RotSprite hält seine Kanten sauber. Der Pfad gehört zum Tween und bleibt deshalb in .pxstudio- und .aseprite-Dateien erhalten. Änderungen auf der Leinwand warten wie der Rest des Formulars, bis du anwendest. Nimm das Häkchen bei Pfad auf der Leinwand bearbeiten weg, um den Pfad ohne seine Anfasser zu sehen.

Eine eigene Easing-Kurve zeichnen

Kurve zeichnen (neben Linear, Halten und Stufen) macht aus dem Easing eine Kurve, die du formst: ein Quadrat, in dem die horizontale Achse angibt, wie weit du im Tween bist, und die vertikale, wie weit die Bewegung gekommen ist. Sie beginnt mit dem Easing, das du gewählt hattest. Zieh einen Punkt (einen Anker), um ihn zu verschieben, zieh die Quadrate neben dem ausgewählten Punkt (seine Griffe), um die Kurve zu biegen, doppelklick auf leere Fläche, um einen Anker hinzuzufügen, oder doppelklick auf einen Punkt (oder drück Del), um ihn zu entfernen. Die Pfeiltasten verschieben den fokussierten Anker, und die Felder Fortschritt und Stärke legen ihn exakt fest. Ecke nimmt die Griffe weg, sodass die Kurve dort scharf abknickt. Werte über 1 oder unter 0 schwingen über. Spiegeln spiegelt die Kurve; Starten mit ersetzt sie durch ein beliebiges fertiges Easing zum Bearbeiten.

Gib der Kurve einen Namen und wähl In Bibliothek speichern, um sie für andere Tweens zu behalten: Gespeicherte Kurven liegen nur auf diesem Gerät, und wenn du unter Gespeicherte Kurven eine wählst, wird sie in den Editor geladen. Speicherst du unter einem Namen, den du schon benutzt hast, ersetzt das diese Kurve.

Ketten und das Ende eines Tweens verschieben

Eine Kette ist eine Reihe von Tweens durch mehrere Keyframes einer Ebene, wobei jeder auf dem Keyframe endet, an dem der nächste beginnt, sodass eine Zeichnung einen Tween beenden und den nächsten starten kann. Wähl den ersten Keyframe aus und wähl Bearbeiten > Cel > Tween über Keyframes, um durch jeden späteren Keyframe der Ebene zu verketten, wobei jeder Tween auf seinem eigenen End-Keyframe landet, oder nutze Über mehrere Keyframes verketten im Inspektor, um zu wählen, wo es stoppt, und deine eigenen Einstellungen zu behalten. Es ist ein Schritt zum Rückgängigmachen. Tweens, die bereits an diesen Keyframes beginnen, werden ersetzt.

Um zu verschieben, wo ein Tween endet, wähl seinen Start-Keyframe bis zum Frame aus, auf dem er enden soll, und wähl Bearbeiten > Cel > Tween-Ende auf Auswahl setzen, oder ändere im Inspektor End-Keyframe und wende an. Ein Tween lässt sich nicht in den nächsten einer Kette hinein verlängern.

Tweens in Skripten

Skripte bekommen dieselben Tweens: app.setTween(layerId, frameId, { to = endFrameId, end = { dx = 12 }, ease = "quad", mode = "out", path = "arc", height = 6 }) tweent das Cel einer Ebene bei frameId zu einem späteren Frame und gibt die ID des Tweens zurück, und app.regenerateTween, app.bakeTween und app.removeTween nehmen die Ebene und den Start-Frame. app.setTweenChain(layerId, { frameA, frameB, frameC }, opts) tweent in einem Schritt durch diese Keyframes und gibt die IDs der Tweens zurück, und app.setTweenEnd(layerId, frameId, newEndFrameId) verschiebt das Ende eines Tweens. Die Optionen nehmen auch curve (ein gezeichnetes Easing), trackEasing, color und colorFrom (Farbton, Sättigung, Helligkeit, Tönung), tintColor (ein Hex-String oder { r, g, b }), ramp ({ first, last, shift, wrap }), fade, ditherPattern und crossfade, delay und trackDelay, pivotSpace, orient sowie path = "custom" mit points (den Ankerpunkten des gezeichneten Pfads). app.tweenPresets() listet die eingebauten Presets, und app.tweenPreset("popIn") gibt eines zurück; übergib sein recipe als Option preset, um es auf das Start-Cel zu skalieren. app.setTweenStagger({ layerA, layerB }, frameId, { to = endFrameId, preset = app.tweenPreset("slideInTop").recipe, step = 2, groupPivot = true }) tweent mehrere Ebenen in einem Schritt. Alle Optionen stehen in der Skript-Referenz.

Tweens in der Zeitleiste

• Ein Pfeil läuft am unteren Rand der Cels vom Start-Keyframe zu einer Pfeilspitze auf dem End-Keyframe. Ein Keyframe kann einen Tween beenden und den nächsten starten.
• Die Zwischenbild-Frames sind blau getönt. Frames, in denen der Tween noch seine Verzögerung abwartet, sind blasser, mit gestricheltem Pfeil.
• Eine kleine dunkle Raute markiert ein Zwischenbild, auf das du gemalt oder das du verschoben hast. Deine Änderung bleibt, wenn der Tween neu gezeichnet wird, bis du Bearbeiten > Cel > Zum Tween zurückkehren nutzt.
• Ändert sich der Start-Keyframe oder ändern sich die Frames oder ihr Timing, ist der Tween veraltet: Seine Zwischenbilder passen nicht mehr. Der Pfeil wird bernsteinfarben, ebenso die Ecke des Start-Keyframes. Nutze Bearbeiten > Cel > Tween neu erzeugen, um ihn neu zu zeichnen. Ein Tween, der sich selbst neu erzeugt, ist nie veraltet, außer auf einer gesperrten Ebene.
• Eine rote Ecke auf einem Start-Keyframe bedeutet, dass der Tween defekt ist: Sein End-Frame wurde gelöscht oder davor verschoben. Gib ihm ein neues Ende oder entferne ihn.

Fahr mit dem Zeiger über ein Cel, um dasselbe in Worten zu lesen („tween start, to frame 9, stale“, „tweened, edited by hand“); Screenreader sagen es ebenfalls an.

Tween-Befehle

Sie stehen unter Bearbeiten > Cel und im Rechtsklick-Menü eines Cels. Sie wirken auf die ausgewählten Cels (oder das aktive Cel), und jedes Cel eines Tweens, sein Start-Keyframe oder ein Zwischenbild, steht für den ganzen Tween. Jeder ist ein Schritt zum Rückgängigmachen, und gesperrte und ausgeblendete Ebenen werden übersprungen.

• Bearbeiten > Cel > Tween neu erzeugen zeichnet die Zwischenbilder aus dem Start-Keyframe neu und lässt die von Hand bearbeiteten in Ruhe.
• Bearbeiten > Cel > Zum Tween zurückkehren setzt die ausgewählten, von Hand bearbeiteten Zwischenbilder auf das zurück, was der Tween zeichnet.
• Bearbeiten > Cel > Tween fixieren behält jedes Zwischenbild als einfaches Cel und entfernt den Tween, sodass nichts sie je wieder neu zeichnet.
• Bearbeiten > Cel > Tween entfernen entfernt den Tween und die Zwischenbilder, die er gezeichnet hat. Die von Hand bearbeiteten bleiben als einfache Cels.
• Bearbeiten > Cel > Tween-Einstellungen kopieren kopiert die Einstellungen eines Tweens: Easing, Bewegung, Pfad und Timing, aber nicht, wo er endet. Bearbeiten > Cel > Tween-Einstellungen einfügen wendet sie auf jeden ausgewählten Keyframe an. Ein Keyframe, der bereits einen Tween startet, behält sein Ende; sonst läuft der Tween zum nächsten Frame dieser Ebene mit einem gezeichneten Cel. Keyframes ohne etwas dahinter werden übersprungen.

Onion Skin

Onion Skin zeigt verblasste Kopien der Frames vor und nach dem aktuellen, damit du die Bewegung beim Zeichnen siehst. Schalte es mit Ansicht > Onion Skin anzeigen oder der Onion-Skin-Schaltfläche in der Leiste der Werkzeugoptionen ein. Es gilt pro Editoransicht.

Einstellungen > Onion Skin... wählt, wie viele Frames davor und danach gezeigt werden (bis zu 16 je Seite), ihre Deckkraft und wie stark sie pro Frame verblasst, ob frühere Frames rot und spätere blau getönt werden, ob nur die Frames des aktuellen Tags gezeigt werden und ob die Kopien hinter oder vor dem Sprite gezeichnet werden. Hinten werden sie über der Hintergrundebene und unter den anderen Ebenen gezeichnet, sodass sie auch bei einem Sprite mit Hintergrundebene zu sehen sind. Die Tönung färbt jede Kopie nach ihrer Helligkeit ein, sodass auch dunkle Umrisse als dunkelrot oder dunkelblau erscheinen. Diese Einstellungen gelten für jeden Sprite.

Onion Skin folgt der Wiedergabe, wie in Aseprite. Es läuft nicht über den ersten oder letzten Frame hinaus herum. Mit Nur aktueller Tag nutzt es den kleinsten Tag um den aktuellen Frame, in der Richtung dieses Tags: In einem rückwärts laufenden Tag ist der Frame „davor“ der nächste auf der Zeitleiste. Mit Frames des Tags als Schleife läuft es innerhalb des Tags herum, und ein Ping-Pong-Tag prallt an seinen Enden ab.