Unity SVG आयात: UI Toolkit या स्प्राइट की कला तैयार करें

Unity में SVG आयात करने की शुरुआत 2 निर्णयों से होती है: आप एडिटर का कौन-सा संस्करण इस्तेमाल करते हैं और आपकी कला कहां दिखाई देगी। Unity 6.3 में UI Toolkit और Texture2D के लिए SVG आयात शामिल है। SVG को सीधे Sprite या uGUI एसेट के रूप में आयात करने के लिए Vector Graphics पैकेज इस्तेमाल होता है; पुराने एडिटर इस पैकेज की पुरानी संस्करण श्रेणी इस्तेमाल करते हैं। Unity का Vector Graphics संस्करण गाइड यह विभाजन बताता है।

अगर आपके पास पहले से संपादन योग्य SVG है, तो उसी फ़ाइल को आयातक के लिए तैयार करें। अगर आपका एकमात्र स्रोत PNG या JPG है, तो उसे तभी ट्रेस करें जब आपको वेक्टर आकृतियां चाहिए। टेक्सचर या पिक्सेल आर्ट स्प्राइट रास्टर ही रह सकता है।

पूरे सेट पर काम करने से पहले एक प्रतिनिधि आइकन का परीक्षण करें, ताकि आप स्रोत कला की समस्याओं को Unity में आयात और प्रदर्शन की समस्याओं से अलग पहचान सकें।

किसी दूसरे इंजन में सीन की ज्यामिति तैयार करने के लिए Unreal Engine SVG आयात जांच का इस्तेमाल करके Motion Design की स्रोत आकृतियों, खुले भागों और अलग-अलग हिस्सों की जांच करें।

कला संपादन से पहले आयात मार्ग चुनें

जिस घटक में कला इस्तेमाल होगी, उसके आधार पर आयात का मार्ग चुनें। UI Toolkit लेआउट में काम करने वाला एसेट अपने आप Sprite Renderer के फ़ील्ड के लिए उपयुक्त नहीं हो जाता।

यह तालिका Unity की पैकेज संबंधी आवश्यकताओं पर आधारित है। अपनी परियोजना में इस्तेमाल होने वाले एडिटर और पैकेज के संस्करण निश्चित रखें। Unity 2018 या 2.0 preview आयातक के निर्देशों में ऐसे विकल्प हो सकते हैं जो वर्तमान 6.3 परियोजना के विकल्पों से अलग हों।

पहले गंतव्य चुनें

कला के पास छोटा आयात परीक्षण रखें

ऐसा आइकन चुनें जिसमें एक वक्र, अंदर एक छेद और सेट के लिए जरूरी कोई भी रंग या भराव प्रभाव मौजूद हो। मूल SVG के साथ ठोस आकृतियों से बना एक सरल संस्करण रखें। अगर सरल संस्करण सही ढंग से आयात होता है, तो पूरी परियोजना बदलने से पहले जटिल कला की जांच करें।

ऐसा SVG तैयार करें जिसे आयातक सही ढंग से पुनः बना सके

स्रोत को वेक्टर एडिटर में खोलें और उसमें मौजूद वास्तविक ऑब्जेक्ट की जांच करें। मूल मास्टर फ़ाइल सुरक्षित रखें, फिर Unity को देने के लिए अलग प्रति निर्यात करें।

पुष्टि करें कि कला में पाथ मौजूद हैं

SVG में <image> एलिमेंट के जरिए बिटमैप रखा जा सकता है; केवल फ़ाइल का एक्सटेंशन यह साबित नहीं करता कि कला वेक्टर ज्यामिति से बनी है। W3C अंतर्निहित सामग्री मानक यह अंतर स्पष्ट करता है। एडिटर में कला का कोई हिस्सा चुनें और उसके ऑब्जेक्ट या मार्कअप की जांच करें। अगर वह चित्र वाला केवल एक आयत है, तो अंतर्निहित रास्टर निदान का इस्तेमाल करें।

अगर मूल वेक्टर फ़ाइल उपलब्ध है, तो उसे फिर से निर्यात करें। उस मास्टर से निर्यात किए गए PNG को ट्रेस करने से पुनर्निर्माण का अतिरिक्त काम जुड़ता है और सिल्हूट बदल सकता है। आइकन के एक सेट के लिए पहले कैनवस, पैडिंग और दृश्य वजन तय करें; UI किट SVG तैयारी सेट के स्तर पर इन निर्णयों को समझाती है।

असमर्थित सुविधाओं को सोच-समझकर बदलें

Unity का अंतर्निहित आयातक SVG 1.1 की कुछ सुविधाओं का समर्थन करता है। दस्तावेज़ों के अनुसार लाइव टेक्स्ट, पिक्सेल मास्क, फ़िल्टर, इंटरैक्शन और एनीमेशन समर्थित नहीं हैं। इसलिए ब्राउज़र में पूर्वावलोकन सही दिख सकता है, जबकि Unity का परिणाम अलग हो सकता है। Unity SVG सीमाएं देखें।

कला की जरूरतों के अनुसार Unity को देने वाली प्रति तैयार करें:

• सजावटी अक्षरों को आउटलाइन में बदलें। जिन इंटरफ़ेस लेबल का संपादन या स्थानीयकरण करना जरूरी हो, उन्हें इंटरफ़ेस में टेक्स्ट के रूप में रखें।
• जरूरी छाया या चमक को गंतव्य में समर्थित किसी प्रभाव से दोबारा बनाएं, या उस कला को रास्टर रखें।
• मास्क की जांच क्लिपिंग पाथ से अलग करें। नरम पिक्सेल मास्क और ज्यामितीय क्लिप अलग तरह की संरचनाएं हैं।
• SVG में शामिल एनीमेशन पर निर्भर होने के बजाय Unity में एनीमेशन की योजना बनाएं।

केवल किसी फ़िल्टर के असमर्थित होने के कारण हर ग्रेडिएंट को सपाट रंग में न बदलें। डिजाइन में इस्तेमाल होने वाले वास्तविक प्रभाव का परीक्षण करें। अगर कोई जटिल बैज सही आयात नहीं होता, तो ठोस भराव वाला संस्करण निर्यात करें और उसके प्रभाव एक-एक करके वापस जोड़ें। इससे आप उस सुविधा को अलग पहचान सकते हैं जो रूप बदल रही है।

अनजानी जटिलता हटाएं

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

सभी तरह की गेम कला के लिए नोड की एक निश्चित संख्या तय करना उपयोगी नहीं है। ज्यामितीय तीर और हाथ से बने पात्र को अलग-अलग मात्रा में विवरण चाहिए। SVG नोड सफाई गाइड यह तय करने में मदद करती है कि कौन-से बिंदु आकृति की जरूरी जानकारी बनाए रखते हैं।

Unity 6.3 या बाद में UI Toolkit आयात

Unity को देने वाले ऐसे SVG से शुरुआत करें जिसके सिल्हूट और प्रभावों की आप पहले ही समीक्षा कर चुके हों।

1. SVG को परियोजना के Assets फ़ोल्डर में जोड़ें और उसे चुनें।
2. Inspector में Generated Asset Type को UI Toolkit Vector Image पर सेट करें।
3. आयात सेटिंग लागू करें और बने हुए वेक्टर चित्र को इच्छित UI Toolkit एलिमेंट में इस्तेमाल करें।
4. वास्तविक लेआउट का पूर्वावलोकन उसके सबसे छोटे और सबसे बड़े इच्छित प्रदर्शन आकार पर देखें।

Unity वेक्टर ग्राफिक पर काम में अंतर्निहित एसेट विकल्प समझाता है। अगर इस्तेमाल करने वाले घटक को Texture2D चाहिए, तो वह आउटपुट चुनें और बने हुए टेक्सचर को उसके इच्छित आकार पर जांचें।

UI Toolkit के लिए सुझाई गई बुनियादी टेसेलेशन सेटिंग से शुरुआत करें। Target Resolution और Zoom Factor की मदद से आयातक इच्छित प्रदर्शन परिस्थितियों के अनुसार वक्रों का उपविभाजन तय करता है। Unity सबसे कम ऐसा लक्ष्य रिज़ॉल्यूशन इस्तेमाल करने की सलाह देता है जो संतोषजनक परिणाम दे। चित्र आयात सेटिंग इन नियंत्रणों को समझाती है।

2 अलग बातों की समीक्षा करें: क्या SVG सही आकृति का वर्णन करता है, और क्या आयात किया गया एसेट उस आकृति को अच्छी तरह दिखाता है। टेसेलेशन बढ़ाने से वह छेद वापस नहीं आ सकता जो स्रोत के निर्यात में ही गायब हो गया था।

Sprite Renderer या uGUI आयात

अगर गंतव्य को पैकेज का Sprite या uGUI समर्थन चाहिए, तो Package Manager के जरिए संगत com.unity.vectorgraphics पैकेज इंस्टॉल करें। अपने घटक के अनुरूप जनरेट किया गया एसेट चुनें और पुष्टि करें कि घटक उसे स्वीकार करता है। वर्तमान पैकेज दस्तावेज इन आयात प्रकारों और अंतर्निहित UI Toolkit मार्ग के बीच अंतर स्पष्ट करते हैं।

Sprite Renderer के लिए, ऑब्जेक्ट को प्रीफ़ैब में कॉपी करने से पहले सीन में उसका आकार और पिवट जांचें। uGUI के लिए, अपनी परियोजना में इस्तेमाल होने वाला SVGImage कार्यप्रवाह जांचें। अगर कला जरूरी आयामों पर पहले से सही दिखती है, तो सामान्य रास्टर स्प्राइट कार्यप्रवाह भी एक विकल्प है।

पुराने 2.0 पैकेज के दस्तावेज़ हर सीन इकाई के लिए SVG इकाइयों, स्प्राइट पिवट और टेसेलेशन नियंत्रणों को समझाते हैं। वे इस पैकेज को प्रयोगात्मक भी बताते हैं और प्रोडक्शन में इस्तेमाल न करने की सलाह देते हैं। इस मार्ग का रखरखाव करने वाली टीमों को इसे जोड़ने से पहले 2.0 मैनुअल की समीक्षा अपनी परियोजना की सीमाओं के साथ करनी चाहिए।

अगर आप किसी मौजूदा परियोजना को अपग्रेड कर रहे हैं, तो उसकी प्रति या संस्करण नियंत्रण वाली शाखा में आयात का परीक्षण करें। वास्तविक प्रीफ़ैब और सीन में जनरेट किए गए एसेट प्रकारों और संदर्भों की तुलना करें। सफल थंबनेल पूर्वावलोकन को माइग्रेशन का एकमात्र परीक्षण न मानें। किसी पुराने फ़ोरम पोस्ट में सुझाया गया सामूहिक .meta संपादन भी तब तक लागू न करें जब तक आप उसकी खास समस्या को दोहरा न लें।

पहले दिखाई देने वाले अंतर का निदान करें

हर प्रतिनिधि एसेट के लिए परीक्षण का छोटा रिकॉर्ड रखें: स्रोत फ़ाइल, एडिटर/पैकेज संस्करण, गंतव्य घटक, अपेक्षित प्रदर्शन आकार और पहला दिखाई देने वाला अंतर।

उदाहरण के लिए, मान लें कि तारे वाला बैज आयात हो जाता है, लेकिन उसके बीच का छेद गायब हो जाता है। पहले Unity को देने वाला SVG खोलें और पुष्टि करें कि उसमें छेद मौजूद है। अगर वह मौजूद है, तो Unity में बैज के सरल निर्यात की तुलना करें। अगर उस संस्करण में छेद बना रहता है, तो मूल बैज की एक-दूसरे पर चढ़ी आकृतियों, भराव की संरचना या मास्क की जांच करें। स्रोत को दोबारा ट्रेस करना तभी उपयोगी है जब पाथ की ज्यामिति ही गलत हो।

स्वीकृत एसेट का परीक्षण एडिटर के साथ-साथ लक्ष्य बिल्ड में भी करें। दर्ज करें कि वह सबसे छोटे आकार पर स्पष्ट बना रहता है या नहीं, रंग और पारदर्शिता मेल खाते हैं या नहीं, और नए सिरे से आयात करने पर सीन या प्रीफ़ैब के संदर्भ बने रहते हैं या नहीं। प्रदर्शन संबंधी निर्णयों के लिए अपने सीन की प्रोफाइलिंग जरूरी है; SVG एक्सटेंशन प्रदर्शन का माप नहीं है।

PerfectVector के साथ तरीका

जब आपका एकमात्र उपयुक्त स्रोत रास्टर कला हो और आपको संपादन योग्य आकृतियां चाहिए, तब Unity में आयात से पहले PerfectVector उपयोगी होता है। सपाट रंगों वाला एक PNG या JPG PerfectVector चित्र से वेक्टर कन्वर्टर पर अपलोड करें। ट्रेस किए गए सिल्हूट और छेदों की तुलना मूल से करें, फिर Unity में आयात करने से पहले डाउनलोड किए गए SVG की वेक्टर एडिटर में जांच करें।

पूरे हस्तांतरण में एक ही प्रतिनिधि आइकन इस्तेमाल करें। ट्रेस तभी स्वीकार करें जब आप उसके इच्छित क्षेत्रों का संपादन कर सकें, खाली जगहें खुली रहें और सफाई से आकृति बिगड़ी न हो। इसके बाद ऊपर बताया गया Unity गंतव्य परीक्षण करें।

अगर रास्टर रखने से इच्छित रूप बना रहता है, तो फोटो, टेक्सचर, नरम चमक या जानबूझकर बनाए गए पिक्सेल आर्ट स्प्राइट को रास्टर ही रखें। किसी सरल ज्यामितीय चिह्न के लिए, ट्रेस करने की तुलना में हाथ से ड्रॉ करने पर नियंत्रण रखना आसान हो सकता है। PerfectVector SVG की स्रोत ज्यामिति तैयार करता है; वह Unity की समर्थित सुविधाएं नहीं बदलता और आपके रनटाइम रेंडरिंग को सत्यापित नहीं करता। अगर प्रारूपों के बीच अंतर आपके लिए नया है, तो SVG फ़ाइल की सामग्री से शुरू करें।

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

क्या Unity 6 को Vector Graphics पैकेज चाहिए? इसका उत्तर माइनर संस्करण और गंतव्य पर निर्भर करता है। Unity 6.3 में UI Toolkit और Texture2D के लिए अंतर्निहित SVG आयात है। Sprite और uGUI आयात के लिए 3.0 preview पैकेज इस्तेमाल होता है। पुराने Unity संस्करण संगत 2.0 preview पैकेज का मार्ग इस्तेमाल करते हैं।

क्या PNG का एक्सटेंशन SVG करने से वेक्टर स्प्राइट बन जाएगा? नहीं। फ़ाइल का नाम बदलने से उसके पिक्सेल ट्रेस नहीं होते। मूल वेक्टर स्रोत इस्तेमाल करें, आकृतियां ड्रॉ करें, या उपयुक्त रास्टर कला को ट्रेस करें और Unity में आयात से पहले बने हुए पाथ की जांच करें।

क्या ट्रेस करने से ऐसा SVG सुधर सकता है जिसे Unity गलत आयात करता है? केवल तब, जब स्रोत ज्यामिति को दोबारा बनाना जरूरी हो। अगर SVG में सही पाथ मौजूद हैं, लेकिन गलत जनरेट किए गए एसेट प्रकार या किसी असमर्थित प्रभाव के कारण समस्या आती है, तो पहले आयात या निर्यात का वह निर्णय सुधारें।

स्रोत

1. Unity — Vector Graphics 3.0 गाइड — एडिटर संस्करणों के बीच अंतर और अंतर्निहित आयात तथा Sprite/uGUI पैकेज के मार्ग स्पष्ट करता है।
2. Unity — वेक्टर ग्राफिक पर काम — अंतर्निहित एसेट विकल्पों और असमर्थित SVG सुविधाओं का विवरण देता है।
3. Unity — चित्र आयात सेटिंग — UI Toolkit वेक्टर चित्र की सेटिंग और टेसेलेशन नियंत्रण समझाता है।
4. Unity — Vector Graphics 2.0 मैनुअल — पुराने आयातक, सीन इकाई और पिवट नियंत्रणों तथा उसकी प्रयोगात्मक स्थिति का विवरण देता है।
5. W3C — SVG अंतर्निहित सामग्री — स्पष्ट करता है कि SVG में रास्टर चित्र की सामग्री शामिल हो सकती है।

---

अगर आपका Unity एसेट सपाट रंगों वाले PNG या JPG से शुरू होता है और उसे संपादन योग्य पाथ चाहिए, तो PerfectVector से चित्र बदलें। सिल्हूट, छेदों और अनचाही पृष्ठभूमि आकृतियों की जांच करें। फिर SVG का परीक्षण उस Unity घटक और उन प्रदर्शन आकारों में करें जिन्हें आप अंतिम उत्पाद में इस्तेमाल करना चाहते हैं।