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.