Sprite-Sheet-Generator
Viele kleine Bilder, eine Datei. Kombiniere deine Grafiken und erhalte die passenden CSS-Klassen dazu.
Füge Bilder hinzu, um dein Sprite-Sheet zu erstellen.
Bild anklicken zum Bearbeiten. Auf ein anderes Bild ziehen, um es an dessen Stelle einzusortieren. Große Sheets werden verkleinert dargestellt.
Speichere sprites.png und sprites.css im gleichen Ordner. Weise einem Element die gewünschte .sprite-…-Klasse zu. Die Reihenfolge der Klassen entspricht der Bilderliste.
PNG und JSON gehören zusammen. Format: TexturePacker JSON Array, z. B. für Phaser. Andere Spieleprogramme benötigen eventuell einen eigenen Importer. Die Bildnamen entsprechen den CSS-Klassen ohne Punkt.
Nach Änderungen an Reihenfolge oder Größe PNG und Export erneut herunterladen. Die Code-Hilfen erstellen noch keine Animationen oder Kollisionsformen.
Die Verarbeitung erfolgt lokal in deinem Browser. Animierte Bilder werden als einzelnes Standbild übernommen.