Pixel Editor
Sprites und Tilemaps, Pixel für Pixel: Frames, Onion Skinning, Paletten, Kollisionen pro Tile, Normal Maps, 9-Slice und GIF- oder Aseprite-Export.
In einem Satz#
Ein Sprite- und Tilemap-Editor, gemacht dafür, bei 32×32 genauso komfortabel zu arbeiten wie bei 1024×1024, mit Animations-Frames und einem Farbwerkzeug, das Paletten versteht.
Der Aufbau#
| Menüleiste | File · Edit · View · Plugins |
| Modus-Tabs | Sprite und Tilemap |
| Werkzeugleiste | Neu, Rückgängig/Wiederholen, Leinwandgröße, Zuschneiden, Ebenen zusammenführen, horizontal und vertikal spiegeln, Raster, Import, Export, Save |
| Optionszeile | Pinselgröße, Pinselform, Deckkraft, geteilte Ansicht und Voreinstellungen |
| Linke Leiste | Stift, Formen, Füllung, Verlauf, Text, Auswahl, Pipette, Farbpaar, Palette |
| Rechts | Layers, dann Effects, Normal map, Reference und Modes |
| Unten | die Frame-Zeitleiste, dann die Palettenleiste |
| Statusleiste | Leinwandgröße, aktive Ebene, Zoom |
Was Sie hier tun#
Zeichnen#
Space + Ziehen schwenkt, das Scrollrad zoomt, 0 setzt die Ansicht zurück.
Der Pinsel hat eine Größe und eine Form (standardmäßig quadratisch) sowie eine
Deckkraft. Das Vorschaufeld zeigt das Sprite in 1:1, während im Zoom
gearbeitet wird, die einzig ehrliche Ansicht eines Pixel-Sprites.
Ebenen#
Benannt, umsortierbar, jede mit eigenem Mischmodus und eigener Deckkraft, dazu eine Farbmarkierung und ein Filterfeld für den Fall, dass es viele davon gibt. Effects wirkt nicht-destruktiv.
Animieren#
Die Zeitleiste am unteren Rand ist ein Streifen aus Frames. Hinzufügen, duplizieren, löschen, umsortieren; eine Dauer in Millisekunden pro Frame festlegen; vorwärts, rückwärts oder im Ping-Pong abspielen. Die Anzeige verrät, was das in Summe ergibt: 1 frame • 100 ms • ~10 fps.
Onion zeigt die benachbarten Frames schwach unter dem aktuellen an, so verhindert man, dass ein Laufzyklus abdriftet.
Farbe#
Die Palettenleiste ist der Teil, bei dem sich das Erlernen auszahlt:
| Palette | die Arbeitsmenge, mit Anzahl und + Add |
| Recent | was zuletzt ausgewählt wurde |
| Shades | eine Hell-zu-Dunkel-Rampe, erzeugt aus der aktuellen Farbe |
| Harmony | komplementäre, triadische und analoge Vorschläge |
| Ramp | eine Rampe, die Sie selbst aufbauen und behalten |
Die aktuelle Farbe ist als Hex-Wert bearbeitbar.
Tilemaps#
Der Tab Tilemap wechselt vom Zeichnen eines Sprites zum Anordnen als Tiles. Das Ergebnis geht an Engine, die einen eigenen Tilemap-Editor für das Level selbst besitzt.
Normal Maps#
Der Abschnitt Normal map leitet aus dem Sprite eine Normal Map ab, sodass ein 2D-Sprite in der Engine beleuchtet werden kann, statt flach zu bleiben.
Referenz#
Legen Sie ein Bild in den Abschnitt Reference, und es liegt beim Zeichnen hinter der Leinwand.
Die Panels#
Neun an der Zahl, und die letzten vier machen aus einem Sprite ein Spiel-Asset:
| Tool Palette | die Werkzeuge |
| Layers | der Ebenenstapel |
| Timeline | die Animations-Frames |
| Reference | ein Bild hinter der Leinwand |
| Effects | nicht-destruktive Effekte auf einer Ebene |
| Tileset | ein Tileset aus der Leinwand bauen, in einer gewählten Kachelgröße |
| Tilemap | diese Tiles zu einer Karte anordnen |
| Collisions | Kollisionsformen pro Tile |
| Normal Map | eine Normal Map ableiten und bearbeiten |
Tilesets und Tilemaps#
Das Panel Tileset zerschneidet die Leinwand in Kacheln (standardmäßig 16 px); das Panel Tilemap ordnet sie zu einer Karte mit Ebenen an und kann sie in der Größe ändern.
Tilemaps werden als .tilemap gespeichert und exportieren auf zwei Wegen:
als eine Datei, oder getrennt: die Karte als JSON und jedes Tileset als
eigenes Bild, was eine externe Engine üblicherweise erwartet.
Kollisionen#
Jede Kachel trägt eine Kollisionsform, gezeichnet über dem Tileset statt im Code deklariert:
| Full | die ganze Kachel kollidiert |
| None | passierbar |
| Top / Bottom / Left / Right half | teilweise Kollision |
| Slope up / Slope down | schräge Kollision |
Show Collisions blendet sie ein, und der gesamte Satz exportiert als JSON. So erhält Engine eine Tilemap, die bereits weiß, worauf die Spielfigur laufen kann.
Normal Maps#
Generate Normal Map leitet eine aus dem Sprite ab, mit einer Stärke;
der Normal Map Editor erlaubt danach das Übermalen der Normalenrichtung
von Hand (P), der einzige Weg, die Stellen zu korrigieren, die der
automatische Durchgang falsch trifft.
9-Slice und Pivot#
9-Slice guides markieren die dehnbaren Bereiche eines UI-Sprites, und Pivot / Origin legt den Punkt fest, um den das Sprite rotiert und an dem es verankert wird. Beides reist mit dem Sprite in die Engine.
Symmetrie#
Mirror X und Mirror Y malen beide Seiten zugleich: horizontal, vertikal, beides, oder radial.
Farbrampen und Paletten#
Das Modal Color Ramp baut eine Rampe systematisch statt nach Augenmaß,
und Paletten lassen sich aus .gpl importieren (dem GIMP-Palettenformat,
in dem die meisten Pixel-Art-Paletten vorliegen).
Exportieren#
| Format | Wofür |
|---|---|
| PNG | ein einzelner Frame |
| GIF | eine Animation, überall abspielbar |
| APNG | eine Animation, mit echtem Alphakanal |
| Aseprite | zurück nach Aseprite, Ebenen bleiben erhalten |
| Atlas / Spritesheet | eine Game-Engine |
.tilemap | die Karte, zusammen oder getrennt in JSON + Bilder |
Dateien, die es liest und schreibt#
| Natives Format | .editor |
| Importe | .png, .jpg, .aseprite, .tilemap, .gpl (Paletten) |
| Exporte | .png, .gif, APNG, .aseprite, Sprite-Atlas, .tilemap (zusammen oder getrennt), Kollisions-JSON |
Arbeit an andere Module schicken#
Erzeugt Pixelgrafik. Nimmt an Pixelgrafik und Bilder.
Pixelgrafik wird angenommen von Inkwell, Composer, Animator, Matter und Engine: Ein Spritesheet kann direkt in ein Spiel wandern, ganz ohne Umweg über eine Datei.
Mit jemand anderem arbeiten#
Der Pixel Editor synchronisiert Operation für Operation: Szenendaten, Assets, Animationen und Skripte.
Grenzen und häufige Stolperfallen#
- Zoom ist nicht Auflösung. Die Statusleiste zeigt die tatsächliche Leinwandgröße; die Vorschau zeigt sie in 1:1.
- Ein weicher Pinsel ist kein Pixel-Pinsel. Eine Deckkraft unter 100 % glättet die Kanten mit Anti-Aliasing, meist nicht das, was man bei einem Sprite will.
- Die Frame-Dauer gilt pro Frame, nicht pro Animation. Ein 12-Frame-Zyklus mit je 100 ms läuft mit ~10 fps, unabhängig davon, was die anderen tun.