Godot SVG आयात: Texture2D, DPITexture और साफ आइकन

Godot में SVG आयात करने पर सामान्यतः एसेट के आयात के समय ही SVG पिक्सेल में बदल जाता है। इसलिए उस टेक्सचर को बड़ा करने पर वह धुंधला दिख सकता है, भले ही स्रोत में साफ वेक्टर पाथ हों। जिन SVG आइकन को व्यूपोर्ट स्केलिंग के अनुसार बदलना चाहिए, उनके लिए वर्तमान आयातक DPITexture भी उपलब्ध कराता है। यह किसी दूसरे ओवरसैंपलिंग गुणक के लिए स्रोत को फिर से रास्टराइज़ कर सकता है। चित्र आयात गाइड दोनों तरीके बताती है।

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

डिस्प्ले के व्यवहार के अनुसार SVG आयात प्रकार चुनें

नीचे दिए गए दोनों विकल्प Import डॉक के संसाधन प्रकार हैं। DPITexture स्वयं Texture2D से विरासत लेता है, इसलिए ये दो असंबंधित क्लास परिवार नहीं हैं। DPITexture संदर्भ इस क्लास को प्रयोगात्मक भी बताता है। इसे अपनाने से पहले अपनी परियोजना के Godot संस्करण से मेल खाने वाले दस्तावेज देखें।

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

SVG स्रोत और उसके रेंडर किए गए पिक्सेल

पहले डिफ़ॉल्ट Texture2D आयात जांचें

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

1. SVG को परियोजना में रखें और FileSystem डॉक में उसे चुनें।
2. Import डॉक खोलें और पुष्टि करें कि आयात प्रकार Texture2D है।
3. SVG > Scale और Process > Size Limit जांचें। कोई विकल्प बदलने के बाद फिर से आयात करें।
4. टेक्सचर को उसके इच्छित स्प्राइट या UI घटक में रखें और उसका दिखाई देने वाला आकार जांचें।

SVG > Scale रास्टराइज़ किए जाने वाले आकार को बदलता है; बड़ा मान रखने पर बड़ा चित्र बनता है। इससे 2D में टेक्सचर का आकार भी बदलता है, इसलिए इसे बदलने के बाद नोड या लेआउट के माप की समीक्षा करें। Process > Size Limit आयात किए गए चित्र के माप सीमित कर सकता है। टेक्सचर आयातक संदर्भ दोनों नियंत्रणों के बारे में बताता है।

आकार का एक सरल उदाहरण लें: 32 पिक्सेल चौड़े रास्टर को 128 स्क्रीन पिक्सेल में दिखाने के लिए बड़ा किया जा रहा है। स्रोत के वेक्टर वक्र पहले से आयात किए गए रास्टर में नए पिक्सेल नहीं जोड़ते। उस उपयोग के अनुकूल टेक्सचर बनाएं, या जहां ओवरसैंपलिंग इंटरफ़ेस के लिए उपयुक्त हो वहां DPITexture आजमाएं।

हर SVG का स्केल मनमाने बड़े गुणक से बढ़ाने से बचें। पहले उसका सबसे बड़ा वास्तविक उपयोग तय करें, फिर सबसे छोटा उपयोग भी जांचें। जो संसाधन बड़े इन्वेंटरी पूर्वावलोकन में अच्छा दिखता है, उसे छोटे बटन पर दिखाने से उसका संकरा अंतराल गायब हो सकता है।

सही ओवरसैंपलिंग सेटिंग के साथ DPITexture उपयोग करें

स्केलिंग के अनुसार बदलने वाली इस प्रक्रिया को जांचने के लिए FileSystem डॉक में SVG चुनें, उसका आयात प्रकार DPITexture करें और फिर से आयात करें। उसे UI में उसी स्थान और आकार पर रखें ताकि तुलना एक सवाल का जवाब दे: क्या रास्टराइज़ करने की प्रक्रिया बदलने से इच्छित स्केल पर दिखाई देने वाला अंतर ठीक होता है?

DPITexture SVG स्रोत डेटा रखता है और ओवरसैंपलिंग के अनुरूप रास्टर बना सकता है। उसका base_scale स्रोत टेक्सचर के स्केल को नियंत्रित करता है; इससे संसाधन दृश्य में संपादन योग्य पाथ नहीं बन जाता। क्लास दस्तावेज देखें।

स्केलिंग की इन 2 स्थितियों की जांच करें:

• व्यूपोर्ट स्केलिंग: व्यूपोर्ट का स्केल गुणक बदलने पर Godot की चित्र ओवरसैंपलिंग वेक्टर स्रोत को फिर से रेंडर कर सकती है। SVG के लिए इसे सक्षम करने के लिए उस चित्र को DPITexture के रूप में आयात करें।
• नोड स्केलिंग: Node2D या Control के Scale के आधार पर ओवरसैंपलिंग डिफ़ॉल्ट रूप से बंद रहती है। यदि आपको यही व्यवहार चाहिए, तो संबंधित नोड पर Oversampling with Scale चालू करें।

ओवरसैंपलिंग गाइड यह अंतर समझाती है। वह यह भी बताती है कि बार-बार स्केल बदलने पर CPU को काम करना पड़ सकता है, क्योंकि टेक्सचर फिर से रेंडर होता है। इस विकल्प को बड़े पैमाने पर लागू करने से पहले उस दृश्य में स्केल बदलने वाला एनीमेशन जांचें जिसे आप रिलीज़ करेंगे।

आपके ज़ूम करने पर 2D एडिटर अपने आप फिर से सैंपल कर सकता है, इसलिए वह उपयोगी पूर्वावलोकन देता है। परियोजना को चलाकर उसके वास्तविक व्यूपोर्ट व्यवहार को भी जांचें। Viewport स्ट्रेच मोड में दृश्य पहले व्यूपोर्ट के आधार आकार पर बनाया जाता है, फिर विंडो के आकार के अनुसार स्केल होता है। यह अंतिम स्केलिंग तब भी इंटरफ़ेस के रूप को प्रभावित कर सकती है। स्ट्रेच मोड दस्तावेज Canvas Items मोड से इसका अंतर बताता है।

ऐसा आर्टवर्क तैयार करें जिसे Godot सही ढंग से बना सके

आयातक बदलने से रेंडरिंग के आकार की समस्या हल होती है। यदि ऑब्जेक्ट गायब हैं या बाहरी आकृति बदल गई है, तो स्रोत आर्टवर्क की जांच करें।

वास्तविक पाथ देखें

SVG को वेक्टर एडिटर में खोलें और दिखाई देने वाले आर्टवर्क को चुनें। यदि पूरा आइकन केवल एक रखा हुआ बिटमैप है, तो Godot की सेटिंग बदलने से पहले इसकी जांच करें। MDN एलिमेंट संदर्भ के अनुसार SVG का <image> एलिमेंट रास्टर सामग्री रख सकता है। उस आवरण को दोबारा रास्टराइज़ करने से वे साफ वक्र वापस नहीं बन सकते जो छोटे अंतर्निहित PNG में कभी थे ही नहीं।

अंतर्निहित रास्टर सूची की मदद से रखे हुए पिक्सेल और संपादन योग्य आकृतियों में अंतर करें। यदि वेक्टर मास्टर मौजूद है, तो उससे निर्यात करें। यदि आप आइकन का सेट तैयार कर रहे हैं, तो UI किट SVG गाइड की मदद से कैनवस और पैडिंग एक समान रखें।

सजावटी टेक्स्ट को पाथ में बदलें

Godot का SVG आयातक लाइव SVG टेक्स्ट रेंडर नहीं करता। वितरण के लिए बनाई गई प्रति में सजावटी अक्षरों को पाथ में बदलें और संपादन योग्य टेक्स्ट वाला मास्टर सुरक्षित रखें। Inkscape में संबंधित कमांड Path > Object to Path है। टेक्स्ट वाली SVG आयात में यह प्रक्रिया दी गई है।

जिस बटन लेबल का स्थानीयकरण या बार-बार संपादन करना हो, उसे इंटरफ़ेस टेक्स्ट के रूप में रखें और आइकन को अलग आयात करें। पूरे इंटरफ़ेस के टेक्स्ट को पाथ में बदलने से बाद में ये बदलाव करना कठिन होगा।

जटिल प्रभाव अलग जांचें

Godot SVG रेंडरिंग के लिए ThorVG का उपयोग करता है। ThorVG के SVG इंटरप्रेटर की समर्थित सुविधाओं की एक निश्चित सीमा है; SVG परिचय एनीमेशन, इंटरैक्टिविटी और मल्टीमीडिया को असमर्थित सुविधाओं में गिनता है। ThorVG इंजन की सामान्य क्षमताएं इस बात की गारंटी नहीं हैं कि कोई खास SVG सुविधा Godot के आयातक से भी काम करेगी।

यदि किसी बैज का विवरण गायब होता है, तो निर्यात किए गए SVG की तुलना सरल भरी हुई आकृतियों से बनी प्रति से करें। जरूरी प्रभाव एक-एक करके वापस जोड़ें। यदि रास्टर निर्यात जटिल आर्टवर्क को अधिक विश्वसनीय ढंग से बचाता है और परियोजना को स्केल किए जा सकने वाले स्रोत की आकृतियों की जरूरत नहीं है, तो रास्टर निर्यात रखें।

केवल फ़ाइल की जटिलता घटाने के लिए किसी संकरे खुले हिस्से को न हटाएं। स्वीकृति की कसौटी इच्छित बाहरी आकृति है, जिसमें उसके भीतर की खाली जगह भी शामिल है।

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

स्रोत फ़ाइल, आयात प्रकार, SVG स्केल, नोड स्केल, व्यूपोर्ट सेटिंग और अपेक्षित डिस्प्ले आकार दर्ज करें। फिर उस लक्षण से संबंधित सेटिंग बदलें।

Godot 4 में 2D टेक्सचर फ़िल्टरिंग CanvasItem properties के जरिए कॉन्फ़िगर होती है और परियोजना का एक डिफ़ॉल्ट भी होता है। कोई पुराना ट्यूटोरियल आपको ऐसी आयात सेटिंग की ओर भेज सकता है जो अब वहां नहीं होती। आयात मैनुअल बदलाव बताता है। फ़िल्टरिंग मौजूदा पिक्सेल का रूप बदल सकती है; वह स्रोत के गायब विवरण को वापस नहीं लाती।

यदि Godot के बाहर भी चित्र धुंधला दिखता है, तो व्यापक पिक्सेल SVG निदान का पालन करें। इससे आप पहचान सकते हैं कि इंजन को फ़ाइल मिलने से पहले ही खराब किनारा मौजूद है या नहीं।

वास्तविक इंटरफ़ेस में आइकन स्वीकार करें

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

लक्षित बिल्ड में यह जांच दोहराएं। चुनी गई आयात सेटिंग स्रोत एसेट के साथ रखें ताकि दूसरा योगदानकर्ता वही परिणाम दोहरा सके। आइकन के सेट में केवल सबसे आसान बाहरी आकृति न जांचें: सबसे घने आइकन और सबसे पतले महत्वपूर्ण विवरण वाले आइकन को भी शामिल करें।

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

PerfectVector के साथ तरीका

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

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

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

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

क्या Godot SVG फ़ाइलें आयात कर सकता है? हां। डिफ़ॉल्ट Texture2D आयात SVG को आयात के समय रास्टराइज़ करता है। वर्तमान आयातक उन SVG चित्रों के लिए DPITexture भी देता है जिन्हें ओवरसैंपलिंग के साथ फिर से रास्टराइज़ करना हो। अपनी परियोजना के संस्करण के दस्तावेज देखें; DPITexture को प्रयोगात्मक बताया गया है।

Godot में मेरा SVG धुंधला क्यों है? जांचें कि क्या निश्चित आयात किए गए रास्टर को उसके पिक्सेल माप से बड़ा दिखाया जा रहा है। व्यूपोर्ट स्ट्रेचिंग, फ़िल्टरिंग, नोड स्केल के आधार पर ओवरसैंपलिंग और अंतर्निहित रास्टर सामग्री भी जांचें। स्रोत को फिर से ट्रेस करने या बदलने से पहले असली कारण ठीक करें।

क्या DPITexture दृश्य में संपादन योग्य SVG पाथ सुरक्षित रखता है? यह दोबारा रास्टराइज़ करने के लिए SVG स्रोत रखता है, लेकिन स्वयं एक टेक्सचर संसाधन है। इसे आयात करने से दृश्य में पाथ संपादन का कार्यप्रवाह नहीं मिलता और न ही आपके गेम के लिए जरूरी टकराव की ज्यामिति अपने आप बनती है।

स्रोत

1. Godot — चित्र आयात — SVG आयात प्रकार, टेक्स्ट की तैयारी, रेंडरर की सीमाएं और टेक्सचर फ़िल्टर सेटिंग बताता है।
2. Godot — DPITexture — विरासत, सुरक्षित रखा गया SVG स्रोत, स्केलिंग और प्रयोगात्मक स्थिति का दस्तावेज देता है।
3. Godot — कई रिज़ॉल्यूशन — व्यूपोर्ट स्ट्रेचिंग, चित्र ओवरसैंपलिंग, नोड स्केल की सेटिंग और बार-बार रास्टराइज़ करने की लागत समझाता है।
4. Godot — ResourceImporterTexture — डिफ़ॉल्ट टेक्सचर आयातक के रास्टर स्केल और आकार सीमित करने वाले नियंत्रण बताता है।
5. ThorVG — परिचय — SVG इंटरप्रेटर की समर्थित सुविधाओं की सीमा बताता है।
6. MDN — SVG चित्र एलिमेंट — समझाता है कि SVG में रास्टर आर्टवर्क कैसे मौजूद हो सकता है।

---

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