Ein Sprite-Sheet in Godot importieren

Die Textur ins Projekt übernehmen

Godot importiert Ressourcen durch Überwachung des Dateisystems. Kopiere deine PNG-Datei an eine beliebige Stelle im Projektverzeichnis, und sie erscheint im FileSystem-Dock mit einer .import Datei, die daneben erstellt wird. Du bearbeitest diese Datei nie von Hand. Ändere die Einstellungen im Import-Bereich und drücke Erneut importieren.

Kümmere dich zuerst um die Filterung, denn sie ist die sichtbarste einzelne Einstellung für Pixel-Art. In Godot 4 liegt der Texturfilter am Node statt in den Importeinstellungen, unter CanvasItem → Texture → Filter. Stelle es auf Nearest und harte Pixelkanten bleiben hart. Das pro Node einzustellen wird schnell mühsam. Ändere stattdessen die Projektvoreinstellung: Project Settings → Rendering → Textures → rendering/textures/canvas_textures/default_texture_filter → Nearest. Jedes CanvasItem, das auf Inherit übernimmt es dann.

Lasse im Import-Bereich Mipmaps aus bei 2D-Sprites nahe ihrer nativen Größe. Beachte, dass Godot 4 Texturen nur dann in VRAM-Formate komprimiert, wenn du wählst VRAM Compressed. Die Standardeinstellung Lossless Modus ist für Pixel-Art richtig. VRAM-Komprimierung erzeugt genau die Blockartefakte, die bei einfarbigen Grafiken am stärksten auffallen.

Methode 1: AnimatedSprite2D und SpriteFrames

Das ist der Weg für alles Animierte und der Ausgangspunkt für die meisten Projekte. AnimatedSprite2D ist ein Node, der enthält eine SpriteFrames Ressource – eine benannte Sammlung von Animationen, von denen jede eine geordnete Texturliste mit einem FPS-Wert und einem Schleifenschalter ist.

1. Füge ein AnimatedSprite2D zu deiner Szene.
2. Klicke im Inspector auf die Sprite Frames Eigenschaft und wähle Neue SpriteFrames. Unten im Editor öffnet sich ein SpriteFrames-Bedienfeld.
3. Benenne die Standardanimation um von default in etwas Aussagekräftiges – walk, idle. Auf diese Zeichenfolgen wirst du im Code verweisen.
4. Füge Einzelbilder über eine der beiden Schaltflächen in der Werkzeugleiste hinzu: Einzelbilder aus Sprite-Sheet hinzufügen (das Rastersymbol) oder Einzelbilder aus Datei(en) hinzufügen (das Dateisymbol).
5. Stelle die Animations-FPS und den Schleifenschalter ein. Spiele die Animation dann im Bereich ab, um das Timing zu prüfen, bevor du Code einbindest.

Einzelbilder aus Sprite-Sheet hinzufügen

Ein Klick auf das Rastersymbol öffnet einen Dialog, in dem du die PNG-Datei auswählst und anschließend ihr Layout beschreibst: Horizontal und Vertical Häufigkeiten sowie Separation und Offset wenn das Sheet Ränder oder Zwischenräume hat. Die Vorschau wird live aktualisiert. Klicke dann die gewünschten Zellen in der gewünschten Reihenfolge an. Umschalt-Klick wählt einen Bereich.

Zwei wichtige Details: Erstens wird die Auswahlreihenfolge zur Einzelbildreihenfolge. Klickst du Zellen durcheinander an, läuft auch die Animation durcheinander. Zweitens setzt dieser Dialog ein gleichmäßiges Raster voraus, genau wie Unitys Grid By Cell Count. Er besitzt überhaupt keinen Inhaltserkennungsmodus und kein Gegenstück zu Unitys Automatic-Aufteilung. Ist das Raster nicht echt, kann dieser Dialog es nicht retten.

Einzelbilder aus Datei(en) hinzufügen

Wähle mehrere einzelne PNGs aus. Sie werden zu Einzelbildern in der Reihenfolge, in der Godot sie sortiert, also alphabetisch. Fülle die Zahlen in deinen Dateinamen mit führenden Nullen auf – walk_01.png durch walk_12.png – sonst landet Einzelbild 10 direkt hinter Einzelbild 1. Dieser Weg ist am einfachsten korrekt umzusetzen. Deshalb ist gerade in Godot das vorherige Zerschneiden eines Sheets in Dateien oft der reibungslosere Ablauf.

Methode 2: AtlasTexture-Bereiche

Ein AtlasTexture ist eine Ressource, die auf einen Bereich einer größeren Textur verweist und sich überall, wo Godot Texturen akzeptiert, wie eine eigenständige Textur verhält. Du erstellst sie, indem du eine beliebige Textureigenschaft einstellst auf Neue AtlasTexture, wobei du das Sprite-Sheet seiner atlas Eigenschaft und Eingeben der region Rechteck (x, y, Breite, Höhe).

Das ist die flexibelste und zugleich manuellste Option. Sie eignet sich besonders, wenn die benötigten Sprites an beliebigen Positionen liegen, mehrere Nodes unterschiedliche Teile einer Textur brauchen oder du die Bereiche im Code aus Daten erzeugst:

• Ein UI-Theme, das Nine-Patch-Elemente und Symbole aus einer gemeinsamen Textur entnimmt.
• Ein Kachelset oder Gegenstandskatalog, bei dem ein Skript AtlasTextures aus einem zusammen mit dem Sprite-Sheet exportierten JSON-Manifest erstellt.
• Einzelne statische Sprites, für die eine eigene Datei übertrieben erscheint.

Der filter_clip Eigenschaft solltest du kennen: Ihre Aktivierung verhindert die Texturabtastung außerhalb ihres Bereichs. Das behebt einen dünnen Streifen des benachbarten Sprites, der an einer Kante einfließt.

Methode 3: hframes und vframes an Sprite2D

Eine einfache Sprite2D hat drei Eigenschaften, mit denen es ein Sheet ganz ohne zusätzliche Ressourcen einliest: hframes, vframes, und frame. Stelle hframes auf 4 und vframes auf 4. Godot teilt die Textur dann in ein 4×4-Raster; die Einstellung frame auf einen Index von 0 bis 15 zeigt diese Zelle an.

Das ist der schlankste Ansatz und lässt sich sauber über eine AnimationPlayer-Spur animieren an der frame Eigenschaft oder mit einigen Zeilen in _process. Bei einem von einem Werkzeug exportierten Sprite-Sheet ist das tatsächlich alles, was du brauchst.

Warum ungleichmäßige Sheets alle drei Methoden scheitern lassen und was hilft

Alle oben beschriebenen Methoden setzen voraus, dass du das Sprite-Sheet rechnerisch beschreiben kannst. Add Frames from Sprite Sheet benötigt Anzahlen. hframes/vframes benötigen Anzahlen. AtlasTexture benötigt konkrete Rechtecke, die du korrekt angeben kannst, aber nur durch manuelles Vermessen jedes einzelnen.

Sheets aus Bildgeneratoren verletzen diese Annahme. Ein Modell, das um einen „4×4-Gehzyklus“ gebeten wird, erzeugt etwas Rasterähnliches, weil es Tausende Raster gesehen hat, nicht weil es Zellgrenzen berechnet hat. Die Abstände verschieben sich pro Spalte um einige Pixel, und der Versatz summiert sich von links nach rechts. Sprite-Größen variieren je nach Pose, und die Inhalte liegen nicht mittig in ihren gedachten Zellen. Setzt du hframes auf 4, sieht die erste Spalte gut aus, die zweite ist leicht abgeschnitten, und die vierte schneidet durch die Figur.

Die zuverlässige Lösung ist, das Sheet nicht länger zu beschreiben, sondern es auszulesen. Auf transparentem Hintergrund gehört jeder Pixel entweder zum Sprite, mit Alpha über null, oder zum Hintergrund, mit Alpha null. Vollständig transparente Zeilen und Spalten zwischen Sprites markieren die tatsächlichen Grenzen, wo auch immer diese liegen. Schneide in der Mitte jedes solchen Zwischenraums und beschneide jedes Teil auf seinen eigenen Inhalt. So erhältst du Einzelbilder, die nicht von einem angenommenen Raster abhängen.

Genau das erledigt der Tab Magic Slice in unserem Sprite-Sheet-Schneidewerkzeug tut, mit einigen Verfeinerungsdurchgängen für Teile, die noch zwei Sprites oder übermäßige Ränder enthalten. Exportiere die Ergebnisse als einzelne PNGs und lade sie mit Einzelbilder aus Datei(en) hinzufügen. Wenn die automatische Erkennung Schwierigkeiten hat – sich berührende Sprites, ein Leuchteffekt über die gesamte Arbeitsfläche oder eine Figur mit abgetrennten Teilen –, kannst du im Tab „Manuell & Vorlagen“ jede Rasterlinie in den richtigen Zwischenraum ziehen. Bei einem Sprite-Sheet mit sechzehn Einzelbildern sind das sechs Verschiebungen.

Wenn dein Sprite-Sheet einen undurchsichtigen Hintergrund statt Transparenz hat, verarbeite es mit Hintergrundentfernung zuerst. Einmalige Verarbeitung des gesamten Sheets bedeutet eine Operation und ein einheitliches Ergebnis. Spätere Verarbeitung von sechzehn Einzelbildern bietet sechzehn Gelegenheiten für Abweichungen.

Einzelne PNGs gegenüber einem Sprite-Sheet

Bei den meisten 2D-Projekten ist der Unterschied bei den Zeichenaufrufen nicht der Engpass, und die bequemere Arbeit mit Einzeldateien überwiegt. Wenn Texturwechsel irgendwann relevant werden, packe die fertigen Einzelbilder als Build-Schritt in einen Atlas, statt sie von Anfang an als manuell geschnittenes Mega-Sprite-Sheet zu erstellen.

Häufig gestellte Fragen