Laufender Pinguin
Sechs Frames in einer Zeile, alle auf derselben Bodenlinie.
Sprite Sheet erstellen: alle Bilder auf einem Sheet
Zieh deine PNG-Frames, Icons oder Game-Items hierher und du bekommst in Sekunden ein Sprite Sheet: als sauberes Raster oder dicht gepackt, mit JSON- oder XML-Atlas, CSS-Sprites und animiertem GIF. Mit diesem kostenlosen Sprite Sheet Maker kannst du dein Sprite Sheet erstellen, ohne etwas hochzuladen: Alles läuft in deinem Browser.
Sprite Sheet erstellenKostenlos · läuft in deinem Browser
Bilder hierher ziehen
PNG, WebP, JPG, GIF oder AVIF, so viele du brauchst. Alles bleibt in deinem Browser.
- Kostenlos, läuft in deinem Browser
- Raster oder dicht gepackt
- JSON, XML und CSS
- Zuschneiden, Rand, Zweierpotenz
Beispiele: Sprite Sheets für Spiele und Websites
Acht Bildersets, eigens für diese Beispiele gemacht, jedes mit diesem Sprite Sheet Generator zu einem Sheet zusammengefügt. Öffne eins und probier jede Einstellung aus.
Explosionseffekt
Acht Frames in einem quadratischen Raster, vom Funken bis zum Rauch.
App-Icons
Neun Icons in verschiedenen Größen, zugeschnitten und dicht gepackt.
Pixel-Art-Items
Acht Items, gepackt in 200 % Größe mit scharfen Pixeln.
Obst-Icons für CSS
Sechs Icons in einer Zeile, fertig als CSS-Sprites für eine Webseite.
Weltraum-Sticker
Sechs Sticker in drei Spalten auf einem Sheet mit Zweierpotenz-Größe.
Fliegende Fledermaus
Vier Frames in einer Spalte für Engines, die von oben nach unten lesen.
Schachfiguren
Sechs Figuren in verschiedenen Höhen, gepackt mit XML-Atlas.
So kannst du ein Sprite Sheet erstellen
Drei Schritte, und nichts wird hochgeladen.
Zieh PNG-, WebP-, JPG- oder GIF-Dateien hierher, füge sie ein oder wähle sie aus, so viele du brauchst. Sortiere sie nach Namen oder zieh sie in die richtige Reihenfolge.
Nimm ein Raster aus gleich großen Zellen für Animations-Frames, oder pack Bilder jeder Größe dicht zusammen. Stell Zuschnitt, Rand, Abstand und Größe ein.
Speichere das Sprite Sheet als PNG mit JSON- oder XML-Atlas, CSS-Sprites für eine Website oder die Bilder als animiertes GIF.
Was dieser Sprite Sheet Maker am besten kann
Sechs Stärken, vom Laufzyklus bis zu einer ganzen Seite voller Web-Icons.
BilderRaster oder gepackt
Ein Raster aus gleich großen Zellen hält Animations-Frames in ihrer Reihenfolge; die gepackte Anordnung bringt Bilder jeder Größe auf das kleinste Sheet, das sie findet.
Transparente Ränder zuschneiden
Leere Ränder fallen weg und sparen Platz, und der Atlas speichert Originalgröße und Versatz jedes Bildes, damit in deinem Spiel nichts verrutscht.
Ein Atlas für jede Engine
Der JSON-Atlas ist das Hash-Format, das Phaser und PixiJS lesen; der XML-Atlas ist das Sparrow- und Starling-Format, das viele Game-Frameworks lesen.
CSS-Sprites für Websites
Eine Klasse pro Bild mit Größe und Position, damit eine Seite ein einziges Bild lädt statt Dutzende.
Animationsvorschau und GIF
Spiel die Bilder der Reihe nach mit der Bildrate ab, die du einstellst, und speichere sie als animiertes GIF zum Teilen oder Testen.
Kostenlos und privat
Dieser Sprite Sheet Maker läuft komplett in deinem Browser: kein Upload, kein Konto, kein Wasserzeichen, und sobald die Seite geladen ist, funktioniert er auch offline.
Ratgeber: Sprite Sheets, die zu deiner Engine passen
Fünf kurze Tipps für ein sauberes Sprite Sheet.
Benenne deine Dateien der Reihe nach
Dateien wie walk_1, walk_2 … walk_10 landen mit „Nach Name sortieren“ in der richtigen Reihenfolge, denn Zahlen werden als Zahlen gelesen; jedes Bild kannst du per Ziehen verschieben.
Raster für Animationen, gepackt für Sets
Nimm ein Raster, wenn Frames dieselbe Größe und Position behalten müssen; pack Icons, Items und Tiles in verschiedenen Größen, um Platz zu sparen.
Zuschneiden und Versatz behalten
Zuschneiden macht das Sheet kleiner, und Engines, die den Atlas lesen, setzen jedes Bild wieder an seinen Platz. Für ein einfaches Raster, das nach Zellengröße gelesen wird, lass das Zuschneiden aus.
Rand gegen Bildfehler an den Kanten
Füg 1 bis 2 px Rand oder Abstand hinzu, wenn das Sheet skaliert oder gefiltert wird, damit an den Kanten nie benachbarte Bilder durchscheinen.
Behalte die Größe des Sheets im Blick
Die Größe steht unter der Vorschau. Bleib für Handys auf jeder Seite bei höchstens 4.096 px, und schalte Zweierpotenz-Größen ein, wenn deine Engine sie verlangt.
Wer einen Sprite Sheet Maker nutzt
Häufige Gründe, mit einem Sprite Sheet Generator viele Bilder auf ein einziges Sheet zu bringen.
Spieleentwicklung
Pack Figuren, Effekte und Items in eine einzige Textur, mit Atlas für die Engine.
Webentwicklung
Fass Icons mit CSS-Sprites zu einem Bild zusammen und spar dir viele Anfragen.
Pixel-Art
Ordne Animations-Frames an und exportiere ein sauberes Sheet in 2× oder 4× Größe.
Modding und Animation
Bau Sheets mit XML- oder JSON-Atlas für Mods, Tools und Animationssoftware.
Häufige Fragen zu Sprite Sheets
Antworten zum Erstellen von Sprite Sheets, zu Atlas-Formaten und zum Datenschutz.
Füg deine Bilder hinzu, wähle Raster oder gepackt und lade dann das Sprite Sheet als PNG herunter, mit dem Atlas oder CSS, das du brauchst.
Ja. Er läuft komplett in deinem Browser, braucht kein Konto und setzt kein Wasserzeichen.
Nein. Deine Bilder werden auf deinem Gerät gelesen und angeordnet; nichts geht an einen Server.
Ein Raster gibt jedem Bild eine gleich große Zelle, ideal für Animationen. Gepackt bringt Bilder verschiedener Größen so dicht wie möglich zusammen, ideal für Icons und Items.
JSON für Phaser, PixiJS und die meisten Web-Engines, XML für Frameworks im Stil von Sparrow und Starling und CSS für Webseiten.
Nein. Der Atlas speichert Originalgröße und Versatz jedes Bildes, sodass Engines, die ihn lesen, jeden Frame an seinem Platz zeichnen.
Ja. Öffne das GIF in „GIF in Sprite Sheet“: Das Tool liest jeden Frame mit seiner Dauer und legt alle auf ein Sheet.
Bis zu 1.000 Bilder am Computer und 400 am Handy, auf einem Sheet mit bis zu 16.384 px pro Seite.
Jetzt Sprite Sheet erstellen
Füg deine Bilder hinzu und lade in Sekunden ein Sprite Sheet herunter, kostenlos mit diesem Sprite Sheet Maker in deinem Browser.
Bilder hinzufügen