स्प्राइट शीट जेनरेटर क्या है?

स्प्राइट शीट जनरेटर कई अलग-अलग छवियों को एक अनुकूलित स्प्राइट शीट में जोड़ देता है। अपने फ़्रेम या आइकन अपलोड करें — या कोई एनिमेटेड GIF छोड़ें और हर फ़्रेम अपने आप ले लिया जाएगा —, एक लेआउट चुनें (ग्रिड, क्षैतिज स्ट्रिप, ऊर्ध्वाधर स्ट्रिप या पैक्ड), पारदर्शी या ठोस पृष्ठभूमि चुनें, और संयुक्त छवि को JSON, JSON ऐरे, XML TextureAtlas या CSS स्थिति डेटा के साथ निर्यात करें।

ग्रिड मोड सब कुछ एक समान N×M लेआउट में सजाता है, जो उन एनिमेशन चक्रों के लिए आदर्श है जहाँ हर फ़्रेम एक ही आकार का हो। क्षैतिज और ऊर्ध्वाधर स्ट्रिप फ़्रेम को एक ही पंक्ति या स्तंभ में पंक्तिबद्ध करती हैं — साधारण 2D इंजन एनिमेशन का मानक लेआउट। पैक्ड मोड बिन-पैकिंग करता है ताकि भिन्न आकार के आइकन कम से कम बर्बादी के साथ फ़िट हों। कोई एनिमेटेड GIF छोड़ें और हर फ़्रेम शीट में डिकोड हो जाता है, इसलिए पहले फ़्रेम निर्यात करने की ज़रूरत नहीं। आउटपुट डिफ़ॉल्ट रूप से पारदर्शी पृष्ठभूमि रखता है, या आप क्रोमा-की भराव के रूप में ठोस रंग चुन सकते हैं। मेटाडेटा चार फ़ॉर्मेट में आता है — JSON हैश, JSON ऐरे, XML TextureAtlas और CSS — ताकि इसे सीधे Phaser, PixiJS, Unity, Godot या CSS के background-position में डाला जा सके। एनिमेशन प्रीव्यू आपको 1 से 60 FPS पर फ़्रेम स्क्रब करने देता है ताकि डाउनलोड से पहले टाइमिंग सही रहे। एक-एक करके फ़्रेम आगे बढ़ाकर किसी भी ग़लत संरेखित स्प्राइट को पकड़ें, हर फ़्रेम का पारदर्शी किनारा काटकर शीट को कॉम्पैक्ट रखें, और पूरे क्रम को एनिमेटेड GIF के रूप में डाउनलोड करके बिना किसी गेम इंजन के परिणाम साझा करें।

उपयोग कैसे करें

1. स्प्राइट शीट में जोड़ने के लिए अलग-अलग इमेज अपलोड करें।
2. लेआउट चुनें (ग्रिड, क्षैतिज, लंबवत या पैक्ड), पैडिंग समायोजित करें, और पृष्ठभूमि को पारदर्शी या ठोस रंग पर सेट करें।
3. CSS या JSON पोज़ीशन डेटा के साथ स्प्राइट शीट इमेज डाउनलोड करें।

कब उपयोग करें

• किरदार के चलने का चक्र या विस्फोट एनिमेशन एक इमेज में पैक करना ताकि गेम इंजन को दे सकें।
• UI आइकन सेट को एक फ़ाइल में मिलाना ताकि पेज चालीस की जगह एक HTTP अनुरोध करे।
• टाइलमैप स्प्राइट्स में बराबर पैडिंग सेट करना ताकि पड़ोसी टाइल्स के रंग फैलें नहीं।

परिणाम

एक गेम डेवलपर 16 कैरेक्टर एनिमेशन फ़्रेम (प्रत्येक 64×64) अपलोड करता है। टूल उन्हें 4×4 ग्रिड में व्यवस्थित करता है और गेम इंजन के लिए JSON फ़्रेम कोऑर्डिनेट्स के साथ 256×256 स्प्राइट शीट तैयार करता है।

अक्सर पूछे जाने वाले प्रश्न

ग्रिड के बजाय पैक्ड लेआउट कब चुनें?

जब सभी फ़्रेम का आकार एक जैसा हो तो ग्रिड चुनें, जैसे 32×32 कैरेक्टर एनिमेशन। एक ही पंक्ति या स्तंभ की शृंखला के लिए क्षैतिज या लंबवत स्ट्रिप चुनें; अधिकांश गेम एंजिन इसे सबसे आसानी से लोड करते हैं। जब आइकन के आकार अलग-अलग हों तो पैक्ड चुनें, जैसे 16×16 और 48×48 मिले UI सेट; शीट सबसे छोटी बनती है पर मेटाडेटा हाथ से पढ़ना मुश्किल हो जाता है।

पैडिंग सेटिंग किस काम आती है?

पैडिंग हर फ़्रेम के चारों ओर पारदर्शी पिक्सेल जोड़ती है। इसके बिना लीनियर फ़िल्टरिंग वाले रेंडरर पड़ोसी फ़्रेम के रंगों को मौजूदा फ़्रेम के किनारों पर खींच सकते हैं। 1 या 2 पिक्सेल पैडिंग ही इस आर्टिफ़ैक्ट को रोकने के लिए काफ़ी है।

मुझे कौन-सा मेटाडेटा फ़ॉर्मेट निर्यात करना चाहिए?

JSON (हैश) वही TexturePacker फ़ॉर्मेट है जिसे अधिकांश इंजन लोड करते हैं, जिसमें हर फ़्रेम को नाम से कुंजीबद्ध किया जाता है। JSON ऐरे फ़्रेम को एक क्रमबद्ध सूची के रूप में रखता है, जिसे Phaser 3 और कुछ पाइपलाइन पसंद करते हैं। XML, Starling/Sparrow का TextureAtlas है जिसे Unity, Godot और Friday Night Funkin उपयोग करते हैं। CSS वेब आइकन सेट के लिए background-position क्लासें देता है। वही चुनें जिसकी आपके रेंडरर को ज़रूरत है।

क्या आउटपुट में पारदर्शिता बनी रहती है?

हाँ, डिफ़ॉल्ट रूप से। शीट PNG में अल्फ़ा चैनल के साथ निकलती है, स्रोत PNG की पारदर्शिता वैसी ही चली आती है। अगर अपारदर्शी शीट चाहिए तो लेआउट कंट्रोल के पास से एक ठोस रंग की पृष्ठभूमि चुनें; क्रोमा-की या अल्फ़ा अनदेखा करने वाले एंजिन के लिए उपयोगी है। अगर पारदर्शिता ज़रूरी है तो JPG को स्रोत के रूप में न लें, क्योंकि अपलोड से पहले ही JPG अल्फ़ा को सफेद कर देता है।

एक शीट में कितने फ़्रेम भर सकते हैं?

व्यावहारिक रूप से मोबाइल GPU एक टेक्सचर को 2048 या 4096 पिक्सेल प्रति किनारे तक सीमित रखते हैं, इसलिए 4096×4096 की शीट में 64×64 के 4096 फ़्रेम आ जाते हैं। एनिमेशन के लिए दो 2048×2048 शीट में बाँटना पुराने डिवाइसों पर ज़्यादा सुरक्षित है।

संबंधित उपकरण