Γεννήτρια Sprite Sheet

Συνδυάστε πολλαπλές εικόνες σε ένα sprite sheet και δημιουργήστε κώδικα CSS.

Κοινοποίηση:

Σύρετε & Αποθέστε Εικόνες εδώ

ή κάντε κλικ για μεταφόρτωση πολλαπλών αρχείων

Γιατί να Χρησιμοποιήσετε Αυτό το Εργαλείο;

Εργαλεία Υψηλής Αποδοτικότητας για Βελτιστοποίηση Frontend

Μειώστε HTTP αιτήματα και επιταχύνετε τη φόρτωση.

Αυτόματη Δημιουργία Συντεταγμένων

Κάνουμε τα μαθηματικά για εσάς. Λαμβάνετε αμέσως ακριβείς συντεταγμένες X και Y για κάθε εικόνα στο ενοποιημένο sprite sheet.

Αλγόριθμος Έξυπνου Πακεταρίσματος

Η μηχανή μας ταξινομεί ευφυώς εικόνες διαφορετικών μεγεθών στο πιο αποδοτικό πλέγμα, ελαχιστοποιώντας κενό χώρο.

Έτοιμες CSS Classes

Δημιουργεί καθαρό, αντιγράψιμο CSS block με μεμονωμένες classes για κάθε asset, συμπεριλαμβανομένων background-position και ιδιοτήτων διαστάσεων.

Προσαρμόσιμες Λειτουργίες Διάταξης

Επιλέξτε μεταξύ Κάθετων λωρίδων, Οριζόντιων λωρίδων ή αποδοτικότερου 'Πλέγματος' ανάλογα με αρχιτεκτονική έργου.

Έλεγχος Padding και Αποστάσεων

Προσθέστε προσαρμοσμένη απόσταση μεταξύ sprites για αποτροπή 'pixel bleeding'—όπου μέρη γειτονικού εικονιδίου εμφανίζονται.

Προστασία Τοπικής Επεξεργασίας

Τα UI assets σας είναι ιδιοκτησία σας. Όλο το πακετάρισμα και δημιουργία κώδικα γίνεται στον browser χωρίς αποστολή δεδομένων.

Οδηγός Assets Υψηλής Ταχύτητας: Πώς να Χρησιμοποιήσετε τη Γεννήτρια

Δημιουργήστε sprites σε ελάχιστα βήματα.

Συλλέξτε τα Μικρά Assets σας

Μαζέψτε όλα τα μικρά εικονίδια, κουμπιά ή frames animation που θέλετε να συνδυάσετε. Βεβαιωθείτε ότι είναι σε μορφή PNG.

Μαζική Μεταφόρτωση στο Εργαλείο

Επιλέξτε όλα τα αρχεία ταυτόχρονα. Το εργαλείο δημιουργεί αμέσως οπτική προεπισκόπηση συνδυασμού.

Ρύθμιση Βελτιστοποίησης

Προσαρμόστε 'Padding' αν ανησυχείτε για ακμές σε retina οθόνες, ή επιλέξτε 'Κάθετη' διάταξη για πλαϊνό μενού.

Ανασκόπηση Προεπισκόπησης Sprite

Ελέγξτε το δημιουργημένο sheet. Βεβαιωθείτε ότι κάθε στοιχείο είναι ορατό και το πλέγμα αποδοτικό.

Λήψη Εικόνας Atlas

Κάντε κλικ 'Λήψη Sprite Sheet' για αποθήκευση ενοποιημένου αρχείου στον φάκελο assets του έργου σας.

Μυστικά Sprite Sheet: Δημιουργία Assets για Games

Είναι τα sprite sheets ακόμα σχετικά με HTTP/2;

Ναι! Ενώ HTTP/2 χειρίζεται καλύτερα πολλαπλά αιτήματα, τα sprite sheets παραμένουν ταχύτερα λόγω μειωμένου overhead μεταδεδομένων.

Τι γίνεται αν οι εικόνες έχουν διαφορετικά μεγέθη;

Ο αλγόριθμος έξυπνου πλέγματος σχεδιάστηκε γι' αυτό! Ταξινομεί εικόνες όλων μεγεθών στο πιο συμπαγές ορθογώνιο.

Πρέπει να χρησιμοποιήσω JPG ή PNG;

Συνιστούμε PNG. Χειρίζεται 'αιχμηρές ακμές' εικονιδίων καλύτερα και υποστηρίζει διαφάνεια, ουσιαστική για web UI.

Υπάρχει όριο στον αριθμό εικόνων;

Τεχνικά όχι. Ωστόσο, συνιστούμε 50-100 εικόνες ανά sheet για διαχειρίσιμες διαστάσεις αρχείου.

Τι είναι το 'Pixel Bleeding';

Συμβαίνει όταν sub-pixel rendering δείχνει λεπτή λωρίδα επόμενης εικόνας. Προσθέστε 1-2 pixels 'Padding' για αποτροπή.

Υποστηρίζει SVG;

Αυτό το εργαλείο είναι για raster sprites (PNG/JPG). Για SVG, χρησιμοποιήστε προσέγγιση 'SVG Sprite' που χειρίζεται διαφορετικά.

Πώς ενημερώνω ένα sprite sheet αργότερα;

Ανεβάστε ξανά τα αρχικά εικονίδια μαζί με τα νέα. Λαμβάνετε νέο sheet και CSS σε δευτερόλεπτα.

Είναι δωρεάν για game developers;

Ναι! Είτε φτιάχνετε ιστοσελίδα είτε mobile game, η γεννήτρια είναι 100% δωρεάν χωρίς εμπορικούς περιορισμούς.

Μπορούν οι browsers να κάνουν cache sprite sheets;

Ναι! Αυτό είναι ένα από τα μεγαλύτερα πλεονεκτήματα. Ο browser αποθηκεύει ένα αρχείο για κάθε εικονίδιο σε όλες τις σελίδες.

Είναι ασφαλή τα ιδιόκτητα εικονίδιά μου;

Απολύτως. Επειδή τα αρχεία επεξεργάζονται τοπικά στον browser, τα σχέδια δεν ανεβαίνουν, αποθηκεύονται ή εμφανίζονται στο σύστημά μας.