Sprite-Sheet-Generator — PNG + JSON + CSS
Fassen Sie mehrere Bilder zu einem Sprite-Sheet-PNG mit JSON- und CSS-Koordinaten zusammen. Raster- oder gepacktes Layout, einstellbarer Abstand — kostenlos und vollständig im Browser.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenWas ein Sprite-Sheet ist und warum es hilft
Ein Sprite-Sheet fasst viele kleine Bilder — Animationsframes, Spiel-Tiles, UI-Icons, Emojis oder Flaggen — in einem einzigen größeren Bild zusammen. Eine Datei statt Dutzender zu laden reduziert HTTP-Anfragen und Texturwechsel, sodass Webseiten und Spiele schneller laden und rendern. Jedes einzelne Sprite wird dann angezeigt, indem man auf sein Rechteck innerhalb des Sheets verweist. Dieser Sprite-Sheet-Generator erstellt Bild und Koordinaten für Sie: Dateien hineinziehen, Layout wählen und ein PNG zusammen mit einer JSON-Datendatei und einem sofort einsetzbaren CSS-Stylesheet herunterladen.
Alles geschieht in Ihrem Browser. Die Bilder werden lokal auf ein Canvas gezeichnet und die Koordinatendateien in JavaScript erzeugt, sodass Ihre Grafiken nie hochgeladen werden und Sie das Sheet beliebig oft neu erzeugen können, während Sie mit den Einstellungen experimentieren.
Raster oder gepacktes Layout
Das gleichmäßige Raster gibt jedem Sprite eine Zelle in der Größe des größten Bildes und zentriert jedes Sprite in seiner Zelle. Diese vorhersehbare Struktur erwarten die meisten Animationssysteme: Frame n liegt immer in Spalte n modulo Spaltenanzahl. Gepackte Zeilen sortieren die Sprites nach Höhe und füllen Zeilen bis zu einer Zielbreite, was deutlich weniger Platz verschwendet, wenn Ihre Bilder unterschiedlich groß sind. In beiden Modi fügt der Abstandswert transparenten Raum um jedes Sprite hinzu, um Farbüberlauf beim Skalieren des Sheets zu vermeiden.
JSON- und CSS-Ausgabe verwenden
Die JSON-Datei listet jedes Sprite unter einem sauberen, aus dem Dateinamen abgeleiteten Namen auf, mit x- und y-Position, Breite und Höhe sowie der Gesamtgröße des Sheets. Spiele-Frameworks wie Phaser und PixiJS können dieses Hash-Format direkt laden, und es lässt sich in jeder Sprache leicht parsen. Die CSS-Datei definiert eine Basisklasse, die das Sheet als Hintergrundbild setzt, und eine Klasse pro Sprite mit Größe und Hintergrundposition — ein Icon ist also einfach ein span mit zwei Klassen. Passen Sie das Klassenpräfix an die Namenskonventionen Ihres Projekts an und legen Sie das PNG neben die CSS-Datei oder ändern Sie die URL.
So verwenden Sie
- Bilder hinzufügenZiehen Sie die einzelnen Sprites oder Icons hinein; sie werden in der Reihenfolge hinzugefügt, in der Sie sie ablegen.
- Layout wählenWählen Sie ein gleichmäßiges Raster mit einer Spaltenanzahl oder gepackte Zeilen und stellen Sie den Abstand ein.
- Vorschau prüfenPrüfen Sie das Sheet und entfernen Sie ein Bild, indem Sie auf seinen Namen klicken.
- HerunterladenSpeichern Sie das PNG-Sheet sowie die JSON- und CSS-Koordinatendateien.