Wie deine Arbeit organisiert ist

Alles, was du in pxstud.io erstellst, besteht aus ein paar ineinander verschachtelten Bausteinen. Sie zu kennen hilft bei fast allem anderen: was Rückgängig zurücknehmen kann, was in einer heruntergeladenen Datei steckt und was Sync auf deine anderen Geräte kopiert.

Die Bausteine

Project
└── Sprite                     one image or animation (a .pxstudio file)
    ├── Layers                 stacked drawings; groups hold other layers
    ├── Frames                 the steps of the animation
    │   └── Cels               what one layer shows on one frame
    ├── Tags                   named ranges of frames
    ├── Slices                 named rectangles (hitboxes, 9-slices, export areas)
    ├── Palette                the sprite's colors
    └── Tilesets               the tiles of tilemap layers

Your library: palettes, brushes and scripts, used across all your sprites

Projekt. Ein benannter Ordner mit Sprites. Du kannst beliebig viele haben und im Menü Projekt zwischen ihnen wechseln. Ein Projekt enthält nichts außer seinen Sprites.

Sprite. Ein Bild oder eine Animation: Größe, Farbmodus, Ebenen, Frames und alles andere, was unten steht. Jeder Sprite öffnet sich in einem eigenen Tab. Sein Name gehört zum Projekt, nicht zur Zeichnung, daher bekommt eine heruntergeladene .pxstudio-Datei den Namen des Sprites als Dateinamen.

Ebene. Ebenen werden von unten nach oben gestapelt, und jede lässt sich einzeln einblenden, ausblenden, sperren und mischen (Ebenen). Es gibt vier Arten:

• Bildebenen, die übliche Art, mit Pixeln;
• Gruppen, die andere Ebenen enthalten;
• Referenzebenen, ein Bild zum Nachzeichnen, das nie exportiert wird;
• Tilemap-Ebenen, die mit Tiles aus einem Tileset gemalt werden.

Die Ebene Hintergrund ist eine Bildebene mit ein paar Regeln: Sie ist deckend, liegt ganz unten und lässt sich nicht verschieben.

Frame. Ein Schritt der Animation, mit der Dauer, wie lange er zu sehen ist (in Millisekunden). Ein Standbild ist ein Sprite mit einem Frame.

Cel. Der Treffpunkt von Ebene und Frame: das, was diese Ebene in diesem Frame zeigt. Ein Sprite mit 3 Ebenen und 4 Frames hat bis zu 12 Cels. Ein Cel kann leer sein (dort ist noch nichts gezeichnet), und Cels auf einer Ebene lassen sich verknüpfen, sodass sich mehrere Frames ein Bild teilen: Zeichnest du auf einem davon, ändern sich alle. Pixel-Art hat meist viel leeren Raum, deshalb speichert ein Cel nur den Teil der Leinwand, auf dem gezeichnet wurde.

Tag. Ein benannter, farbiger Bereich von Frames („walk“, „jump“) mit einer Abspielrichtung: vorwärts, rückwärts, Ping-Pong oder umgekehrtes Ping-Pong, und wie oft er sich wiederholt. Exporte können die Frames eines Tags verwenden.

Slice. Ein benanntes Rechteck auf der Leinwand ohne eigene Pixel. Es markiert Hitboxen, Exportbereiche oder Hilfslinien für die 9-Slice-Skalierung. Ein Slice kann sich von einem Frame zum nächsten ändern.

Palette. Die Farbliste des Sprites. Was sie bedeutet, hängt vom Farbmodus des Sprites ab:

• RGBA: Jeder Pixel hat seine eigene Farbe, mit Transparenz. Die Palette ist eine Sammlung von Farbfeldern zum Auswählen.
• Graustufen: Grautöne, mit Transparenz.
• Indiziert: Jeder Pixel ist ein Paletteneintrag, also färbt das Umfärben eines Eintrags jeden Pixel um, der ihn verwendet. Ein Eintrag (der erste, solange du das nicht änderst) gilt als transparent.

Eine Palette kann sich auch mitten in einer Animation ändern, ab einem bestimmten Frame.

Tileset. Die Tiles, mit denen eine Tilemap-Ebene malt. Wird ein Tile neu gemalt, aktualisiert sich das überall, wo es platziert ist, und mehrere Tilemap-Ebenen können sich ein Tileset teilen.

Deine Bibliothek. Paletten, Pinsel und Skripte, die du erstellst, speicherst oder forkst, liegen in deiner eigenen Bibliothek außerhalb jedes Sprites, sodass du sie in allen verwenden kannst. Der Editor bringt außerdem eingebaute Paletten und Pinsel mit. Wenn du eine Palette aus der Bibliothek wählst, werden ihre Farben in den Sprite kopiert; spätere Änderungen daran wirken sich nicht auf Sprites aus, die sie schon verwenden.

Der Bearbeitungskontext

Deine Vorder- und Hintergrundfarbe, der Pinsel und die Optionen jedes Werkzeugs gehören zu keinem Sprite. Ein gemeinsamer Satz gilt für alle Tabs, also behältst du Pinsel und Farben beim Wechsel zwischen Sprites. Beim Neuladen der Seite werden sie zurückgesetzt. (Ein gespeichertes Layout kann deine Werkzeugeinstellungen zurückbringen.)

Was Rückgängig abdeckt

Jeder Sprite hat seinen eigenen Änderungsverlauf. Alles, was den Sprite verändert, lässt sich rückgängig machen: Zeichnen, Ebenen, Frames, Cels, Tags, Slices, die Palette, Größenänderungen und auch die Auswahl.

Das lässt sich nicht rückgängig machen:

• das Umbenennen eines Projekts oder Sprites;
• Änderungen an Paletten, Pinseln und Skripten in deiner Bibliothek;
• deine Farben, dein Pinsel und die Werkzeugoptionen;
• welche Ebene oder welcher Frame aktiv ist und wie der Arbeitsbereich angeordnet ist;
• die Namen, die du Schritten im Verlauf gibst.

Der Verlauf wird mit dem Sprite gespeichert, sodass er auch nach dem Schließen des Tabs oder dem Neuladen der Seite noch da ist, und mit Sync auch auf deinen anderen Geräten. Die ältesten Schritte werden nach 1.000 verworfen.

Versionen

Rückgängig geht Schritt für Schritt zurück, und die ältesten Schritte fallen weg. Um einen Stand eines Sprites dauerhaft aufzubewahren, benenne ihn: Sprite > Versionsverlauf... > Diese Version benennen... behält den Sprite so, wie er jetzt ist, auf diesem Gerät, bis du die Version löschst. In derselben Liste kannst du eine Version mit dem aktuellen Stand des Sprites Vergleichen (nebeneinander oder mit Markierung jedes geänderten Pixels), sie Wiederherstellen (ein Schritt, den du rückgängig machen kannst) oder als .pxstudio-Datei herunterladen (ohne Änderungsverlauf: Eine Version hat keinen). Einen Schritt im Bereich Änderungsverlauf zu benennen behält ebenfalls eine Version: den Sprite, wie er bei diesem Schritt war.

Mit Sync hebt die Cloud auch frühere Versionen jedes Sprites auf: jede Speicherung des letzten Tages, danach eine pro Tag für 30 Tage, danach eine pro Woche für ein Jahr. Benenne eine davon (mit der Pin-Schaltfläche), dann bleibt sie auf jedem Gerät dauerhaft erhalten; ihr Speicherplatz zählt auf deinen Tarif, bis du den Namen entfernst.

Derselbe Sprite in zwei Tabs

Ein Sprite kann immer nur in einem Browser-Tab bearbeitet werden. Öffnest du ihn in einem zweiten Tab, ist er dort schreibgeschützt, mit einem Hinweis oben; was der erste Tab speichert, erscheint darin. Wähle Hier bearbeiten, um das Bearbeiten in den zweiten Tab zu verlegen: Der erste speichert und wird schreibgeschützt. Wenn der bearbeitende Tab den Sprite schließt, übernimmt ein anderer Tab, in dem er geöffnet ist.

Wo was gespeichert wird

Dateien zum Herunterladen

• Eine .pxstudio-Datei (Datei > Speichern unter...) ist ein Sprite: Größe und Farbmodus, Palette, Ebenen, Frames, Cels, Tags, Slices, Tilesets, Raster und Referenzbilder sowie sein Änderungsverlauf. Sie enthält weder benannte Versionen noch die Auswahl oder irgendetwas außerhalb des Sprites. Öffne sie wieder mit Datei > Öffnen..., und Rückgängig macht dort weiter, wo es war.
• Alles auf einmal: Auf deiner Kontoseite lädt **Dieser Browser

  Alles exportieren (.zip)** ein Zip mit den Sprites aller Projekte (als .pxstudio-Dateien, mit ihrem Änderungsverlauf) und deinen Paletten (.gpl), Pinseln und Skripten herunter. Das funktioniert offline und auch ohne Anmeldung.