Δημιουργός Sprite Sheet

About Δημιουργός Sprite Sheet

Last updated: May 2026

Το OptiPix Sprite Sheet Generator συνδυάζει πολλαπλές εικόνες σε ένα βελτιστοποιημένο sprite sheet, με έτοιμο προς επικόλληση CSS, συντεταγμένες JSON και μεταβλητές SCSS. Επιλέξτε μια διάταξη: οριζόντια λωρίδα, κάθετη λωρίδα, πλέγμα (προσαρμοσμένος αριθμός στηλών) ή πακεταρισμένο (bin-packed για ελάχιστη σπατάλη χώρου). Ορίστε διάστημα μεταξύ των sprites για να αποτρέψετε το ξεθώριασμα των άκρων. Η έξοδος είναι ένα ενιαίο PNG sprite sheet συν το παραγόμενο CSS για κάθε sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), ένας χάρτης συντεταγμένων JSON και μεταβλητές SCSS. Υποστηρίζεται κλιμάκωση Retina @1x και @2x. Κάθε sprite ονομάζεται από το όνομα αρχείου προέλευσής του. Όλα εκτελούνται τοπικά - οι εικόνες σας δεν φεύγουν ποτέ από τη συσκευή σας. Δημιουργήθηκε για προγραμματιστές παιχνιδιών, προγραμματιστές ιστού που χρησιμοποιούν CSS sprites και οποιονδήποτε θέλει να ομαδοποιήσει μικρές εικόνες σε ένα μόνο αίτημα δικτύου.

How It Works

Κάθε εικόνα εισόδου φορτώνεται στη μνήμη. ο αλγόριθμος διάταξης που επιλέχθηκε (λωρίδα, πλέγμα ή shelf bin-pack) υπολογίζει τις συντεταγμένες (x, y, w, h) ανά sprite. το sprite sheet αποδίδεται σε έναν καμβά, δημιουργούνται CSS / JSON / SCSS από τον ίδιο χάρτη συντεταγμένων.

Use Cases

• •Ομαδοποίηση εικονιδίων UI σε ένα ενιαίο PNG + CSS sprite sheet
• •Δημιουργία ενός sprite atlas για ένα 2D παιχνίδι σε Phaser ή Pixi
• •Συνδυασμός εικονιδίων μέσων κοινωνικής δικτύωσης σε ένα CSS sprite για ταχύτερη ιστοσελίδα
• •Πακετάρισμα καρέ κίνησης χαρακτήρων σε οριζόντια λωρίδα
• •Δημιουργία ενός sprite sheet @2x έτοιμου για Retina από εικόνες πηγής

You Might Also Like

If you find Δημιουργός 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.