Sprite-Sheet-Generator
Kombinieren Sie Bilder zu Sprite-Sheets mit Drag-to-Reorder, Rasterlayout, Abstand, Skalierungsmodi. Export als PNG/WebP/JPG mit JSON-Atlas-Daten für Spiel-Engines und CSS.
Was ist ein Sprite-Sheet und warum sollte man eines verwenden?
Ein Sprite-Sheet ist eine einzelne Bilddatei, die mehrere kleinere Bilder (Sprites) in einem Raster enthält. Die Verwendung von Sprite-Sheets reduziert HTTP-Anfragen, verbessert die Seitenladeleistung und macht das Spiel-Rendering effizienter.
Welche Bildformate werden unterstützt?
Sie können PNG-, JPG-, GIF-, SVG- und WebP-Bilder hochladen. Das Tool unterstützt Batch-Upload und Einfügen aus der Zwischenablage (Strg+V) für schnellen Arbeitsablauf.
Welche Exportformate sind verfügbar?
Exportieren Sie Sprite-Sheets als PNG (mit Transparenz), WebP (modernes Format mit kleinerer Dateigröße) oder JPG (am besten für Fotos ohne Transparenz). Wählen Sie basierend auf Ihren Plattformanforderungen.
Wie ordne ich Bilder im Sprite-Sheet neu?
Ziehen Sie Bildminiaturen per Drag-and-Drop, um ihre Position im Sprite-Sheet neu zu ordnen. Sie können auch Bilder direkt aus der Zwischenablage mit Strg+V einfügen.
Was sind JSON-Atlas-Daten und welche Engines unterstützen sie?
JSON-Atlas-Daten enthalten Position, Größe und Informationen jedes Sprites. Sie sind mit beliebten Spiel-Engines wie Phaser, PixiJS, Unity, Cocos2d und vielen anderen für automatische Sprite-Extraktion kompatibel.
Was sind die verschiedenen Skalierungsmodi?
Der Anpassen-Modus skaliert Bilder unter Beibehaltung des Seitenverhältnisses. Füllen skaliert, um die gesamte Zelle abzudecken und schneidet Überlauf ab. Strecken dehnt Bilder, um die Zelle zu füllen, ohne das Seitenverhältnis beizubehalten.
Unterstützt das Tool Transparenz?
Ja, PNG- und WebP-Exporte bewahren die Transparenz der Originalbilder. Sie können auch eine benutzerdefinierte Hintergrundfarbe für das Sprite-Sheet festlegen, was für JPG-Exporte nützlich ist, die keine Transparenz unterstützen.
Wie beeinflusst der Abstand das Sprite-Sheet?
Abstand fügt Raum zwischen einzelnen Sprites im Sheet hinzu, um visuelles Bluten beim Textur-Sampling zu verhindern. Dies ist besonders wichtig für Spiel-Engines, die lineare Filterung verwenden.
Kann ich Sprite-Sheets für CSS verwenden?
Ja, Sprite-Sheets funktionieren hervorragend für CSS-Sprites. Die JSON-Atlas-Daten können verwendet werden, um CSS background-position-Regeln zu generieren, was HTTP-Anfragen reduziert und die Seitenladeleistung verbessert.
Was sind Best Practices für Sprite-Sheet-Dimensionen?
Halten Sie Dimensionen als Zweierpotenzen (256x256, 512x512, 1024x1024) für optimale GPU-Texturbehandlung. Die meisten Spiel-Engines bevorzugen diese Dimensionen für bessere Leistung.
Wie verbessern Sprite-Sheets die Spiel-Leistung?
Sprite-Sheets reduzieren Draw-Calls, indem mehrere Sprites in eine einzige Textur gebündelt werden. Dies minimiert GPU-Zustandsänderungen, reduziert Speicher-Overhead und ermöglicht effizienteres Rendering.
Was ist der Unterschied zwischen Sprite-Sheets und Textur-Atlanten?
Sprite-Sheets organisieren Frames typischerweise in einem einheitlichen Raster, während Textur-Atlanten unregelmäßig geformte Sprites effizienter mit Algorithmen wie Bin Packing packen können.
So verwenden Sie Sprite-Sheet-Generator
Fassen Sie mehrere Bilder direkt im Browser zu einem Sprite Sheet zusammen. Ziehen Sie Frames zum Umsortieren, justieren Sie Raster und Abstände fein und exportieren Sie einen PNG/WebP/JPG-Atlas mit JSON-Daten für Game Engines und CSS-Sprites. Alles wird lokal verarbeitet.
- Fügen Sie Ihre Bilder hinzu und stellen Sie mit den Schaltflächen + und − die Columns und Rows des Rasters ein.
- Setzen Sie Padding (px), um zwischen den Sprites Platz zu schaffen und Textur-Bleeding zu verhindern.
- Lassen Sie Sprite Size auf Auto für das größte Frame oder geben Sie feste Maße für gleichmäßige Zellen ein.
- Wählen Sie einen Scale Mode — Fit, Fill oder Stretch — um festzulegen, wie jedes Bild in seiner Zelle sitzt.
- Wählen Sie einen Background (Transparent, White, Black oder Custom), stellen Sie das Format auf PNG, WebP oder JPG und benennen Sie die Datei unter Filename.
- Ziehen Sie die Vorschauen, um Frames umzuordnen — die Atlas-Koordinaten aktualisieren sich automatisch — und exportieren Sie das Sheet samt JSON-Atlas.
Nehmen Sie mindestens 2 px Abstand, damit benachbarte Sprites beim Skalieren oder Filtern der Texturen in Ihrer Engine nicht ineinanderlaufen.
Verwandte Tools
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- HTTP-Anfrage-Tester Testen Sie REST-APIs direkt im Browser. Senden Sie GET-, POST-, PUT-, DELETE-Anfragen mit benutzerdefinierten Headern, Body und Parametern. Sehen Sie sofort Status, Header und JSON-Body.
- .htaccess-Generator Generieren Sie Apache .htaccess-Regeln für Weiterleitungen, Umschreibungen, Sicherheitsheader, Caching und mehr.
- Robots.txt Generator Kostenloser Online-robots.txt-Generator. Erstellen und passen Sie robots.txt-Dateien an, um das Crawling von Suchmaschinen zu steuern, Crawler-Zugriff zu verwalten und die SEO Ihrer Website zu optimieren.
- Sitemap Generator Kostenloser Online-Sitemap-Generator. URLs hinzufügen, Prioritäten und Häufigkeiten setzen, SEO-Sitemaps sofort erstellen.
- GIF Frames Extrahieren Extrahieren und laden Sie einzelne Bilder aus GIF-Animationen als PNG oder Sprite-Sheet herunter. Kostenloses Online-Tool mit Vorschau und ZIP-Export.
- GIF Rückwärts Kehren Sie die Abspielreihenfolge von GIF-Animationen kostenlos online um. Hochladen, Vorschau und sofort herunterladen.