Was ist Sprite-Sheet-Generator?

Der Sprite-Sheet-Generator fügt mehrere einzelne Bilder zu einem optimierten Sprite-Sheet zusammen. Laden Sie Ihre Einzelbilder oder Icons hoch – oder ziehen Sie ein animiertes GIF hierher, dessen Einzelbilder automatisch übernommen werden –, wählen Sie ein Layout (Raster, horizontaler Streifen, vertikaler Streifen oder kompakt), legen Sie einen transparenten oder einfarbigen Hintergrund fest und exportieren Sie das kombinierte Bild mit Positionsdaten als JSON, JSON-Array, XML TextureAtlas oder CSS.

Der Rastermodus ordnet alles in einem gleichmäßigen N-mal-M-Layout an, ideal für Animationszyklen, bei denen jedes Einzelbild gleich groß ist. Horizontale und vertikale Streifen reihen die Einzelbilder in einer einzigen Zeile oder Spalte auf – das Standardlayout für einfache 2D-Engine-Animationen. Der kompakte Modus führt eine Packung durch, damit Icons unterschiedlicher Größe mit minimalem Verschnitt zusammenpassen. Ziehen Sie ein animiertes GIF hierher, und jedes Einzelbild wird in das Sheet dekodiert, ohne dass Sie die Einzelbilder vorher exportieren müssen. Die Ausgabe behält standardmäßig einen transparenten Hintergrund, oder Sie wählen eine einfarbige Füllung als Chroma-Key. Die Metadaten gibt es in vier Formaten – JSON-Hash, JSON-Array, XML TextureAtlas und CSS – zum direkten Einbinden in Phaser, PixiJS, Unity, Godot oder ein CSS-background-position. Eine Animationsvorschau lässt Sie die Einzelbilder mit 1 bis 60 FPS durchgehen, damit das Timing vor dem Download stimmt. Gehen Sie Einzelbild für Einzelbild durch, um versetzte Sprites zu finden, schneiden Sie den transparenten Rand jedes Frames weg, damit das Sheet kompakt bleibt, und laden Sie die Sequenz als animiertes GIF herunter, um das Ergebnis ohne Spiele-Engine zu teilen.

Anleitung

1. Laden Sie die einzelnen Bilder hoch, die Sie zu einem Sprite Sheet zusammenfügen möchten.
2. Wählen Sie das Layout (Raster, horizontal, vertikal oder gepackt), passen Sie den Abstand an und stellen Sie den Hintergrund auf transparent oder eine Volltonfarbe.
3. Laden Sie das Sprite-Sheet-Bild zusammen mit CSS- oder JSON-Positionsdaten herunter.

Wann verwenden

• Eine Lauf- oder Explosionsanimation in ein einziges Bild bündeln, damit die Engine es laden kann.
• Ein UI-Iconset in eine Datei zusammenfassen, damit die Seite einen HTTP-Request macht statt vierzig.
• Tilemap-Sprites mit gleichmäßigem Padding vorbereiten, damit benachbarte Kacheln keine Farben verbluten lassen.

Ergebnis

Ein Spieleentwickler lädt 16 Charakter-Animationsframes (je 64×64) hoch. Das Tool ordnet sie in einem 4×4-Raster an und erzeugt ein 256×256 Sprite Sheet mit JSON-Frame-Koordinaten für die Game Engine.

Häufige Fragen

Wann nehme ich gepacktes Layout statt Raster?

Nehmen Sie Raster, wenn alle Frames gleich groß sind, etwa eine 32×32-Figurenanimation. Nehmen Sie horizontale oder vertikale Streifen für eine Sequenz aus einer einzigen Zeile oder Spalte — das einfachste Format, das die meisten Engines laden. Nehmen Sie gepackt, wenn die Icons variieren, zum Beispiel ein UI-Set mit 16×16 und 48×48 gemischt; das Sheet wird kleiner, aber die Metadaten lassen sich von Hand schwerer lesen.

Wofür ist die Padding-Einstellung gedacht?

Padding fügt um jedes Frame transparente Pixel ein. Ohne diesen Abstand kann ein Renderer mit linearer Filterung Farben benachbarter Frames in die Ränder des aktuellen ziehen. Ein oder zwei Pixel Padding reichen, um diesen Artefakt zu verhindern.

Welches Metadatenformat sollte ich exportieren?

JSON (Hash) ist das TexturePacker-Format, das die meisten Engines laden, wobei jedes Einzelbild über seinen Namen indiziert wird. Das JSON-Array speichert die Einzelbilder als geordnete Liste, was Phaser 3 und einige Pipelines bevorzugen. XML ist der Starling/Sparrow-TextureAtlas, den Unity, Godot und Friday Night Funkin nutzen. CSS liefert background-position-Klassen für Web-Icon-Sets. Wählen Sie das Format, das Ihre Render-Engine erwartet.

Bleibt die Transparenz im Ergebnis erhalten?

Standardmäßig ja. Das Sheet wird als PNG mit erhaltenem Alphakanal exportiert, transparente Hintergründe der Ausgangs-PNGs werden also übernommen. Wenn Sie ein deckendes Sheet brauchen, wählen Sie neben den Layout-Reglern eine Volltonfarbe — praktisch für Chroma-Keying oder Engines, die Alpha ignorieren. Vermeiden Sie JPGs als Quelle, wenn Transparenz wichtig ist, denn JPG legt das Alpha schon vor dem Hochladen auf Weiß.

Wie viele Frames passen auf ein Sheet?

In der Praxis begrenzen mobile GPUs Texturen auf rund 2048 oder 4096 Pixel pro Seite, ein 4096x4096-Sheet mit 64x64-Frames fasst also 4096 Frames. Für Animationen ist es auf älteren Geräten sicherer, in zwei 2048x2048-Sheets zu splitten.

Ähnliche Tools