स्प्राइट शीट जेनरेटर

मल्टीपल इमेज को एक सिंगल sprite sheet में कम्बाइन करें और CSS कोड जनरेट करें।

शेयर करें:

इमेज यहाँ ड्रैग और ड्रॉप करें

या मल्टीपल फाइलें अपलोड करने के लिए क्लिक करें

Why Use This Tool?

Frontend ऑप्टिमाइज़ेशन के हाई-एफिशिएंसी फीचर्स

Reduce HTTP requests and speed up loading.

1

ऑटोमैटिक Coordinate जनरेशन

हम गणित करते हैं, आप नहीं। कंसोलिडेटेड sprite sheet में हर इमेज के सटीक X और Y कोऑर्डिनेट्स तुरंत।

2

स्मार्ट-Grid पैकिंग एल्गोरिदम

इंजन अलग-अलग साइज़ की इमेज को सबसे एफिशिएंट ग्रिड में स्मार्टली अरेंज करता है, एम्प्टी स्पेस कम और फ़ाइनल फ़ाइल साइज़ कम।

3

रेडी-टू-यूज़ CSS Classes

हर एसेट के लिए अलग classes सहित क्लीन, कॉपी-पेस्ट रेडी CSS ब्लॉक जनरेट, background-position और dimension properties शामिल।

4

कस्टमाइज़ेबल Layout मोड

प्रोजेक्ट की ज़रूरतों के हिसाब से Vertical strips, Horizontal strips, या सबसे एफिशिएंट 'Grid' मोड चुनें।

5

Padding और Spacing कंट्रोल

'Pixel bleeding' रोकने के लिए sprites के बीच कस्टम spacing जोड़ें—जहाँ बगल के आइकन का हिस्सा UI में दिख जाता है।

6

लोकल मेमोरी प्रोसेसिंग

UI एसेट्स आपकी प्रॉपर्टी हैं। सारी पैकिंग और कोड जनरेशन ब्राउज़र में होती है, डेटा कभी डिवाइस से बाहर नहीं जाता।

हाई-स्पीड एसेट्स की गाइड: जेनरेटर कैसे इस्तेमाल करें

Create sprites in minimal steps.

1

छोटे एसेट्स इकट्ठा करें

कम्बाइन करने वाले सभी छोटे आइकन, बटन, या एनिमेशन फ्रेम इकट्ठा करें। PNG जैसे हाई-क्वालिटी फॉर्मेट में रखें।

2

टूल में बैच अपलोड करें

सभी फाइलें एक बार में सेलेक्ट करके अपलोड करें। टूल तुरंत विज़ुअल प्रीव्यू बनाएगा।

3

ऑप्टिमाइज़ेशन कॉन्फ़िगर करें

Retina स्क्रीन पर एज दिखने की चिंता हो तो 'Padding' एडजस्ट करें, या साइड-मेन्यू बना रहे हों तो 'Vertical' layout चुनें।

4

Sprite प्रीव्यू देखें

जनरेटेड sheet चेक करें। हर आइटम दिखना चाहिए और ग्रिड टाइट और एफिशिएंट हो बिना वेस्टेड स्पेस।

5

Atlas इमेज डाउनलोड करें

कंसोलिडेटेड इमेज फ़ाइल प्रोजेक्ट के एसेट्स फोल्डर में सेव करने के लिए 'Sprite Sheet डाउनलोड करें' क्लिक करें।

Sprite Sheet महारत: गेम एसेट क्रिएशन सीक्रेट्स

HTTP/2 के साथ sprite sheets अभी भी काम की हैं?
हाँ! HTTP/2 मल्टीपल requests बेहतर हैंडल करता है, लेकिन sprite sheets अभी भी तेज़ हैं क्योंकि कुल मेटाडेटा और कम्प्रेशन ओवरहेड कम होता है।
अलग-अलग साइज़ की इमेज हैं तो?
हमारा स्मार्ट-grid एल्गोरिदम इसी के लिए बना है! सभी आकार की इमेज को सबसे कॉम्पैक्ट rectangle में अरेंज।
Sprite sheet के लिए JPG या PNG इस्तेमाल करूँ?
PNG की सख्त सलाह। यह आइकन के 'शार्प एज' बेहतर हैंडल करता है और ट्रांसपेरेंसी सपोर्ट करता है।
कितनी इमेज शामिल कर सकते हैं?
टेक्निकली कोई लिमिट नहीं। हालाँकि, फ़ाइल dimensions बहुत बड़े न हों इसलिए प्रति sheet 50-100 इमेज रिकमंडेड।
'Pixel Bleeding' क्या है?
यह तब होता है जब sub-pixel rendering sheet में अगली इमेज का एक हिस्सा दिखाता है। इसे रोकने के लिए हमारे टूल में 1-2 पिक्सल 'Padding' जोड़ें।
SVG सपोर्ट करता है?
यह टूल raster sprites (PNG/JPG) के लिए है। SVG के लिए, 'SVG Sprite' अप्रोच इस्तेमाल करें जो मॉडर्न ब्राउज़र में अलग तरह से हैंडल होती है।
बाद में sprite sheet कैसे अपडेट करूँ?
बस ओरिजिनल आइकन और नया आइकन री-अपलोड करें। सेकंडों में नई sheet और नया CSS।
गेम डेवलपर के लिए मुफ्त है?
हाँ! वेबसाइट या मोबाइल गेम बना रहे हों, जेनरेटर 100% मुफ्त बिना किसी कमर्शियल रोक।
ब्राउज़र sprite sheets cache कर सकते हैं?
हाँ! यह सबसे बड़े फ़ायदों में से है। ब्राउज़र को साइट के सभी पेजों के लिए सिर्फ एक फ़ाइल cache।
मेरा proprietary आइकन डेटा सुरक्षित है?
बिल्कुल। फाइलें ब्राउज़र में लोकली प्रोसेस होती हैं, डिज़ाइन कभी अपलोड, स्टोर, या हमारे सिस्टम से देखे नहीं जाते।