Sprite-Sheet-Generator

About Sprite-Sheet-Generator

Last updated: May 2026

OptiPix Sprite Sheet Generator kombiniert mehrere Bilder zu einem einzigen optimierten Sprite Sheet, mit fertig zu kopierendem CSS, JSON-Koordinaten und SCSS-Variablen. Wählen Sie ein Layout: horizontale Leiste, vertikale Leiste, Gitter (benutzerdefinierte Spaltenanzahl) oder gepackt (bin-gepackt für minimale Verschwendung von Speicherplatz). Legen Sie den Abstand zwischen den Sprites fest, um Randüberlappungen zu verhindern. Das Ergebnis ist ein einzelnes PNG-Sprite-Sheet plus generiertes CSS für jeden Sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), eine JSON-Koordinatenkarte und SCSS-Variablen. Retina @1x und @2x Skalierung wird unterstützt. Jeder Sprite erhält den Namen seiner Quelldatei. Alles läuft lokal – Ihre Bilder verlassen niemals Ihr Gerät. Entwickelt für Spieleentwickler, Webentwickler, die CSS-Sprites verwenden, und alle, die kleine Icons zu einer einzigen Netzwerkanfrage bündeln möchten.

How It Works

Jedes Eingabebild wird in den Speicher geladen; der gewählte Layout-Algorithmus (Leiste, Gitter oder Shelf Bin-Pack) berechnet die (x, y, w, h) Koordinaten pro Sprite; das Sprite Sheet wird auf eine Leinwand gerendert; CSS / JSON / SCSS werden aus derselben Koordinatenkarte generiert.

Use Cases

• •UI-Icons in einem einzigen PNG + CSS-Sprite-Sheet bündeln
• •Eine Sprite-Atlas für ein 2D-Spiel in Phaser oder Pixi erstellen
• •Social-Media-Icons zu einem einzigen CSS-Sprite für eine schnellere Website kombinieren
• •Charakter-Animations-Frames in einer horizontalen Leiste packen
• •Ein Retina-fähiges @2x-Sprite-Sheet aus Quelldateien erstellen

You Might Also Like

If you find Sprite-Sheet-Generator useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.