Sprite-Editor

Pyxen enthält einen vollständigen Sprite-Editor zum Erstellen und Bearbeiten von Pixel-Art direkt in deinem Projekt auf iPad und Mac. Keine externen Werkzeuge nötig — gestalte deine Sprites und sieh die Änderungen sofort in deinem laufenden Spiel.

Den Sprite-Editor öffnen

Tippe auf ein Bild-Asset in der Seitenleiste, dann tippe auf den Bearbeiten-Button, um vom Bildbetrachter zum Sprite-Editor zu wechseln.

Zeichenwerkzeuge

Die Werkzeugleiste oben bietet:

• Stift — einzelne Pixel zeichnen
• Radierer — Pixel entfernen
• Füllen — einen zusammenhängenden Bereich mit der gewählten Farbe füllen
• Linie — gerade Linien zwischen zwei Punkten zeichnen
• Rechteck — Rechtecke zeichnen (Umriss oder gefüllt)
• Ellipse — Ellipsen zeichnen (Umriss oder gefüllt)

Wähle ein Werkzeug, wähle eine Farbe aus der Palette und zeichne auf der Leinwand. Zoome mit Pinch (iPad) oder Scrollen (Mac) für pixelgenaues Arbeiten hinein.

Farbpalette

Die Palette befindet sich am unteren Rand des Editors. Tippe auf eine Farbe, um sie auszuwählen. Verwende die Pipette, um eine Farbe von der Leinwand aufzunehmen.

Die Palette ist pro Bild — jedes Sprite-Sheet kann seinen eigenen Farbsatz haben.

Auswahlwerkzeuge

• Rechteckige Auswahl — ziehe, um einen rechteckigen Bereich auszuwählen
• Zauberstab — tippe, um einen zusammenhängenden Bereich ähnlicher Farbe auszuwählen. Halte Umschalt gedrückt, um zur Auswahl hinzuzufügen, oder Umschalt+Option, um davon abzuziehen.
• Verschieben — ziehe die Auswahl, um sie neu zu positionieren

Ausgewählte Bereiche zeigen Marching Ants (animierte gestrichelte Umrandung). Mit einer aktiven Auswahl kannst du:

• Ausschneiden (Cmd+X) — die Auswahl entfernen und in die Zwischenablage kopieren
• Kopieren (Cmd+C) — die Auswahl in die Zwischenablage kopieren
• Einfügen (Cmd+V) — die Zwischenablage als neue schwebende Auswahl einfügen
• Löschen — den ausgewählten Bereich leeren

Ebenen

Das Ebenenpanel auf der rechten Seite zeigt alle Ebenen im aktuellen Bild. Du kannst:

• Ebenen hinzufügen — neue Ebenen darüber oder darunter erstellen
• Ebenen neu anordnen — ziehen, um die Stapelreihenfolge zu ändern
• Sichtbarkeit umschalten — Ebenen während der Arbeit vorübergehend ausblenden
• Ebenen zusammenführen — Ebenen zu einer kombinieren

Jede Ebene wird unabhängig gezeichnet. So kannst du Hintergründe, Charaktere und Effekte in verschiedene Ebenen trennen und sie bearbeiten, ohne die anderen zu beeinflussen.

Größe ändern und Leinwand

• Größe ändern — die Bildabmessungen ändern (skaliert bestehenden Inhalt)
• Leinwandgröße — die Leinwandgröße ändern, ohne zu skalieren (fügt Platz um die Ränder hinzu oder entfernt ihn)

Animations-Zeitleiste

Der Sprite-Editor enthält eine eingebaute Animations-Zeitleiste zum Erstellen von Frame-für-Frame-Sprite-Animationen.

Die Zeitleiste öffnen

Tippe auf den Film-Stapel-Button (unten rechts auf der Leinwand), um den Animationsmodus umzuschalten. Der Zeitleisten-Streifen erscheint unterhalb der Leinwand.

Animationen erstellen

1. Öffne die Animationsauswahl (links in der Zeitleiste) und tippe auf Neue Animation
2. Gib ihr einen Namen (z.B. “walk”, “idle”, “attack”)
3. Wähle Kacheln auf deinem Sprite-Sheet mit dem Kachelauswahl-Werkzeug, dann tippe auf Zur Animation hinzufügen
4. Oder tippe auf den +-Button in der Zeitleiste, um die nächste Kachel in Lesereihenfolge hinzuzufügen

Frames bearbeiten

• Auf einen Frame tippen um ihn auszuwählen — die Leinwand zoomt zu dieser Kachel zum Bearbeiten
• Rechtsklick auf einen Frame um ihn zu entfernen oder neu anzuordnen
• Wiedergabesteuerung — Abspielen/Stoppen, FPS-Stepper (1-60), Frame-Zähler

Zwiebelschicht

Aktiviere den Zwiebelschicht-Button, um eine Geisterüberlagerung des vorherigen Frames beim Bearbeiten zu sehen. Das hilft, die Konsistenz zwischen Animationsframes beizubehalten.

Kachel-Isolation

Beim Bearbeiten eines Frames aktiviere den Isolations-Button, um umgebende Kacheln auszublenden oder abzudunkeln, damit du dich auf den aktuellen Frame konzentrieren kannst.

Animationen im Code verwenden

Animationen werden in den Metadaten des Sprites gespeichert. Spiele sie in deinem Spiel mit dem animation-Parameter ab:

player.sprite = Sprite("hero", animation="walk")

Siehe Sprites und Rendering und die Sprite-Referenz für die vollständige API.

Rückgängig und Wiederholen

Jede Operation im Sprite-Editor unterstützt Rückgängig (Cmd+Z) und Wiederholen (Cmd+Umschalt+Z). Der Rückgängig-Stapel ist pro Bild und bleibt erhalten, solange das Projekt geöffnet ist.

Live-Vorschau

Wenn dein Spiel läuft, werden alle Änderungen im Sprite-Editor sofort übernommen — male einen Pixel und sieh ihn in der Spielvorschau erscheinen. Das macht es einfach, an deiner Grafik zu iterieren, während du das Gameplay testest.

Tipps

• Verwende die Gitterüberlagerung, um Kacheln auf einem Tile-Sheet präzise auszurichten
• Arbeite hineingezoomt für Pixeldetails, zoome heraus, um das gesamte Bild zu sehen
• Ebenen eignen sich hervorragend, um Animationsframes auf demselben Sheet zu trennen
• Der Sprite-Editor speichert automatisch — Änderungen werden in die Projektdatei geschrieben, während du arbeitest
• Aktiviere auf dem iPad mit Apple Pencil Nur mit Stift zeichnen in den Einstellungen, um mit dem Stift zu zeichnen und mit dem Finger zu verschieben