स्प्राइट एक्सट्रैक्टर

Drop files here or click (max 12 MB)

स्प्राइट्स निकालना शुरू करने के लिए ऊपर एक छवि छोड़ें।

के बारे में ऑनलाइन स्प्राइट एक्सट्रैक्टर

क्या आपको स्प्राइट शीट या स्थिर छवि को अलग-अलग स्प्राइट्स में बदलने की आवश्यकता है? यह स्प्राइट एक्सट्रैक्टर स्वचालित रूप से स्प्राइट क्षेत्रों का पता लगाता है, उन्हें साफ-सुथरा क्रॉप करता है (वैकल्पिक ट्रिमिंग और पैडिंग के साथ), और उपयोग के लिए तैयार पारदर्शी PNGs निर्यात करता है। 🚀 स्क्रैच प्रोजेक्ट्स, 2D गेम प्रोटोटाइप्स, कक्षा गतिविधियों और इंडी गेम्स के लिए आदर्श। पिक्सेल आर्ट, UI एलिमेंट्स, आइकन्स और कैरेक्टर्स के साथ बेहतरीन काम करता है।

इस स्प्राइट एक्सट्रैक्टर का उपयोग क्यों करें?

  • पारदर्शिता और विन्यास योग्य सीमाओं के आधार पर स्वचालित स्प्राइट पहचान
  • प्रत्येक स्प्राइट के चारों ओर पारदर्शी सीमाओं के वैकल्पिक ट्रिमिंग के साथ साफ क्रॉपिंग
  • पैडिंग, संरेखण (केंद्र/नीचे) और वैकल्पिक समान आउटपुट आकार को नियंत्रित करें
  • पीएनजी निर्यात के लिए पारदर्शिता (अल्फा चैनल) संरक्षित करता है - टाइलमैप्स और कैरेक्टर्स के लिए आदर्श
  • डाउनलोड से पहले त्वरित निरीक्षण के लिए सभी पहचाने गए स्प्राइट्स की दृश्य गैलरी
  • JSZip का उपयोग करके क्लाइंट-साइड ZIP निर्यात, आपके फ़ाइलनाम और स्प्राइट क्रम को स्थिर रखता है
  • स्क्रैच-अनुकूल: एकल स्प्राइट शीट को त्वरित रूप से कई कॉस्ट्यूम या एसेट्स में बदलें
  • इंजन (स्क्रैच, गोडोट, यूनिटी 2डी, फेज़र, आदि) में एसेट्स को पुन: उपयोग करने के लिए परफेक्ट

🛠️ स्प्राइट शीट से स्प्राइट्स कैसे निकालें for sprite-extractor

1

1. अपनी छवि ड्रॉप करें

एक स्प्राइट शीट या छवि को ड्रॉपज़ोन में ड्रैग और ड्रॉप करें, या फ़ाइल चुनने के लिए क्लिक करें। सर्वोत्तम परिणामों के लिए, पारदर्शी पृष्ठभूमि वाले पीएनजी या स्प्राइट्स और पृष्ठभूमि के बीच उच्च कंट्रास्ट का उपयोग करें।

2

2. स्वचालित पहचान चलाएं

टूल आपकी छवि का एक हल्का प्रतिनिधित्व एक पहचान एंडपॉइंट पर भेजता है, जो पारदर्शिता और न्यूनतम आकार के आधार पर प्रत्येक स्प्राइट के लिए बाउंडिंग बॉक्स की गणना करता है। बॉक्स आपकी छवि पर ओवरले किए जाते हैं ताकि आप त्वरित रूप से देख सकें कि क्या निर्यात किया जाएगा।

3

3. निष्कर्षण विकल्प ट्यून करें

पैडिंग, पारदर्शी पृष्ठभूमि बनाम ठोस रंग, पारदर्शी किनारों की ट्रिमिंग, संरेखण (केंद्र या नीचे), और वैकल्पिक समान आउटपुट चौड़ाई/ऊंचाई समायोजित करें। टूल तदनुसार प्रत्येक स्प्राइट कैनवास को पुनर्निर्मित करता है।

4

4. स्प्राइट्स का पूर्वावलोकन करें

उत्पन्न स्प्राइट्स की गैलरी के माध्यम से स्क्रॉल करें। प्रत्येक पूर्वावलोकन क्लाइंट पर ऑफस्क्रीन कैनवास का उपयोग करके बनाया गया है और यूआई विकल्पों के आधार पर इसका नाम बदला या छोड़ा जा सकता है।

5

5. पीएनजी या ज़िप डाउनलोड करें

व्यक्तिगत पीएनजी स्प्राइट्स निर्यात करें या सभी वर्तमान पूर्वावलोकन वाली एक ज़िप फ़ाइल डाउनलोड करें। ज़िप JSZip का उपयोग करके क्लाइंट-साइड बनाई जाती है, और फ़ाइलनाम <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, आदि जैसे अनुक्रमिक पैटर्न का पालन करते हैं।

तकनीकी विशिष्टताएँ

पहचान और बाउंडिंग बॉक्स

पहचान चरण एक समर्पित बैकएंड एंडपॉइंट पर चलती है और स्वच्छ बाउंडिंग बॉक्स लौटाती है जिनका उपयोग क्लाइंट अंतिम स्प्राइट्स बनाने के लिए करता है।

पहलूव्यवहारटिप्पणियाँ
पहचान एंडपॉइंटPOST /api/sprite-extractor/inspectएक डेटा URL और डिटेक्शन विकल्प स्वीकार करता है, स्प्राइट बॉक्सों की एक सरणी लौटाता है।
डिटेक्शन इनपुटसहनशीलता, अल्फा थ्रेशोल्ड, न्यूनतम चौड़ाई, न्यूनतम ऊंचाईछोटे शोर को नजरअंदाज करने या केवल सार्थक स्प्राइट्स को पकड़ने के लिए UI में इन पैरामीटरों को समायोजित करें।
बॉक्स आकारअक्ष-संरेखित आयतप्रत्येक <code>SpriteBox</code> स्रोत छवि निर्देशांक में <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> रखता है।
पारदर्शिता प्रबंधनअल्फा-जागरूकपारदर्शी पिक्सेल क्रॉपिंग/ट्रिमिंग निर्णयों में योगदान करते हैं लेकिन आउटपुट में संरक्षित किए जा सकते हैं।
त्रुटि प्रबंधनसहज फॉलबैकयदि डिटेक्शन विफल होता है, तो टूल एक पठनीय त्रुटि दिखाता है और UI को नहीं तोड़ता।

क्रॉपिंग, ट्रिमिंग और संरेखण

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

चरणकार्यान्वयनविवरण
प्रारंभिक क्रॉपdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)प्रत्येक स्प्राइट को पहले मूल छवि से एक अस्थायी कैनवास पर क्रॉप किया जाता है।
पारदर्शी ट्रिमgetImageData के माध्यम से अल्फा चैनल स्कैन करेंट्रिमिंग सक्षम होने पर टूल न्यूनतम गैर-पारदर्शी बाउंडिंग बॉक्स की गणना करने के लिए पिक्सेल स्कैन करता है।
पैडिंगकॉन्फ़िगरेबल 0–256 pxइंजनों में एज आर्टिफैक्ट्स को कम करने के लिए ट्रिम या क्रॉप किए गए स्प्राइट के चारों ओर पैडिंग लागू की जाती है।
संरेखणकेंद्र / नीचेस्प्राइट्स को केंद्रित या नीचे संरेखित किया जा सकता है (बेसलाइन पर खड़े कैरेक्टर्स के लिए उपयोगी)।
समान आउटपुट आकारवैकल्पिक spriteWidth / spriteHeightसक्षम होने पर, एनिमेशन्स को मानकीकृत करने के लिए सभी स्प्राइट्स एक निश्चित आकार के कैनवास में रेंडर किए जाते हैं।
पृष्ठभूमिपारदर्शी या ठोस रंगया तो पूर्ण पारदर्शिता बनाए रखें या कैनवास को चुने हुए पृष्ठभूमि RGBA रंग से भरें।

प्रदर्शन और सीमाएं

ब्राउज़र में इंटरैक्टिव उपयोग के लिए डिज़ाइन किया गया।

पैरामीटरसामान्य व्यवहारटिप्पणियाँ
अधिकतम इनपुट आकार~10 MB छविबड़ी फ़ाइलें अभी भी काम कर सकती हैं लेकिन लोड/पहचान में अधिक समय लगेगा।
स्प्राइट संख्या~400 तक स्प्राइटबहुत अधिक संख्या संभव है, लेकिन पूर्वावलोकन रेंडरिंग और ZIP निर्माण में अधिक समय लगेगा।
निर्यात प्रारूपZIP के अंदर PNG (ब्लॉब)ZIP पूरी तरह से क्लाइंट-साइड JSZip का उपयोग करके जनरेट किया जाता है।
कैनवास ऑपरेशनप्रति-स्प्राइट क्रॉपिंग और ड्राइंगब्राउज़र के 2D कैनवास API पर निर्भर करता है; प्रदर्शन रिज़ॉल्यूशन और संख्या के साथ स्केल करता है।

कमांड लाइन विकल्प

बड़े स्प्राइट शीट या स्वचालित पाइपलाइन के लिए, आप ImageMagick जैसे CLI टूल्स को स्क्रिप्टिंग के साथ जोड़ सकते हैं।

लिनक्स / 🍎 macOS

ImageMagick के साथ यूनिफ़ॉर्म ग्रिड क्रॉपिंग

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

एक नियमित 64×64 ग्रिड को अलग-अलग PNG फ़ाइलों में काटता है।

सभी स्प्राइट्स को ज़िप करें

zip sprites.zip sprite_*.png

सभी जनरेट किए गए स्प्राइट्स को एक आर्काइव में पैकेज करता है।

विंडोज (PowerShell + ImageMagick)

ग्रिड-आधारित क्रॉपिंग

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

विंडोज पर <code>magick</code> CLI का उपयोग करते हुए, ऊपर के समान ही।

व्यावहारिक उपयोग के मामले

2D गेम डेवलपमेंट

  • Godot, Unity 2D, Phaser या Construct के लिए स्प्राइट शीट से कैरेक्टर एनिमेशन फ्रेम निकालें।
  • डिज़ाइन मॉक-अप से UI एलिमेंट्स (बटन, आइकन, हेल्थ बार) अलग करें।
  • लेवल एडिटर्स के लिए टाइलसेट्स को अलग-अलग टाइल्स में तोड़ें।
// Godot example: load multiple frames\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

स्क्रैच और कक्षा परियोजनाएँ

  • एक स्प्राइट शीट को स्क्रैच कैरेक्टर के लिए कई कॉस्ट्यूम में बदलें।
  • प्रोग्रामिंग वर्कशॉप के लिए थीम्ड एसेट पैक (जानवर, ग्रह, आइकन) तैयार करें।
  • छात्रों को ड्राइंग टूल में स्प्राइट शीट डिज़ाइन करने दें और फिर उन्हें स्क्रैच के लिए निकालें।
// Scratch-style pseudocode for simple animation\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

पिक्सेल आर्ट और एसेट लाइब्रेरीज़

  • पुरानी पिक्सेल कला शीट्स को अलग-अलग स्प्राइट्स की खोज योग्य लाइब्रेरी में विभाजित करें।
  • बड़े वाणिज्यिक या ओपन-सोर्स पैक से केवल आवश्यक एसेट्स निकालें।
  • विभिन्न स्रोतों से स्प्राइट्स में पैडिंग और संरेखण को मानकीकृत करें।

❓ Frequently Asked Questions

❓क्या स्प्राइट डिटेक्शन पूरी तरह स्वचालित है?

यह टूल पारदर्शिता और विन्यास योग्य सीमाओं (सहनशीलता, अल्फा सीमा, न्यूनतम चौड़ाई/ऊंचाई) के आधार पर स्वचालित डिटेक्शन करता है। कई मामलों में यह "बस काम करता है", लेकिन जटिल शीट्स के लिए आपको विकल्पों को समायोजित करना या दूसरा पास चलाना पड़ सकता है।

📏क्या एक्सट्रैक्टर मेरी मूल छवि बदलता है?

नहीं। आपकी मूल छवि अछूती रहती है। टूल केवल इसे मेमोरी कैनवास में पढ़ता है, क्षेत्रों को नए कैनवास में क्रॉप करता है, और फिर ताज़ा PNG स्प्राइट्स निर्यात करता है।

🎯क्या मैं पैडिंग और संरेखण नियंत्रित कर सकता हूं?

हां। आप पैडिंग (पिक्सेल में) कॉन्फ़िगर कर सकते हैं, पारदर्शी या ठोस पृष्ठभूमि के बीच चयन कर सकते हैं, पारदर्शी किनारों की ट्रिमिंग सक्षम कर सकते हैं, और आउटपुट कैनवास के भीतर स्प्राइट्स को केंद्रित या नीचे संरेखित कर सकते हैं।

🔒क्या मेरी छवियां सर्वर पर संग्रहीत हैं?

डिटेक्शन चरण स्प्राइट बॉक्स की गणना करने के लिए आपकी छवि (डेटा URL के रूप में) एक समर्पित एंडपॉइंट पर भेजता है, लेकिन स्प्राइट्स स्वयं आपके ब्राउज़र में बनाए और ज़िप किए जाते हैं। यह सेवा क्षणिक प्रसंस्करण के लिए डिज़ाइन की गई है, दीर्घकालिक भंडारण के लिए नहीं। हमेशा की तरह, ऐसे एसेट्स के लिए तृतीय-पक्ष टूल्स का उपयोग करने से बचें जो सख्ती से निजी रहने चाहिए।

🧊क्या निर्यात किए गए स्प्राइट्स में पारदर्शिता संरक्षित रहेगी?

हां। डिफ़ॉल्ट रूप से आउटपुट कैनवास पारदर्शी छोड़ दिया जाता है और आपके स्प्राइट्स अपना अल्फा चैनल बनाए रखते हैं। यदि आपका लक्षित इंजन अपारदर्शी एसेट्स पसंद करता है तो आप वैकल्पिक रूप से ठोस पृष्ठभूमि रंग चुन सकते हैं।

Pro Tips

Best Practice

अपने इंजन में स्केलिंग या रोटेशन के दौरान एज ब्लीडिंग को रोकने के लिए प्रत्येक स्प्राइट के चारों ओर थोड़ी पैडिंग (2-4 px) का उपयोग करें।

Best Practice

स्प्राइट्स को लगातार नाम दें (जैसे, <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) ताकि एनिमेशन आयात और स्क्रिप्टिंग सरल हो।

Best Practice

कक्षा सेटिंग्स में, बहुत सरल स्प्राइट शीट्स (कम बड़े स्प्राइट्स, स्पष्ट पृष्ठभूमि) से शुरुआत करें ताकि छात्रों को तत्काल परिणाम दिखाई दें।

Best Practice

निर्यात किए गए ZIP को अपनी परियोजना की स्रोत फ़ाइलों के साथ रखें ताकि आप बाद में आसानी से एनिमेशन्स को पुनः उत्पन्न या समायोजित कर सकें।

Additional Resources

स्क्रैच विकी - स्प्राइट्स
Documentation
गोडोट डॉक्स - 2D स्प्राइट एनिमेशन
Documentation
यूनिटी मैनुअल - 2D स्प्राइट्स
Documentation

Other Tools