Sprite-Editor

Pyxen enthält einen vollständigen Sprite-Editor, mit dem du Pixel-Art direkt in deinem Projekt erstellst und bearbeitest, auf dem iPad und auf dem Mac. Keine externen Werkzeuge nötig.

Den Sprite-Editor öffnen

Wähle ein Bild in Dateien: Es öffnet sich direkt im Sprite-Editor. Für ein neues wähle Datei › Neues Asset… und dann Bild.

In einem schmalen iPad-Fenster nimmt die Leinwand die ganze Breite des Bereichs ein, und seine Felder sind die Werkzeuge der Ablage am Fuß des Fensters: Werkzeuge, Farbe, Ebenen und Frames. Bei einer Tilemap sind es Werkzeuge und Kacheln.

Zeichenwerkzeuge

Die Werkzeuge liegen am Rand der Leinwand, jedes mit seiner Taste:

Wähle eine Farbe und zeichne auf die Leinwand. Zoome mit zwei Fingern oder durch Scrollen für pixelgenaue Arbeit; Einpassen (Cmd+0) zeigt das ganze Bild. Symmetrie in der Leiste des Editors spiegelt, was du zeichnest, horizontal, vertikal oder beides.

Farben

Die Seitenspalte enthält die Farbe, mit der du zeichnest, und die Hintergrundfarbe (X tauscht sie), die Farbe als Hex-Wert, die Palette und die zuletzt verwendeten Farben. Eine andere Palette wählst du im Menü ⋯.

Auswahlwerkzeuge

Mit einer Auswahl kann das Menü der Leinwand (Rechtsklick, oder berühren und halten):

Auf dem iPad widerrufen, wiederholen, schneiden aus, kopieren und setzen die Bearbeitungstasten über der Leinwand ein.

Ebenen

Die Ebenen liegen unter der Palette. Ebene hinzufügen fügt eine hinzu; jede Ebene hat einen Schalter Sichtbar und Gesperrt. Das Menü einer Ebene benennt sie um, bewegt sie nach oben oder unten, stellt ihre Deckkraft ein; Nach unten reduzieren verbindet sie mit der darunter, Auf eine Ebene reduzieren macht aus allen eine, und Ebene löschen entfernt sie.

Jede Ebene wird unabhängig gezeichnet. So kannst du Hintergründe, Figuren und Effekte auf verschiedene Ebenen trennen und sie bearbeiten, ohne die anderen zu verändern.

Größe ändern, spiegeln und drehen

Bildgröße ändern… ändert die Größe des Bildes:

Das Menü der Leinwand hat außerdem Auf Inhalt zuschneiden, Horizontal spiegeln, Vertikal spiegeln und Drehungen um 90° und 180°.

Das Raster (Raster in der Leiste) hilft, Kacheln auf einem Sheet auszurichten; seine Größe, seine Hauptlinien und seine Farbe stehen im Menü ⋯.

Animation

Der Fuß des Editors enthält die Animationen des Bildes, für Sprite-Animationen Frame für Frame.

Animationen erstellen

  1. Wähle Neue Animation und gib ihr einen Namen (z. B. „walk“, „idle“, „attack“)
  2. Wähle mit dem Werkzeug Kachelauswahl (T) Kacheln auf deinem Sprite-Sheet aus und wähle dann Zur Animation hinzufügen
  3. Oder wähle Frame hinzufügen, um die nächste Kachel in Leserichtung hinzuzufügen

Ganzes Sheet zeigt wieder das ganze Bild; das Menü einer Animation benennt sie um oder löscht sie.

Frames bearbeiten

Zwiebelhaut

Schalte Zwiebelhaut ein, um beim Bearbeiten ein Abbild des vorherigen Frames zu sehen. Das hilft, die Frames einheitlich zu halten.

Frame isolieren

Schalte Frame isolieren ein, um die Kacheln um den bearbeiteten Frame auszublenden, damit du dich auf ihn 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.

Im Code verwendet in der Leiste des Bereichs sagt, wie viele Zeilen deiner Skripte dieses Bild nennen; wähle eine, um dorthin zu gehen. Im Code bringt dich ein Cmd+Klick auf den Namen eines Bildes hierher zurück, auf die Animation oder die Kachel, die der Aufruf nennt.

Ein Sprite exportieren

Exportieren… am Ende des Menüs ⋯, Animation exportieren… im Menü einer Animation oder Datei › Sprite exportieren… (Option+Cmd+E) öffnet Sprite exportieren. Wähle, was entstehen soll:

Wähle die Animation und, für Frame, den Frame. Skalierung macht die Datei 1×, 2×, 4× oder 8× so groß, jedes Pixel ein scharfes Quadrat. Die Vorschau ist die Datei, mit Name und Größe darunter: hero-walk@4x.gif, hero-walk-2.png für Frame 2, hero-walk-strip.png, hero.png für das Sheet.

Speichern… sichert die Datei, wo du willst; auf dem iPad öffnet Teilen… das Teilen-Menü (In Dateien sichern, Bild sichern, AirDrop); im Web lädt Herunterladen sie herunter. Kopieren legt ein PNG in die Zwischenablage. Auf Mac und iPad ziehst du die Vorschau dorthin, wo die Datei hin soll.

Ein GIF kennt keine halbtransparenten Pixel: Ein mindestens halb deckendes Pixel wird voll gezeichnet, der Rest ist durchsichtig. Ein GIF-Frame dauert ganze Hundertstelsekunden: 8 fps spielen 0,13 s pro Frame, und nichts läuft schneller als 50 fps.

Rückgängig und Wiederholen

Jede Änderung im Sprite-Editor lässt sich widerrufen (Cmd+Z) und wiederholen (Cmd+Umschalt+Z), solange das Projekt geöffnet ist.

Deine Grafik im Spiel sehen

Dein Spiel liest seine Bilder bei jedem Start: Starte das Spiel nach dem Malen erneut, um die neuen Pixel in der Spielvorschau zu sehen. Ein laufendes Spiel behält die Bilder, mit denen es gestartet ist.

Tipps