Öffnen, Importieren und Exportieren

pxstud.io bewahrt deine Arbeit laufend im Browser auf (Dein erster Sprite). Diese Seite behandelt, wie Dateien hinein- und herauskommen. Welche Formate was können, steht unter Dateiformate.

Dateien öffnen

Datei > Öffnen... (Ctrl+O) öffnet eine .pxstudio- oder Aseprite-Datei, eine Datei aus einem anderen Editor (Photoshop .psd, OpenRaster .ora, Piskel, Pixilart, Pixelorama, Pyxel Edit) oder ein Bild (PNG oder animiertes PNG, GIF, JPEG, WebP, AVIF, BMP, TGA, PCX, QOI, ICO, CUR, Netpbm, FLI/FLC) als neuen Sprite im aktuellen Projekt, benannt nach der Datei. Du kannst Dateien auch auf den Editor ziehen:

• Bei mehreren Bildern auf einmal wirst du gefragt, ob sie als getrennte Sprites oder als eine Animation geöffnet werden sollen (ein Frame pro Bild, in der Reihenfolge der Dateinamen).
• Bei einem großen Bild (über 512 Pixel pro Seite) wirst du gefragt, ob du es als Pixel-Art importieren oder so öffnen willst, wie es ist.
• Andere Bilder, die der Browser anzeigen kann (SVG und so weiter), gehen an „Bild als Pixel-Art importieren“.

Kann etwas in einer Datei nicht beibehalten werden, sagt ein Hinweis, was, zum Beispiel das Farbprofil einer Aseprite-Datei, ein Mischmodus, den pxstud.io nicht hat, oder eine Photoshop-Einstellungsebene. Was die Dateien jedes Editors behalten, steht unter Dateiformate.

Datei > Speichern unter... (Ctrl+Shift+S) lädt den Sprite als .pxstudio-Datei herunter, die alles behält und sich genau so wieder öffnet, wie sie war.

Importieren

Bild als Pixel-Art

Datei > Importieren > Bild als Pixel Art importieren... verwandelt ein Foto oder eine Zeichnung in Pixel-Art.

1. Bild auswählen... oder eines hineinziehen. (Bilder über 4096 Pixel werden zuerst verkleinert.)
2. Lege die Größe fest: Breite und Höhe oder eine lange Seite von 16, 32, 64 oder 128.
3. Wähl einen Algorithmus:
   • Ausgewogen (SLIC + k-Means), der Standard, fasst Pixel zu Regionen ähnlicher Farbe zusammen;
   • Glatt mit Umrissen (bilateral) glättet Flächen und kann die Kanten zwischen ihnen abdunkeln;
   • Scharfe Formen (Kopf-Lischinski) behält scharfe Formen und Umrisse.
4. Wähl eine Palette: Auto findet die besten Farben (2 bis 64 davon), oder nutze die Palette des Sprites, eine aus „Meine Paletten“ oder eine integrierte Palette.
5. Drück Start, um das Ergebnis zu sehen, passe es an und drück Neu starten, um es zu aktualisieren.
6. Importieren als neuer Sprite oder als neue Ebene im aktuellen Sprite (zentriert), und klick auf Importieren. Palettenfarben zur Sprite-Palette hinzufügen hält die Farben für Nachbesserungen bereit.

Bildsequenz

Datei > Importieren > Bildsequenz... wählt mehrere Bilder aus und macht einen Sprite mit einem Frame pro Bild, in natürlicher Reihenfolge der Dateinamen (run2 vor run10). Der Sprite wird nach der ersten Datei ohne ihre Nummer benannt. Bilder unterschiedlicher Größe sitzen oben links im größten.

Sprite-Sheet

Datei > Importieren > Sprite-Sheet... zerschneidet ein Sheet in Frames. Wähl ein Bild oder Aktuellen Sprite verwenden.

• Raster automatisch erkennen sucht die leeren Lücken zwischen den Frames (transparent oder in der Hintergrundfarbe des Sheets) und stellt Typ, Frame-Größe, Versatz und Abstand passend ein. Es läuft, wenn du ein Bild wählst, und erneut, sooft du es drückst. Es braucht Lücken zwischen den Frames; bei einem Sheet, dessen Frames sich berühren, bleiben deine Einstellungen erhalten, und es sagt das.
• Frames finden per Erkennung jedes Sprites ist für Sheets, die nicht auf einem Raster liegen. Siehe Sprites erkennen unten.
• Typ: Horizontaler Streifen, Vertikaler Streifen, Nach Zeilen oder Nach Spalten.
• Frame B und Frame H, Versatz, Abstand und ob angeschnittene Zellen einbezogen und leere übersprungen werden. Ein Raster über dem Sheet zeigt, wo die Schnitte liegen.
• Aseprite-JSON... liest Frames, Dauern und Tags aus der JSON-Datei, die Aseprite zu einem Sheet exportiert, statt aus dem Raster. Beschnittene Frames kehren an ihren Platz auf der vollen Leinwand zurück, und der Innenabstand von Aseprite wird aus jedem Frame herausgelassen.
• Erstelle einen neuen Sprite oder ersetze die Frames des aktuellen Sprites (ein Schritt zum Rückgängigmachen).

Sprites erkennen

Wähl bei dicht gepackten oder ungleichmäßig verteilten Sheets Erkennung jedes Sprites. Jede Gruppe von Nicht-Hintergrund-Pixeln wird zu einem Frame, angezeigt als nummerierter Rahmen über dem Sheet.

• Hintergrund: Automatisch nutzt Transparenz, falls das Sheet welche hat, sonst seine häufigste Farbe. Oder wähl Transparent oder eine Farbe.
• Toleranz (0 bis 255): wie weit ein Pixel vom Hintergrund entfernt sein darf und trotzdem als leer zählt. Erhöhe sie, um schwaches Rauschen oder JPEG-Flimmern zu ignorieren.
• Abstand zum Zusammenfassen: Rahmen mit höchstens so vielen leeren Pixeln zwischen sich werden zu einem Sprite, sodass ein abgetrenntes Schwert oder ein Funke bei seiner Figur bleibt. 0 verbindet nur Rahmen, die sich überlappen.
• Min. Pixel: Sprites mit weniger Pixeln als dies werden als Flecken verworfen.
• Verbindung: ob Pixel, die sich nur an einer Ecke berühren, zum selben Sprite gehören.
• Reihenfolge: Die Frames laufen Zeile für Zeile oder Spalte für Spalte.
• Frame-Größe ist die Größe des größten Sprites oder eine eigene Größe (größere Sprites werden abgeschnitten). Der Anker bestimmt, wo jeder Sprite auf dieser Leinwand sitzt: Unten mittig hält die Füße auf einer Linie, was einen Laufzyklus vor dem Wackeln bewahrt.

Um das Ergebnis von Hand zu korrigieren, klick auf einen Rahmen, um ihn auszuwählen. Du kannst sein X, Y, B und H ändern, verschieben, wo er im Frame sitzt (Versatz X und Versatz Y), ihn in der Reihenfolge Früher oder Später setzen, zum Zurück- oder Weiter-Rahmen gehen oder ihn Löschen. Zieh auf einem leeren Teil des Sheets, um einen neuen Rahmen zu zeichnen, der zuletzt hinzugefügt wird. Eine geänderte Erkennungseinstellung oder ein Druck auf Neu erkennen führt die Erkennung erneut aus und verwirft diese Änderungen.

Sprites, die sich berühren, lassen sich nicht unterscheiden und ergeben einen Rahmen; teile sie von Hand oder nutze stattdessen das Raster.

Exportieren

Datei > Exportieren... (Ctrl+Alt+Shift+S) öffnet einen Dialog für jedes Format, mit einer Vorschau der echten Datei. Ausgeblendete Ebenen, Referenzebenen und Entwurfsebenen werden nie exportiert (eine Aseprite-Datei behält jede Ebene).

Für jeden Typ:

• Größe ändern (%) skaliert in ganzen Schritten, von 100 % bis 1600 %, sodass Pixel scharfe Quadrate bleiben.
• Pixelverhältnis anwenden streckt nicht quadratische Pixel in ihre Form.
• Frames: alle, der aktive Frame oder die Frames eines Tags. Animationsrichtung: vorwärts, rückwärts oder Ping-Pong (bei einem Tag behält vorwärts die eigene Richtung des Tags).
• Subtags & Wiederholungen abspielen (wenn der Sprite Tags hat, standardmäßig an, wie in Aseprite): Die Frames werden so exportiert, wie die Wiedergabe sie abspielt, durch jeden Tag in seiner Richtung, verschachtelte Tags und Wiederholungszahlen eingeschlossen, sodass ein Frame mehrfach vorkommen kann. Schalte es aus, um jeden Frame einmal in Reihenfolge zu exportieren (eine Datei pro Frame bei einer PNG-Sequenz).
• Bereich (wenn der Sprite Slices hat): die ganze Leinwand, ein Slice oder Jeder Slice, was einen Export pro Slice schreibt. Ein Slice, der sich zwischen Frames verschiebt oder seine Größe ändert, wird mit dem Rahmen exportiert, der ihn in jedem exportierten Frame abdeckt, sodass alle seine Frames gleich groß sind. Bei jedem Slice wird {slice} im Dateinamen zum Slice-Namen ({slice}.png ergibt head.png); ohne wird der Name vor die Endung gesetzt (sprite-head.png, walk-head001.png). Nicht für Sprite-Sheets oder die Typen mit einer Gesamtdatei.
• Dateiname. Bei einer PNG-Sequenz legt eine Zahl im Namen die Nummerierung fest: walk001.png ergibt walk001.png, walk002.png und so weiter; ohne eine werden die Frames als sprite-001.png nummeriert.

Pro Typ:

Presets und Warteschlange

Presets und Warteschlange unten im Export-Dialog speichert und bündelt Exporte. Nichts davon verlangt eine Bestätigung.

• Presets behalten den Typ und jede Option auf diesem Tab (Größe, Frames, Bereich, Dateiname und die Optionen pro Typ wie Qualität, Hintergrund, Hotspot, Zellengröße oder die Einstellungen des Sprite-Sheets) unter einem Namen, den du wählst. Preset speichern mit einem vorhandenen Namen ersetzt es. Anwenden füllt den Dialog mit einem Preset, und Umbenennen und Löschen tun, was sie sagen. Presets bleiben auf diesem Gerät und brauchen kein Konto. Wählt ein Preset einen Tag, einen Slice oder einen Frame, den der aktuelle Sprite nicht hat, fällt es auf alle Frames oder die ganze Leinwand zurück.
• Warteschlange: Aktuelle zur Warteschlange (oder Zur Warteschlange bei einem Preset) reiht einen Export mit den Einstellungen ein, wie sie jetzt sind. Warteschlange starten erzeugt jede Datei in einem Rutsch: ein Download oder ein einziges pxstudio-export.zip, wenn die Einträge mehrere Dateien ergeben. Jeder Eintrag zeigt Wartet, Fertig oder den Fehler, der ihn gestoppt hat; ein fehlgeschlagener Eintrag stoppt die anderen nicht, und ein erneutes Warteschlange starten versucht die fehlgeschlagenen noch einmal. Entfernen nimmt einen Eintrag heraus. Die Warteschlange gehört zu dem Sprite und Dialog, den du offen hast, und ist wieder leer, wenn der Dialog schließt.

Sprite-Sheets

Der Typ Sprite-Sheet hat vier Tabs, aufgebaut wie die von Aseprite:

• Layout: Streifen, Zeilen, Spalten oder Gepackt; eine feste Zahl von Spalten oder Zeilen oder eine feste Breite oder Höhe; beste Passform; Duplikate zusammenführen; leere ignorieren.
• Sprite: welche Ebenen und Frames, ob Ebenen oder Tags getrennt werden, und Beschneiden.
• Ränder: Randabstand, Abstand zwischen Frames und Innenabstand sowie Extrudieren (wiederholt Randpixel, um Nähte in Spielen zu verhindern).
• Ausgabe: ein Engine-Preset, die Datendatei (Aseprite-JSON als Hash oder Array oder ein Godot-4-SpriteFrames-.tres) und, für JSON, wie jeder Frame benannt wird.

Die Layouts funktionieren wie die von Aseprite, sodass dieselben Optionen dasselbe Sheet ergeben:

• Streifen, Zeilen und Spalten platzieren jeden Frame in seiner eigenen Größe, sodass beschnittene Frames nicht den Platz des größten einnehmen. Ohne Einschränkung ergeben Nach Zeilen und Nach Spalten ein fast quadratisches Raster.
• Ebenen trennen setzt die Frames jeder Ebene nacheinander, und Tags trennen die jedes Tags. Nach Zeilen beginnt für jede Ebene und jeden Tag eine neue Zeile (Nach Spalten eine neue Spalte), außer eine feste Breite (Höhe) bricht sie um.
• Gepackt passt die Frames, den größten zuerst, in das kleinste Sheet ein, das es kann, nahe am Quadrat (100 beschnittene Frames von 4 bis 43 px ergeben 258×236 px, wie in Aseprite). Beste Passform: Kleinste Fläche probiert ein paar weitere Größen, und Kleinste Zweierpotenz ergibt ein Sheet in einer Zweierpotenz.
• Eine feste Breite oder Höhe ist die Breite oder Höhe des Sheets, auch wenn die Frames weniger brauchen.
• Die Vorschau warnt, wenn das Sheet auf einer Seite über 16384 px groß ist, was viele GPUs und Engines nicht laden können.

Beschneiden:

• Sprite beschneiden schneidet jeden Frame auf den Bereich zu, den irgendein Frame nutzt. Cels beschneiden schneidet jeden Frame auf seinen eigenen Inhalt zu. Bei einer sichtbaren Hintergrundebene schneiden beide statt der Transparenz die Hintergrundfarbe weg (die Farbe des Pixels oben links).
• Am Raster beschneiden weitet den beschnittenen Bereich bis zu den Rasterlinien aus, für beide Arten des Beschneidens.
• Das JSON behält die Frames in Leinwandkoordinaten: sourceSize ist die Leinwandgröße und spriteSourceSize ist, wo die Pixel des Frames darauf sitzen, sodass Engines und erneute Importe jeden Frame an seinem Platz halten.

Frame-Namen: Lass Dateiname pro Element leer für die Namen von Aseprite, {title} {frame}.{extension}, mit ({layer}) für eine Ebene und #{tag} für einen Tag ergänzt (hero (Body) #walk 0.aseprite). {frame} zählt für jede Ebene und jeden Tag ab 0. Die Platzhalter sind die von Aseprite:

Du bekommst das PNG des Sheets und eine Datendatei mit demselben Namen. Das JSON listet Position und Dauer jedes Frames, die Tags, die exportierten Ebenen und die Slices auf und ist für Game-Engines und Tools lesbar, die das JSON von Aseprite lesen. Anders als bei Aseprite enthält das frame-Rechteck eines Frames den Innenabstand nicht, und Tag-Bereiche zählen die Frames im Sheet. Wie in Aseprite liegen die Frames eines Tags im Sheet in der Reihenfolge der Zeitleiste, und seine Richtung und Wiederholungszahl stehen im JSON, damit die Game-Engine sie anwendet.

Engine-Presets stellen das Layout für eine Game-Engine mit einem Klick ein: Godot 4 und Phaser / PixiJS packen die Frames, beschneiden jeden auf seinen Inhalt, führen Duplikate zusammen und fügen 1 px Extrusion hinzu, damit Frames nicht die Ränder ihrer Nachbarn aufnehmen, wenn sich die Kamera bewegt oder die Textur gefiltert wird. Godot 4 wählt außerdem die .tres-Datendatei. Aseprite-Standards stellt das Layout auf einen einfachen Streifen zurück. Du kannst danach jede Option ändern.

Godot 4

Mit der Datendatei Godot 4 SpriteFrames (.tres):

• Jeder Tag wird zu einer Animation mit dem Namen des Tags. Ein Sprite ohne Tags bekommt eine Animation namens default. Mit Ebenen trennen heißen Animationen layer/tag.
• Frame-Dauern werden exakt übernommen: Die Geschwindigkeit der Animation stammt aus der häufigsten Frame-Dauer, und längere oder kürzere Frames bekommen eine passende relative Dauer.
• Godot kennt keine Einstellung für Rückwärts, Ping-Pong oder Wiederholung, daher werden die Frames in Abspielreihenfolge ausgeschrieben. Ein Tag mit einer Wiederholungszahl wird so oft abgespielt (jede Richtung eines Ping-Pongs zählt einmal) und läuft nicht in Schleife; andere Tags laufen in Schleife.
• Beschnittene Frames behalten ihre volle Größe und Position, damit der Sprite nicht zwischen Frames springt.

Leg das PNG und die .tres in denselben Ordner deines Godot-Projekts und wähl dann die .tres als Sprite Frames eines AnimatedSprite2D. Für scharfe Pixel stell Project Settings > Rendering > Textures > Default Texture Filter auf Nearest.

Zeitraffer exportieren

Datei > Zeitraffer exportieren... macht ein kurzes GIF oder MP4 davon, wie dein Sprite gezeichnet wird, zum Teilen.

• Animieren: Fertigen Sprite einzeichnen (Pixel erscheinen in einer Reihenfolge, die du wählst: Abtasten, zufällige Auflösung, diagonaler Wisch, Spirale, von der Mitte aus oder Farbe für Farbe) oder Meine Änderungen wiedergeben (dein tatsächlicher Änderungsverlauf aus dieser Sitzung, Strich für Strich: die Schritte, die dahin geführt haben, wo du jetzt bist, ohne rückgängig gemachte Schritte oder andere Zweige). Wähl einen Bereich von Änderungen (Ab Änderung / Bis Änderung) und Zeige alle N-te Änderung, um lange Aufbauten zu beschleunigen.
• Bei mehreren Ebenen oder Frames wählst du, ob sie zusammen oder nacheinander gezeichnet werden.
• Timing: Zeichenzeit, Bildrate, Tempo (sanft ein- und ausblenden, gleichmäßig, schneller werden, langsamer werden), eine Pause zwischen Frames, ein Halten am Ende und wie oft die fertige Animation danach abgespielt wird.
• Ausgabe: GIF oder MP4, Skalierung (standardmäßig strebt sie 1080 Pixel an), Rand, eine quadratische Leinwand und die Hintergrundfarbe (oder transparent, bei GIF).