Editor

Die Reiter über der Zeichenfläche zeigen die geöffneten Sprites — anklicken wechselt, × schließt den Reiter (der Sprite bleibt in der Liste), + legt einen neuen an.

Jedes Panel wohnt im Dock am Rand und klappt als Schublade auf. Im Panel-Kopf heftet die Pinnadel es fest in die Spalte daneben, das Fenster-Symbol lässt es frei schweben. Am Kopf anfassen und ziehen setzt es woanders hin.

Werkzeuge, Farbzeile und Timeline lassen sich genauso oben, unten oder seitlich anpinnen — seitlich liegen sie wie Panels untereinander.

In Feldern für Größen darf man rechnen: 24 * 4, 24x4, (16+8)*2 oder 96 : 4 — beim Verlassen des Felds steht das Ergebnis darin.

Vollbild blendet alles außer der Zeichenfläche aus; die Leisten holen die Griffe am Rand zurück.

Eine Palette bildet Index → Farbe ab. 0 ist immer transparent, 1–9 sind frei belegbar.

Konvention (kein Zwang): 1–4 eine Tonleiter hell → dunkel, 5 die Kontur, 6–9 Akzente.

Jeder Sprite merkt sich seine eigene Palette. Farbe ändern färbt alle Pixel mit diesem Index sofort um.

Eingebaute Paletten sind schreibgeschützt — Kopie bearbeiten macht eine änderbare eigene daraus.

Stift — einzelne Pixel.

Pinsel — Fläche; Stärke = Dichte, Größe = Kantenlänge.

Spray — zufällige Pixel; Stärke = Menge pro Ereignis.

Schattieren — ein Stift, der sich mit jedem Strich durch eine Farbreihe arbeitet. Stell die Reihe zusammen: tippe in der Farbzeile oder im Paletten-Panel zwei oder mehr Farben an, z. B. drei Rottöne — in der Reihenfolge, in der sie aufeinander folgen sollen. Ein leerer Pixel bekommt beim ersten Strich die erste Farbe, jeder weitere Strich darüber die nächste — oder du hältst gedrückt: wie bei einer Airbrush wird es dort, wo der Pinsel länger bleibt, mit der Zeit immer schneller dunkler, auch beim langsamen Malen. Pixel in anderen Farben werden wie leere behandelt: sie bekommen zuerst die erste Farbe der Reihe — so schattierst du auch über schon Gemaltes. Rechtsklick läuft die Reihe andersherum, am Handy macht das der Knopf ⇄ Umdrehen. Der Knopf mit den Balken ordnet die Reihe nach Farbstufen, von hell nach dunkel — von selbst passiert das nie. Abstufungen erzeugt aus der aktuellen Farbe passende hellere und dunklere Töne (Licht etwas wärmer, Schatten etwas kühler), hängt sie an die Palette und wählt sie als Reihe. Ohne Reihe malt es mit der aktuellen Farbe und nimmt danach den nächstdunkleren Ton derselben Farbe. Verlauf macht den Pinsel rund und weich: in der Mitte geht es mehrere Stufen auf einmal, zum Rand hin weniger.

Pinselform — Pinsel, Radierer und Schattieren malen eckig oder rund (die zwei Knöpfe hinter der Größe). Rund ist ab Größe 3 zu sehen: 3 px ist ein Plus, 5 px ein runder Fleck.

Größe 1–300 per Regler oder Zahlenfeld; Alt + rechte Maustaste ziehen verstellt sie direkt auf der Zeichenfläche. Ein Umriss zeigt, was Pinsel, Radierer und Spray gleich treffen.

Clean Stroke — beim Stift (und beim Radierer mit Größe 1) verschwinden die L-Ecken einer freihändigen Linie: saubere 1-Pixel-Linien wie von Hand gesetzt.

Füllen — zusammenhängende gleiche Fläche. Mit Grenzen: alle Ebenen endet die Fläche dort, wo sich im sichtbaren Bild etwas ändert — gemalt wird trotzdem in die aktive Ebene. So malst du eine Vorlage (z. B. Umrisse auf einer eigenen Ebene) Fläche für Fläche aus, ohne sie anzufassen.

Radierer — setzt auf transparent.

Zauberstab — löscht zusammenhängende ähnliche Fläche; Toleranz steuert, wie viel Abweichung mitgeht.

Linie · Rechteck · Ellipse — aufziehen, die Vorschau zeigt das Ergebnis, Loslassen zeichnet. Gefüllt schaltet zwischen Kontur und Fläche. Mit Umschalt rastet die Linie auf 0°, 45° und 90° ein, Rechteck und Ellipse werden Quadrat und Kreis.

Gerade malen: Umschalt halten und malen — der Strich geht nur waagerecht, senkrecht oder im 45°-Winkel. Die Richtung rastet nach ein paar Pixeln ein und bleibt bis zum Loslassen; mitten im Strich gedrückt, beginnt die gerade Linie dort.

Auswahl · Lasso · Farbwahl — drei Wege zur selben Sache: ein Bereich, den man als Ganzes bewegt.

Hand — schiebt nur die Ansicht und verändert nichts am Bild; auf einer Hilfslinie zieht sie die Linie. Dasselbe Verschieben geht jederzeit mit gehaltener Leertaste.

Die beiden Knöpfe ↔ und ↕ in der Werkzeugleiste spiegeln jeden Strich an der Mittelachse — beide zusammen ergeben vier Spiegelungen.

Gilt für Stift, Pinsel, Spray, Füllen und die Formen. Die Achsen werden als gestrichelte Linien eingeblendet.

Auswahl (A) zieht ein Rechteck auf.

Lasso (L) umfährt eine freie Form; beim Loslassen wird sie geschlossen und alles darin gehört dazu — auch bei krakeliger Linie.

Farbwahl (K) nimmt die zusammenhängende ähnliche Fläche unter dem Klick; die Toleranz bestimmt, wie viel mitgeht.

Mehrere Bereiche: mit Umschalt kommt die neue Form zur Auswahl dazu, mit Strg wird sie abgezogen — mit allen drei Werkzeugen, auch gemischt. Am Handy stellen Neu · + · − in der Options-Zeile dasselbe ein.

In die Auswahl fassen und ziehen → der Bereich wird ausgeschnitten und schwebt. Er bleibt in der Luft, bis du ihn absetzt — solange lässt er sich beliebig oft verschieben, drehen und spiegeln, ohne dass darunter etwas kaputtgeht.

Abgesetzt wird beim Abwählen (Esc), bei einer neuen Auswahl, beim Werkzeug- oder Sprite-Wechsel — oder automatisch beim Schließen des Tabs.

Alt+Ziehen lässt das Original stehen — man verschiebt eine Kopie.

Einfügen in einen anderen Sprite: hat er eine andere Palette, wird nach der Farbe übertragen — das Eingefügte sieht aus wie im Original. Farben, die es dort nicht gibt, kommen als freie Farben hinein. Strg+Umschalt+V übernimmt stattdessen die Nummern (dann färbt die neue Palette um).

Skalieren: an den acht Anfassern am Rahmen ziehen — Ecken ändern Breite und Höhe, Kanten nur eine; mit Umschalt bleibt das Seitenverhältnis. Pixel bleiben scharf (nächster Nachbar), und jede Größe wird vom Original gerechnet: klein und wieder groß ziehen verliert nichts.

Feinarbeit mit den Pfeiltasten: ein Pixel pro Druck. Füllen färbt die ganze Auswahl in der aktuellen Farbe.

Beim Absetzen überschreiben nur gefüllte Pixel; transparente Stellen lassen den Untergrund stehen.

Was über den Rand hinausgeschoben wird, geht verloren — Strg+Z holt alles zurück.

Ein Klick neben die Auswahl (oder Esc) hebt sie auf.

Spiegeln und Drehen wirken auf die Auswahl, wenn es eine gibt — sonst auf den ganzen Sprite. Das Abzeichen im Panel sagt, worauf gerade.

Zuschneiden schneidet den leeren Rand weg, Zentrieren rückt den Inhalt in die Mitte.

Größe ändert die Fläche, ohne zu skalieren; der Anker bestimmt, wohin der alte Inhalt rutscht.

×2 / ÷2 skaliert hart (Nearest Neighbor) — Pixel bleiben Pixel, beim Halbieren fällt jedes zweite weg.

Frei drehen nimmt jeden Winkel. Der Regler zeigt eine Vorschau; Übernehmen (Enter) schreibt sie fest, Verwerfen (Esc) geht zurück auf 0°.

Jede Vorschau wird vom Original gerechnet, nicht vom zuletzt gedrehten Bild — dreimal am Regler ziehen verwäscht die Form also nicht.

Bei einer Auswahl wächst der Rahmen mit, damit nichts abgeschnitten wird. Beim ganzen Sprite bleibt die Fläche gleich, Ecken außerhalb fallen weg.

Panel Hilfslinien im Dock — nur zum Zeichnen, sie erscheinen in keinem Export. G blendet alle ein und aus.

Freie Linien: „+ Waagerecht“ / „+ Senkrecht“ setzt eine Linie in die Mitte, Gleichmäßig verteilt eine eingetippte Anzahl Linien sofort gleichmäßig (4 Linien = 5 gleiche Teile). Mit dem Hand-Werkzeug (H) zieht man Linien auf der Zeichenfläche an ihren Platz (immer auf einer Pixelgrenze); aus dem Bild gezogen ist eine Linie gelöscht. Sperren hält alle Linien fest.

Figur: teilt eine Figur in 2 (Chibi), 3, 4, 6 oder 8 Kopfhöhen und markiert Kinn, Brust, Hüfte, Knie usw. samt Körperachse. Ober- und Unterkante ändern mit der Hand die Größe, eine Kopfhöhe dazwischen zieht die ganze Figur.

Eigene Layouts: Linien und Einteilung unter einem Namen speichern und auf jeden Sprite anwenden — bei anderer Größe werden sie anteilig umgerechnet. Gleicher Name ersetzt, × löscht. Die Layouts gelten für alle Sprites.

Die Linien gehören zum Sprite und werden mit dem Projekt gespeichert.

Das Panel Vorschau zeigt immer den ganzen Sprite, egal wie weit du auf der Zeichenfläche hineingezoomt hast — ohne Gitter, ohne Hilfslinien, so wie der Export ihn liefert.

Es zeichnet bei jedem Strich mit und spielt die Animation mit ab. Als Schublade schließt es sich beim Klick auf die Zeichenfläche — anpinnen (Pinnadel im Panel-Kopf), dann bleibt es beim Malen offen.

Pixelgröße: Einpassen nutzt den Platz des Panels; 1× zeigt den Sprite in seiner echten Größe — so wirkt er später im Spiel.

Jeder Sprite kann mehrere Ebenen haben — das Panel Ebenen im Dock und die Zeilen der Timeline. Gemalt wird immer in die aktive Ebene; angezeigt werden alle sichtbaren übereinander, die oberste in der Liste liegt oben.

Auge blendet aus, Schloss sperrt — in eine gesperrte oder ausgeblendete Ebene wird nicht gemalt. Der Regler stellt die Deckkraft, Doppelklick auf den Namen benennt um, Ziehen ordnet.

+ legt eine leere Ebene an, daneben duplizieren, nach unten zusammenführen, alle sichtbaren zusammenführen und löschen — jeweils in jedem Frame.

Maske: blendet Teile einer Ebene aus, ohne sie zu löschen (gilt für alle Frames). Im Modus Maske bearbeiten malen alle Werkzeuge in die Maske — Malen blendet aus, Radieren wieder ein, Ausgeblendetes erscheint rötlich. Die Maske lässt sich aus- und einschalten, anwenden (löscht die ausgeblendeten Pixel) oder löschen.

Jede Ebene hat in jedem Frame ihr eigenes Bild. Exportiert wird, was man sieht: alle sichtbaren Ebenen zusammengefügt, Masken berücksichtigt. Halbdurchsichtige Ebenen werden dabei mit der Farbe darunter gemischt.

Panel Licht: wähle, woher das Licht kommt (8 Richtungen), Stärke und Breite der Licht- und Schattenkante — auf Wunsch mit Schlagschatten in eigener Farbe und Entfernung.

Solange das Panel offen ist, zeigt die Zeichenfläche eine Vorschau. Als Ebene übernehmen legt Licht und Schatten als eigene, gesperrte Ebenen über bzw. unter der Figur an — für alle Frames; das Original bleibt unverändert.

Danach rechnet jede Änderung im Panel die Ebenen sofort neu. Malt man an der Figur weiter, erscheint Neu berechnen. Stellenweise wegnehmen geht mit einer Maske auf der Licht-Ebene.

Auch Farben außerhalb der Palette: fehlt eine passende hellere oder dunklere Palettenfarbe, wird eine freie Farbe berechnet.

Für Spiel-Levels und Muster: eine Tilemap-Ebene besteht aus Kacheln fester Größe (8–64 px). Jede Kachel steht einmal im Kachelsatz der Ebene — malt man sie an, ändert sie sich überall, wo sie liegt, auch in anderen Frames.

Panel Kacheln: Neue Tilemap-Ebene oder Aktive Ebene umwandeln (gleiche Stellen werden eine Kachel). Ein blaues Raster zeigt die Kacheln; der Rand, der in keine ganze Kachel passt, ist abgedunkelt.

Pixel malen: mit allen Werkzeugen die Kacheln bemalen. Auto legt beim Malen in eine leere Zelle eine neue Kachel an, Manuell ändert nur vorhandene.

Kacheln setzen: eine Kachel in der Liste wählen — dann setzt der Stift sie ins Raster, Radierer oder Rechtsklick leert eine Zelle, Füllen füllt eine Fläche, Alt+Klick nimmt die Kachel unter dem Zeiger auf. Mit ↺ ↻ ↔ ↕ (oder Z, Umschalt+Z, X, Y) setzt du sie gedreht oder gespiegelt — die Kachel selbst bleibt, die neue Fassung wird eine eigene Kachel. Gut für Ecken und Ränder aus einer einzigen Kachel.

Unbenutzte entfernen räumt den Kachelsatz auf, Normale Ebene macht wieder eine gewöhnliche Ebene daraus (die Pixel bleiben).

Bibliothek: „Speichern“ legt den Kachelsatz der aktiven Tilemap-Ebene unter einem Namen ins Projekt. Mit „Neue Ebene“ holst du ihn in jeden Sprite, „Übernehmen“ legt seine Kacheln in die aktive Tilemap-Ebene (die Anordnung bleibt). Gespeichert werden die Farben, nicht die Nummern — der Satz passt auch zu einer anderen Palette. Für andere Projekte: „Als Datei speichern“ und „Datei laden …“; laden geht auch mit einem fremden Kachelbild (PNG), das in Kacheln der eingestellten Größe zerschnitten wird.

Für Godot exportieren: Kachelbild (PNG), Szene .tscn mit einer TileMapLayer je Tilemap-Ebene und ein JSON für andere Engines. Den Ordner ins Godot-Projekt legen und die Szene öffnen (Godot 4.3 oder neuer). Exportiert wird der aktuelle Frame.

Jeder Sprite kann mehrere Frames haben. Die Timeline ist ein Raster: je Ebene eine Zeile, je Frame eine Spalte. Ein Klick auf eine Zelle wählt Frame und Ebene; die Frames in der Kopfzeile lassen sich ziehen. + fügt einen leeren Frame ein, daneben duplizieren und löschen.

Links in jeder Zeile: Auge, Schloss und Name der Ebene, Ziehen ordnet. Durchgehend sorgt dafür, dass neue Frames auf dieser Ebene das Bild des vorigen teilen — gut für Hintergründe.

Zellen: Shift+Klick oder Ziehen spannt einen Bereich auf; im Bereich ziehen verschiebt die Zellen (Strg: kopiert). Kopieren, Einfügen und Leeren gehen per Knopf oder mit Strg+C / V und Entf.

Verknüpfen: die markierten Frames teilen sich je Ebene ein Bild — malt man in einem, ändern sich alle. Verknüpfung lösen gibt jeder Zelle wieder ihr eigenes Bild.

Tags benennen einen Abschnitt, z. B. „Laufen“: Frames markieren, dann Tag anlegen. Ein Klick auf den Tag stellt Name, Frames und Richtung (vorwärts, rückwärts, Ping-Pong) ein und spielt ihn ab; GIFs lassen sich je Tag exportieren.

Mehrere Frames: Strg+Klick einzeln, Shift+Klick eine Spanne. Am Handy schaltet Mehrere wählen den Auswahl-Modus ein. Das Feld Frame springt auf eine eingetippte Nummer.

▶ spielt ab (Enter), ein Tipp auf die Fläche hält an. FPS gilt für den ganzen Sprite, Dauer lässt einzelne Frames länger stehen (z. B. ein Blinzeln). Onion Skin lässt die Nachbar-Frames durchscheinen; Anzahl, Stärke und Darstellung stehen im ⚙-Menü der Timeline — dort stellt man auch ein, wo die Timeline andockt.

Größe ändern, drehen, spiegeln, zuschneiden und Paletten umfärben wirken auf alle Frames. Gezeichnet wird immer in der aktiven Zelle.

Export: GIF spielt die Animation endlos ab, das Spritesheet legt die Frames nebeneinander, und alle Code-Formate enthalten alle Frames samt Dauer.

Bild laden, mit Shift+Alt+Linksklick ziehen verschieben, Deckkraft und Größe per Regler.

Shift+Alt halten → Schablone voll in den Vordergrund.

Shift+Alt+Rechtsklick → Schablonen-Pipette (exakte Farbe aus dem Bild).

Bleibt nach einem Reload erhalten.

Import liest alle Formate, die der Editor schreibt, aus Text oder Datei — samt aller Frames. Eine mitgelieferte Palette wird als eigene Palette angelegt und zugewiesen.

Code-Feld erzeugt den Export im gewählten Format, bei Animationen mit allen Frames. Freie Pipetten-Farben werden als Indizes oberhalb der Palette gesichert — der Round-Trip ist verlustfrei.

TypeScript / JavaScript — number[][] plus Palette, mit oder ohne Typen.

JSON — sprachneutral für eigene Pipelines, Engines und Tools.

JSON (Spiel) — flaches data-Array plus Palette mit Material je Farbe, versioniert — für Spiele-Engines (z. B. C#).

SVG — fertige Vektorgrafik, skaliert verlustfrei; gleiche Farbe nebeneinander wird zu einem Rechteck zusammengefasst.

CSS — der Sprite als box-shadow auf einem einzigen Element, ganz ohne Bilddatei.

C-Header — uint8-Indizes plus uint32-Palette für Mikrocontroller und LED-Matrizen.

Python — Dict und Liste für Pygame, Pillow oder eigene Skripte.

Text-Raster — ein Zeichen pro Pixel mit Legende; praktisch für Diffs und Doku.

PNG / PDF exportieren den aktuellen Frame transparent; mit Farb-Legende wird die Palette ins Bild gerendert. GIF enthält die ganze Animation.

Sind in der Timeline mehrere Frames markiert (Strg/Shift+Klick), speichern PNG und PDF je eine Datei pro Frame — durchnummeriert als name_f01.png, name_f02.png … Das GIF enthält dann nur die markierten Frames; so schneidet man einen Abschnitt heraus, ohne etwas zu löschen.

Spritesheet packt alle Sprites in gleich große Zellen — bei Animationen eine Zeile je Sprite mit allen Frames — und legt einen JSON-Atlas mit Namen, Koordinaten und Dauer daneben. So lesen Engines es direkt ein.

Kacheln: „Für Godot exportieren“ im Panel Kacheln schreibt Kachelbild, Szene und JSON (siehe Kacheln).

Desktop-App: spritebit gibt es auch als Programm für Windows (Download auf der Startseite). Es liest und schreibt dieselben Projektdateien.

Projekt sichern / Öffnen schreibt alle Sprites und Paletten in eine .sb-Datei — dieselbe öffnet auch die Desktop-App. Ältere .json-Projektdateien öffnen sich weiter. Sprites über 1024 × 1024 Pixel (aus der Desktop-App) lässt das Web beim Öffnen weg.

Timeline

Position

Kopfzeile

Aktueller Frame

Onion Skin