Sprite-Sheet-Packer
Packen Sie mehrere Icon- oder Sprite-Bilder in ein einziges Sheet und erzeugen Sie Koordinatenkarten (JSON/CSS) clientseitig. Schnell, offline-sicher und kostenlos. Vereinfachen Sie Spiele-Assets und optimieren Sie sofort die Stylesheet-Verbindungen Ihrer Website.
Warum unseren Sprite-Sheet-Packer nutzen?
- 100 % privat und lokal: Ihre Bild-Assets werden vollständig im lokalen Browser-Speicher verarbeitet. Keine Grafiken oder Metadaten gelangen zu externen Servern, was absolute Design-Privatsphäre und Compliance für persönliche und kommerzielle Projekte gewährleistet.
- Optimale Packlayouts: ordnet Icons mit einem fortschrittlichen wachsenden 2D-Binärbaum-Packalgorithmus an, der die Sheet-Fläche minimiert. Sie können auch zwischen standardmäßigen linearen vertikalen und horizontalen Stapeloptionen wechseln.
- CSS- und JSON-Generatoren: kompiliert sofort responsive CSS-Klassen mit negativen Background-Positionen oder exportiert Standard-JSON-Maps, die mit Web-Engines und Spielen (wie PixiJS, Phaser und Cocos2d) kompatibel sind.
- Interaktiver Overlay-Inspektor: prüfen und visualisieren Sie gepackte Koordinaten dynamisch. Beim Überfahren eines Sprites in der generierten Koordinatenkarte wird sein exakter Begrenzungsrahmen direkt auf dem Canvas-Sheet hervorgehoben.
Der Sprite-Sheet-Vorteil: Netzwerk-Overhead reduzieren
Browser begrenzen die Anzahl gleichzeitiger HTTP-Verbindungen zu einem einzelnen Host (oft auf 6 Verbindungen begrenzt). Wenn eine Website auf Dutzende winzige Icon-Bilder angewiesen ist, verursacht das individuelle Laden Netzwerklatenz, Warteschlangenverzögerungen und kumulative Layoutverschiebungen. Sprite-Sheets lösen dies durch Konsolidierung. Das Laden eines einzigen größeren Bildes fasst alle HTTP-Payloads in einem einzigen TCP-Verbindungsstrom zusammen. Außerdem beseitigt es die lästigen weißen Flackereffekte, die auftreten, wenn ein Browser bei einer Nutzerinteraktion versucht, ein separates Hover-Zustandsbild zu laden.
Wie 2D-Bin-Packing-Algorithmen die Sheet-Fläche optimieren
Mehrere beliebige Rechtecke mit minimalem Verschnitt in einen einzigen Begrenzungsbereich zu packen, ist ein NP-vollständiges Problem. Dieses Tool nutzt einen wachsenden 2D-Binärbaum-Packalgorithmus. Der Packer beginnt mit der Größe des ersten Elements und wächst dynamisch nach rechts oder unten, um neue Blöcke aufzunehmen, wobei er den Pfad wählt, der das Gesamtseitenverhältnis des Sheets nahe an einem Quadrat hält. Das vorherige Sortieren der Elemente nach absteigender Fläche stellt sicher, dass größere Blöcke zuerst platziert werden, sodass kleinere Blöcke eng in die verbleibenden Lücken passen.
CSS-Background-Position vs. JSON-Texturkarten
Nach dem Packen benötigen Sprites Koordinatenkarten, um Anwendungen mitzuteilen, wo sich jedes Icon befindet. Weblayouts setzen auf CSS-Sprite-Klassen. Indem eine gemeinsame Klasse mit der Hintergrundbild-URL zugewiesen und einzelne negative Hintergrundversätze angewendet werden (z. B. `background-position: -32px -64px`), rendern Browser den spezifischen Teilbildblock. Für canvas-basierte Anwendungssysteme und 2D-Spiele ordnen Standard-JSON-Hashes jede benannte Datei ihren exakten Begrenzungskoordinaten zu, sodass Engines Texturen dynamisch in WebGL-Viewports zuschneiden und aufteilen können.
Häufig gestellte Fragen
Ein Sprite-Sheet-Packer ist ein Offline-Design-Tool, das mehrere separate Bilder oder Icons in einer einzigen Bilddatei kombiniert. Es ermittelt die exakten Pixelkoordinaten für jede Originalgrafik und generiert Stylesheet- oder Datendateien, damit Anwendungen einzelne Elemente korrekt anzeigen können.
Wenn Sie Dateien laden, liest Ihr Browser sie als Bildobjekte in den Speicher. Der Packalgorithmus berechnet die kompakteste Koordinatenanordnung auf einem virtuellen Raster und zeichnet die Sprites auf ein Offscreen-Canvas. Die Ergebnisse werden direkt in Ihrem Browser als Bilder und Code exportiert.
Ja, unser Sprite-Sheet-Packer läuft vollständig clientseitig in Ihrem lokalen Browser. Keine Ihrer Bilddateien, Abmessungen, Namen oder Designs werden an unsere Server gesendet. Alle Pixel-Zeichen- und Packvorgänge laufen lokal auf Ihrem Computer, was absolute Privatsphäre für geistiges Eigentum gewährleistet.
Das Dienstprogramm unterstützt drei Packlayouts. Der Binärbaum-Modus führt einen wachsenden Partitionierungsalgorithmus aus, um Elemente in einen quadratähnlichen Platzbedarf zu packen. Das vertikale Layout stapelt Elemente in einer einzigen Spalte, und das horizontale Layout ordnet sie nebeneinander in einer breiten Reihe an.
Das Tool generiert zwei gängige Mapping-Sheets. Der CSS-Tab liefert Klassenregeln mit Zielabmessungen und negativen Background-Position-Koordinaten. Der JSON-Tab gibt Standard-TexturePacker-Hash-Konfigurationen aus, die Koordinaten, Zuschnitte und Sheet-Größen definieren - perfekt für moderne Web-Spiele-Frameworks.
Ja, Sie können einen eigenen Abstand oder eine Füllung zwischen Ihren Sprites konfigurieren. Das Tool unterstützt Werte von 0px bis 32px. Das Hinzufügen von Abstand wird dringend empfohlen, um Bleeding-Artefakte zu vermeiden, bei denen Pixel benachbarter Sprites versehentlich an den Rändern Ihres Layouts gerendert werden.
Sie können maximale Grenzen bis zu 4096px in Breite und Höhe konfigurieren. Da die gesamte Verarbeitung im Browser-Speicher läuft, hängt die Leistung von Ihrem Geräte-RAM ab. Das Pack-Dienstprogramm wirft einen Fehler, wenn die Layoutkonfigurationen Ihre Ziel-Canvas-Größengrenzen überschreiten.