Sprite-Sheet-Generator

Mehrere Bilder zu einem Sprite-Sheet mit CSS-, SCSS- oder JSON-Koordinaten zusammenführen

👇 Scrolle nach unten für eine kurze Schritt-für-Schritt-Anleitung

Deine Sprites hier hineinziehen

oder klicke irgendwo, um Dateien auszuwählen

PNGJPGWEBPGIF

Erstellt CSS

Bilder laden, um Code zu erzeugen

CSS-Klassen und JSON-Koordinaten erscheinen hier

Bevor du beginnst mit Sprite-Sheet-Generator

Stelle mehrere Bilder im Browser in einem Sprite-Sheet zusammen, mit einstellbaren Abständen und Koordinatenausgabe als CSS, SCSS oder JSON.

Am besten für

Einzelne Spiel-Einzelbilder oder UI-Symbole zu einem PNG-Atlas zusammenführen
CSS-, SCSS- oder JSON-Koordinaten zusammen mit dem Sprite-Sheet erstellen
Ein einfach in Reihen gepacktes Sprite-Sheet direkt im Browser erstellen

Vor dem Start wissen

Das Packprogramm ordnet Bilder in Zeilen an; es ist kein universeller Optimierer für Packprobleme
Rand- und Skalierungseinstellungen beeinflussen die endgültigen Sheet-Abmessungen
Große Batches belegen beim Dekodieren aller Bilder Browserspeicher

Arbeitsablauf fortsetzen

Sprite-Sheet-SchneidewerkzeugTeile einen vorhandenen Atlas in einzelne Einzelbilder auf.Pixel-Art-VergrößererVergrößere Pixel-Art-Einzelbilder vor dem Packen.BildkompressorReduziere die Größe des exportierten Sheets für die Weitergabe.Leitfaden zum Packen von Sprite-AtlantenErfahre mehr über Abstände, Größen als Zweierpotenzen und Farbübergriffe.Leitfaden zu CSS-SpritesEntscheide, wann ein CSS-Sprite noch sinnvoll ist.Unity-Sprite-Sheet-ImportImportiere den erstellten Atlas in Unity.

So verwendest du den Sprite-Sheet-Generator

1Bilder hinzufügen

• Klicke auf „Bilder hinzufügen“ oder ziehe Sprite-Bilder hinein
• Unterstützt PNG, JPG, JPEG und WebP
• Verwende Automatisch optimieren für automatische Optimierung

2Arbeitsfläche konfigurieren

• Arbeitsfläche: Abmessungen einstellen (Benutzerdefiniert-/Max-Modus)
• Größe ändern: Sprites mit einem Prozentregler skalieren
• Zwischenabstand: Abstand zwischen Sprites anpassen

3Code erstellen

• Format: CSS-, SCSS- oder JSON-Ausgabe wählen
• Benennung: Benennungsschema für Sprites festlegen
• Sortierung: Nach Größe oder Name sortieren

4Ressourcen herunterladen

• Klicke auf „PNG herunterladen“ für das Sprite-Sheet-Bild
• Klicke auf „Code herunterladen“ für CSS-/JSON-Koordinaten
• Nutze „Leeren“, um mit neuen Sprites zu beginnen

Wichtige Funktionen:

Zeilenweises Packen mit Abstandseinstellung

Sprite-Größen vor dem Packen ändern

CSS-, SCSS- und JSON-Ausgabe

Läuft in deinem Browser, ohne Upload

Fragen zum Sprite-Sheet-Generator

Was macht ein Sprite-Sheet-Generator?

Es packt separate Bilddateien in ein Atlasbild. Zusammengehörige Sprites gemeinsam abzulegen, kann die Auslieferung einer Ressource erleichtern. Die erzeugten Koordinaten zeigen CSS oder Spielcode, wo jedes Sprite im Sprite-Sheet liegt.

Welche Codeformate kann ich exportieren?

Das Werkzeug kann zusätzlich zum PNG-Sprite-Sheet Koordinatendaten als CSS, SCSS oder JSON erzeugen. Die JSON-Datei enthält die Einzelbildpositionen und -abmessungen, sodass du sie an das von deiner Spiel-Engine oder Anwendung erwartete Asset-Format anpassen kannst.

Werden meine Bilder auf einen Server hochgeladen?

Nein. Die Bilder werden in deinem Browser dekodiert und gepackt. Quelldateien und erzeugtes Sprite-Sheet werden nicht an einen ImageMint-Upload-Server gesendet.

Warum sind Abstände in einem Sprite-Atlas wichtig?

Abstände lassen Raum zwischen benachbarten Sprites. Ohne ausreichende Trennung können Texturfilterung oder skaliertes Rendern einen benachbarten Sprite abtasten und auslaufende Farben an der Kante erzeugen.

Passende Sprite-Arbeitsabläufe

Um einen vorhandenen Atlas wieder in einzelne Einzelbilder zu zerschneiden, nutze das Sprite-Sheet-Schneidewerkzeug . Die Leitfaden zur Sprite-Atlas-Packung erklärt Abstände und auslaufende Kantenfarben. Für enginespezifische Folgeschritte siehe den Unity-Importleitfaden und Godot-Importleitfaden.