Generator Sprite Sheet

About Generator Sprite Sheet

Last updated: May 2026

OptiPix Sprite Sheet Generator combină mai multe imagini într-o singură foaie de sprite optimizată, cu CSS gata de lipit, coordonate JSON și variabile SCSS. Alegeți un aspect: bandă orizontală, bandă verticală, grilă (număr personalizat de coloane) sau împachetat (bin-packed pentru spațiu minim irosit). Setați spațierea dintre sprite-uri pentru a preveni scurgerile de la margine. Rezultatul este o singură foaie de sprite PNG plus CSS generat pentru fiecare sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), o hartă de coordonate JSON și variabile SCSS. Scalare Retina @1x și @2x suportată. Fiecare sprite este numit după numele fișierului sursă. Totul rulează local - imaginile dvs. nu părăsesc niciodată dispozitivul. Construit pentru dezvoltatori de jocuri, dezvoltatori web care folosesc CSS sprites și oricine dorește să grupeze pictograme mici într-o singură cerere de rețea.

How It Works

Fiecare imagine de intrare este încărcată în memorie; algoritmul de aspect ales (bandă, grilă sau bin-pack pe raft) calculează coordonatele per sprite (x, y, w, h); foaia de sprite este randată pe un canvas; CSS / JSON / SCSS sunt generate din aceeași hartă de coordonate.

Use Cases

• •Grupați pictogramele UI într-o singură foaie de sprite PNG + CSS
• •Creați o atlasă de sprite pentru un joc 2D în Phaser sau Pixi
• •Combinați pictogramele rețelelor sociale într-un singur sprite CSS pentru un site mai rapid
• •Împachetați cadrele de animație ale personajelor într-o bandă orizontală
• •Construiți o foaie de sprite @2x pregătită pentru retină din imaginile sursă

You Might Also Like

If you find Generator Sprite Sheet 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.