Sprite Sheet packen mit kostenlosen Tools (2026)

Ein Sprite Sheet ist ein einzelnes Bild, das viele kleinere Bilder enthält. Ein Texture Atlas ist dieselbe Idee mit einer Datendatei daneben, die für jeden Frame festhält, wo er liegt: Name, Position, Größe und manchmal, ob er beschnitten oder gedreht wurde. In der Praxis meinen beide Wörter dasselbe, und jede Engine und jedes Packprogramm nennt es ein wenig anders.

Diese Anleitung zeigt, wie du ein Sprite Sheet mit kostenlosen Tools packst, welche Einstellungen darüber entscheiden, ob es im Spiel richtig aussieht, wie du das Ergebnis in Phaser 3, Unity, Godot und reinem CSS lädst und welche Fehler am häufigsten auftreten. Am Ende gibt es einen kurzen Abschnitt für alle, die Sprite-Pakete verkaufen.

Warum Sprites überhaupt packen

Der Grund ist auf jeder Plattform derselbe: weniger einzelne Dinge, um die sich die Grafikkarte oder der Browser kümmern muss.

Weniger Draw Calls im Spiel. Ein Renderer kann Sprites, die sich eine Textur teilen, meist in einem einzigen Draw Call bündeln. Ist jeder Frame jeder Figur ein eigenes Bild, muss der Renderer ständig die Textur wechseln, und das Batching bricht. Liegen die Frames auf einem Atlas, gehen Dutzende Sprites gemeinsam raus.
Weniger Requests im Web. Vierzig kleine Icons als vierzig Dateien bedeuten vierzig Requests. Ein Sprite Sheet ist ein Request und ein Dekodiervorgang. HTTP/2 hat viele kleine Requests günstiger gemacht, aber ein einzelnes Bild lässt sich immer noch einfacher cachen und vorladen.
Weniger verschwendeter Speicher. Ältere GPUs und manche mobilen Treiber runden Texturen auf die nächste Zweierpotenz auf. Ein Bild mit 130 mal 70 Pixeln kann im Speicher 256 mal 128 belegen. Viele Bilder in einem gut bemessenen Atlas verschwenden deutlich weniger.
Einfachere Asset-Verwaltung. Ein Dateipaar (Bild plus Daten) lässt sich leichter versionieren, ausliefern und laden als ein Ordner mit Hunderten Frames.

Packen lohnt sich nicht immer. Ein einzelnes Hintergrundbild oder ein ohnehin riesiger Sprite gewinnt durch einen Atlas nichts. Der Gewinn entsteht, wenn viele kleine Bilder zusammen gezeichnet werden.

Kostenlose Tools zum Packen

Für einen guten Atlas musst du nichts bezahlen. Die Tabelle listet die Tools aus diesem Artikel. „Kostenlos“ heißt, dass du ohne Lizenzkauf einen brauchbaren Atlas erzeugen kannst; einige haben bezahlte Stufen mit zusätzlichen Funktionen.

Tool	Funktioniert mit	Typische Ausgabe	Kosten
TexturePacker	Phaser, Pixi, Unity, Godot, Cocos, CSS und vielem mehr	PNG + JSON, XML, engine-spezifische Dateien	Kostenloser Basismodus, bezahlte Pro-Funktionen
Free Texture Packer (free-tex-packer)	Phaser, Pixi, generisches JSON, XML, CSS	PNG + JSON Hash oder Array, XML	Kostenlos, Open Source
Aseprite	Jede Engine, die JSON-Framedaten liest	PNG + JSON Hash oder Array	Kostenpflichtig, Quellcode zum Selbstkompilieren verfügbar
Unity Sprite Atlas	Nur Unity	Interner Atlas, beim Build oder im Play Mode erzeugt	In Unity enthalten
Godot AtlasTexture	Nur Godot	Ressource, die auf einen Bereich einer Textur zeigt	In Godot enthalten
Handgemachter CSS-Sprite	Browser	Ein PNG oder SVG + CSS background-position	Kostenlos

Wenn du dir aus der Tabelle nur eines merkst: Ist dein Ziel eine JavaScript-Engine wie Phaser oder Pixi, deckt Free Texture Packer fast alles kostenlos ab. Arbeitest du in Unity oder Godot, nutze zuerst das eingebaute Atlas-System und greife nur dann zu einem externen Packer, wenn du etwas brauchst, das es nicht kann.

Schritt für Schritt: Packen mit Free Texture Packer

Free Texture Packer ist eine Desktop-App (es gibt auch eine Webversion), die einen Ordner mit Bildern nimmt und einen Atlas schreibt. Für Webspiele ist sie eine gute Standardwahl, weil sie Export-Presets für gängige JavaScript-Engines mitbringt.

Frames vorbereiten. Exportiere jeden Frame als eigenes PNG mit Transparenz. Benenne sie so, dass sie richtig sortiert werden: run_00.png, run_01.png und so weiter. Führende Nullen sind wichtig; ohne sie landet run_10 vor run_2.
Ordner hinzufügen. Zieh den Ordner in die App. Unterordnernamen werden meist Teil des Framenamens, was beim Gruppieren hilft (hero/run_00.png).
Exportformat wählen. Für Phaser 3 nimm das Phaser-3-Preset oder JSON Hash. JSON Array funktioniert auch; den Unterschied erklärt der Abschnitt weiter unten.
Padding und Extrude setzen. Starte mit 2 Pixeln Padding und 1 Pixel Extrude. Warum, steht im Abschnitt über Einstellungen.
Über Trimming und Rotation entscheiden. Trimming entfernt transparente Ränder und spart Platz. Rotation erlaubt dem Packer, Frames um 90 Grad zu drehen, damit mehr hineinpasst. Lass Rotation aus, solange du nicht sicher bist, dass deine Engine gedrehte Frames aus diesem Format unterstützt.
Maximale Größe festlegen. 2048 mal 2048 ist eine sichere Obergrenze für die meisten Ziele, auch für Smartphones. Passen die Frames nicht, teile sie auf mehrere Atlanten auf, statt das Limit blind zu erhöhen.
Exportieren. Du bekommst ein Bild und eine Datendatei mit demselben Basisnamen. Halte sie zusammen.

TexturePacker funktioniert nach demselben Ablauf: Sprites hinzufügen, ein Datenformat aus der langen Liste von Frameworks wählen, Padding und Trimming anpassen, veröffentlichen. Einige erweiterte Optionen sind als Pro markiert, und die App weist dich darauf hin, wenn eine gewählte Einstellung eine Lizenz braucht. Für einen einfachen Atlas aus PNG plus JSON reicht der kostenlose Modus.

Export aus Aseprite

Wenn du Pixel Art in Aseprite zeichnest, brauchst du in vielen Projekten keinen separaten Packer. Nutze File, Export Sprite Sheet. Im Dialog wählst du das Layout (nach Zeilen, nach Spalten, gepackt), welche Ebenen und Tags enthalten sein sollen, Rand- und Formabstand und ob getrimmt wird. Im Ausgabe-Tab kannst du neben dem Bild eine JSON-Datendatei schreiben, als Hash oder als Array.

Das JSON enthält auch deine Animations-Tags mit ihren Framebereichen und die Dauer pro Frame, die du in der Zeitleiste festgelegt hast. Manche Engines und Plugins können diese direkt lesen, sodass du Framenummern nicht von Hand eintippen musst. Bei mehreren Dateien ist ein übliches Vorgehen, jede Figur aus Aseprite als einzelne Frames oder als Streifen zu exportieren und dann alles zusammen mit einem allgemeinen Packer zu packen, damit das ganze Spiel weniger Texturen teilt.

Einstellungen, die wirklich zählen

Die meisten optischen Fehler mit Atlanten kommen von vier oder fünf Einstellungen. Sie richtig zu setzen, ist die eigentliche Fähigkeit.

Padding und Extrude

Wenn die GPU eine Textur mit aktiver Filterung abtastet, mischt sie benachbarte Pixel. Am Rand eines Frames kann der Nachbar zum nächsten Frame im Atlas gehören. Das Ergebnis ist eine dünne Linie in der falschen Farbe am Rand eines Sprites, oft nur sichtbar, wenn sich die Kamera bewegt oder der Sprite skaliert wird. Das nennt man Bleeding.

Padding fügt leeren Raum zwischen den Frames ein, damit nichts Fremdes zum Mischen da ist. Extrude wiederholt die äußerste Pixelreihe jedes Frames nach außen, sodass der Sampler, wenn er doch über den Rand greift, die eigene Farbe des Frames erwischt. Für Tiles, die bündig aneinanderliegen müssen, ist Extrude die Einstellung, die sichtbare Nähte entfernt. Zwei Pixel Padding und ein Pixel Extrude sind ein vernünftiger Startpunkt; erhöhe sie, wenn du Mipmaps nutzt oder Sprites stark verkleinerst.

Trimming

Trimming schneidet transparente Ränder ab und speichert die Originalgröße und den Versatz in der Datendatei. Die Engine setzt den beschnittenen Frame dann wieder an die richtige Stelle. Bei Figuren mit viel Leerraum spart das eine Menge Platz. Der Haken: Ignoriert deine Engine oder dein Loader die Trim-Daten, zittern Animationen, weil jeder Frame eine andere Größe hat. Phaser, Pixi und die gängigen Packer behandeln das bei JSON Hash und Array korrekt. Wenn ein Sprite auf der Stelle wackelt, prüfe zuerst das Trimming.

Rotation

Erlaubt man dem Packer, Frames um 90 Grad zu drehen, passt mehr auf dasselbe Sheet. Die Engine muss sie beim Zeichnen zurückdrehen, und nicht jeder Loader tut das. Erscheinen Frames seitlich, schalte Rotation aus. Der gesparte Platz ist das Debugging selten wert.

Zweierpotenzen und maximale Größe

Moderne Desktop-GPUs kommen mit Texturen, die keine Zweierpotenz sind, gut zurecht, WebGL 2 ebenfalls. Größen als Zweierpotenz (512, 1024, 2048, 4096) sind trotzdem die sichere Wahl, wenn du auf älteren Geräten Mipmaps brauchst, komprimierte Texturformate verwendest, die sie erwarten, oder dir bei der Hardware unsicher bist. Bei der maximalen Größe wird 2048 mal 2048 fast überall unterstützt. 4096 mal 4096 funktioniert auf den meisten aktuellen Geräten, auf schwachen Smartphones kann der Upload aber langsam sein oder ganz verweigert werden. Wenn dein Spiel für Mobilgeräte gedacht ist, bleib bei Atlanten mit 2048 und nutze mehrere davon.

Pixel Art und Filterung

Pixel Art sollte mit Nearest-Neighbour-Sampling gezeichnet werden, nicht mit linearer Filterung, sonst wird sie unscharf. In Phaser setzt du pixelArt: true in der Spielkonfiguration. In Unity stellst du den Filter Mode der Textur auf Point und schaltest bei kleinen Sheets die Kompression ab. In Godot setzt du den Texturfilter auf Nearest, am Node oder in den Projekteinstellungen. Mit Nearest-Sampling tritt Bleeding seltener auf, Padding hilft aber trotzdem, wenn Sprites auf Subpixel-Positionen stehen.

Exportformate: JSON Hash, JSON Array, XML

Das Bild ist fast immer ein PNG. Die Formate unterscheiden sich bei der Datendatei.

JSON Hash speichert die Frames als Objekt mit dem Framenamen als Schlüssel: "frames": { "run_00.png": { ... } }. Einfach nach Namen nachzuschlagen.
JSON Array speichert die Frames als Liste, jeder mit einem Feld filename. Die Reihenfolge ist garantiert, was manche Tools bevorzugen.
XML, etwa im Starling / Sparrow-Stil, führt jede Subtextur mit den Attributen x, y, width und height auf. Phaser kann diesen Stil mit load.atlasXML laden.

Phaser 3 liest JSON Hash und JSON Array über denselben Aufruf load.atlas, für Phaser spielt die Wahl also kaum eine Rolle. Entscheide dich für eines und bleib im ganzen Projekt dabei.

Einen Atlas in Phaser 3 laden

Hier eine minimale Szene, die einen Atlas lädt, einen Sprite daraus platziert und aus nummerierten Frames eine Laufanimation baut.

class GameScene extends Phaser.Scene {
  preload() {
    // image and data file exported by the packer
    this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json');
  }

  create() {
    this.anims.create({
      key: 'run',
      frames: this.anims.generateFrameNames('hero', {
        prefix: 'run_',
        start: 0,
        end: 7,
        zeroPad: 2,
        suffix: '.png'
      }),
      frameRate: 12,
      repeat: -1
    });

    const player = this.add.sprite(200, 300, 'hero', 'run_00.png');
    player.play('run');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  scene: GameScene
};

new Phaser.Game(config);

Die Framenamen in generateFrameNames müssen exakt mit den Namen im JSON übereinstimmen, einschließlich der Dateiendung, falls der Packer sie behalten hat. Öffne das JSON einmal und sieh nach; die meisten Warnungen über fehlende Frames entstehen durch ein Präfix oder Suffix, das nicht passt.

Unity Sprite Atlas und Godot AtlasTexture

In Unity erstellst du einen Sprite Atlas über das Create-Menü unter 2D und ziehst dann Ordner oder einzelne Sprites in seine Liste der zu packenden Objekte. Im Inspector des Atlas gibt es Padding, eine Option, Rotation zu erlauben, und eine Option für Tight Packing. Tight Packing folgt dem Umriss des Sprites statt seinem Rechteck und spart Platz, kann aber Sprites mit ungewöhnlicher Form abschneiden, also prüfe das Ergebnis. Deine Sprites behalten ihre eigenen Referenzen in Szenen und Prefabs; Unity setzt beim Build den Atlas ein. Achte darauf, dass Sprite Packing in den Editor-Einstellungen des Projekts aktiviert ist, sonst siehst du im Play Mode keinen Effekt.

In Godot ist eine AtlasTexture eine Ressource, die auf einen rechteckigen Bereich einer anderen Textur zeigt. Du kannst sie im Inspector anlegen, das große Sheet als Atlas zuweisen und die Region festlegen. Für animierte Figuren kann der SpriteFrames-Editor, den AnimatedSprite2D verwendet, ein Sheet in ein Raster schneiden und die Frames direkt hinzufügen, was oft schneller ist, als viele AtlasTexture-Ressourcen von Hand zu erstellen. Für Tilemaps arbeitet der TileSet-Editor direkt mit dem Sheet und hat eigene Einstellungen für Separation und Margin.

CSS-Sprites für das Web

Für Icons auf einer Website ist ein Sprite ein Bild mit allen Icons und CSS, das den richtigen Ausschnitt zeigt. Viele Packer können ein Stylesheet exportieren; du kannst es auch von Hand schreiben.

.icon {
  width: 32px;
  height: 32px;
  background-image: url('/img/icons.png');
  background-repeat: no-repeat;
}
.icon-cart   { background-position: 0 0; }
.icon-search { background-position: -32px 0; }
.icon-user   { background-position: -64px 0; }

Für Bildschirme mit hoher Pixeldichte exportierst du das Sheet in doppelter Größe und setzt background-size auf die Originalmaße, damit jedes Icon scharf bleibt. Für einfache einfarbige Icons ist ein SVG-Sprite mit <symbol>-Elementen und <use> oft die bessere Wahl als ein PNG, weil er ohne zusätzliche Dateien skaliert.

Häufige Fehler

Dünne Linien an Sprite-Rändern. Bleeding durch Filterung. Füge Padding und Extrude hinzu oder stelle Pixel Art auf Nearest-Sampling um.
Animation zittert auf der Stelle. Getrimmte Frames, deren Trim-Versatz der Loader nicht liest, oder Frames mit unterschiedlicher Leinwandgröße exportiert. Behalte eine Leinwandgröße pro Animation oder stelle sicher, dass die Trim-Daten genutzt werden.
Frames erscheinen gedreht. Der Packer hat sie gedreht, und der Loader dreht nicht zurück. Schalte Rotation aus.
Atlas läuft am Desktop, am Smartphone bleibt alles leer. Das Sheet überschreitet die maximale Texturgröße des Geräts. Teile es in Sheets mit 2048 auf.
Warnungen über fehlende Frames. Namen passen nicht wegen Präfix, Suffix, Unterordner oder fehlender führender Nullen.
Neu packen verändert alles. Positionen im Sheet verschieben sich, wenn du einen Frame hinzufügst. Lade Frames immer über den Namen, nie über fest eingetragene Koordinaten, dann macht das nächste Neupacken nichts kaputt.
Ein riesiger Atlas für das ganze Spiel. Gruppieren nach Level oder Bildschirm hält den Speicherbedarf niedriger, weil nur geladen wird, was die aktuelle Szene braucht.

Wenn du Sprite-Pakete verkaufst

Käufer nutzen verschiedene Engines und verschiedene Packer, deshalb ist das nützlichste Paket eines, das für alle funktioniert. Ein paar Gewohnheiten machen ein Paket leichter zu kaufen und leichter zu benutzen:

Beide Formen mitliefern. Lege die einzelnen Frames als separate PNG-Dateien bei und einen gepackten Atlas mit seinem JSON. Wer mit eigenen Einstellungen neu packt, will die Einzelframes; wer einfach einsetzen und loslegen will, will den Atlas.
Die Fakten im Listing nennen. Framegröße in Pixeln, Anzahl der Frames pro Animation, im Atlas verwendetes Padding und Extrude, ob Frames getrimmt sind, das Datenformat (JSON Hash, JSON Array, XML) und die Bildrate, für die du gezeichnet hast.
Vorhersehbare Namen. Führende Nullen, Kleinbuchstaben, ein Präfix pro Animation. Käufer schreiben Code gegen diese Namen.
Eine Vorschau beilegen. Ein animiertes GIF oder ein kurzes Video jeder Animation beantwortet die wichtigste Frage schon vor dem Kauf.
Die Lizenz klar angeben. Sag, ob das Paket in kommerziellen Spielen verwendet werden darf.

Wenn du sehen willst, wie andere Creator ihre Pakete präsentieren, oder dein eigenes zum Verkauf anbieten möchtest, ist die Kategorie 2D-Sprites auf Getly ein Ort, an dem Sprite-Pakete verkauft werden.

Ein Sprite Sheet zu packen dauert ein paar Minuten, sobald die Einstellungen klar sind: einheitliche Framenamen, etwas Padding und Extrude, sorgfältiger Umgang mit Trimming, keine Rotation, solange du dir beim Loader nicht sicher bist, und eine Atlasgröße, die die Zielhardware akzeptiert. Wenn das stimmt, verschwindet der Atlas im Hintergrund, und genau dort gehört er hin.