Unreal Engine SVG आयात: Motion Design ज्यामिति जाँचें
Unreal Engine Motion Design के लिए SVG तैयार करें, छेद और अलग हिस्से देखें तथा दृश्य ज्यामिति को टेक्सचर या रनटाइम UI छवि कार्यप्रवाह से अलग समझें।
इस पेज पर
Unreal Engine का SVG Importer, Motion Design के लिए ज्यामिति कार्यप्रवाह देता है। Epic का SVG आयातक ट्यूटोरियल 2D वेक्टर फ़ाइलों को 3D ज्यामिति बनाने का तरीका बताता है। पहले अपने इंजन संस्करण के प्लगइन और दस्तावेज़ जाँचें, फिर छोटा स्रोत आयात करें जिसके छेद, रंग और अलग हिस्से पहचान सकें।
यह SVG को रनटाइम UI छवि के रूप में दिखाने से अलग काम है। टेक्सचर पूर्वावलोकन, दृश्य ऐक्टर और विजेट रेंडरर अलग परिणाम हैं। यह मार्गदर्शिका दृश्य ज्यामिति विकल्प के लिए चित्र तैयार करने और बने ऑब्जेक्ट मोशन डिज़ाइन के अनुकूल हैं या नहीं, यह तय करने पर केंद्रित है।
उदाहरण अलग हीराकार हिस्से वाला मौलिक खोखला बैज है। यह अपने प्रोजेक्ट में आज़माने के लिए दस्तावेज़ आधारित कार्यप्रवाह है, बताए गए Unreal आयात या एक्सट्रूज़न परीक्षण का परिणाम नहीं।
चित्र बदलने से पहले गंतव्य चुनें
तय करें कि ग्राफ़िक को क्या बनना है। केवल SVG एक्सटेंशन उस प्रश्न का उत्तर नहीं देता।
| इच्छित उपयोग | पहले क्या तय करें | क्या देखें |
|---|---|---|
| दृश्य ज्यामिति के रूप में बना ग्राफ़िक | मेल खाता SVG Importer और Motion Design कार्यप्रवाह | छेद, सतहें, रंग, सीमाएँ और ऑब्जेक्ट नियंत्रण |
| सतह पर समतल छवि | प्रोजेक्ट का टेक्सचर/मटीरियल विकल्प | रिज़ॉल्यूशन, पारदर्शिता और अंतिम मटीरियल |
| सामान्य UMG विजेट में आइकन | UI समर्थित रेंडरिंग तरीका | विजेट व्यवहार और पैकेज किए लक्ष्य का समर्थन |
| ऐप शुरू होने के बाद मिला SVG | स्पष्ट रनटाइम लोडिंग/रेंडरिंग कार्यान्वयन | इनपुट प्रबंधन, सुविधा समर्थन और विफलता व्यवहार |
Epic की Motion Design आरंभिक मार्गदर्शिका प्रसारण ग्राफ़िक्स के लिए संपादक प्लगइन बताती है। उसका इंटरफ़ेस UMG जैसा है, लेकिन उसमें विजेट से बाहर की क्षमताएँ भी हैं। यह समानता इस बात का प्रमाण नहीं कि सामान्य UMG Image मनमानी SVG फ़ाइल लोड कर सकता है।
वही स्रोत दूसरे इंजन में ले जा रहे हों तो Unity SVG आयात मार्गदर्शिका अलग आयातक और गंतव्य निर्णय बताती है। एक इंजन की स्वीकृति दूसरे का फ़ाइल समर्थन सत्यापित नहीं करती।
अपने इंजन संस्करण में प्लगइन जाँचें
Epic की SVG Importer प्लगइन सूची पर अभी Beta बैनर है और श्रेणी Experimental है। इसे वितरित किए जाने वाले प्रोजेक्ट में सुविधा जाँचने का कारण मानें, विशेषकर उस पर बड़ी निर्भरता बनाने से पहले।
आधिकारिक ट्यूटोरियल Unreal Engine 5.4 और 5.5 के लिए चिन्हित है। वर्तमान API दस्तावेज़ अलग संदर्भ है, इसलिए पुराने वीडियो के पैनल या लेबल दूसरे स्थापित संस्करण से हूबहू मेल खाते हैं यह न मानें।
Motion Design सेटअप के लिए मेल खाते आरंभिक निर्देश अपनाकर Motion Design और Storm Sync Motion Design Bridge सक्षम करें। पुष्टि करें कि संबंधित SVG Importer उस प्रोजेक्ट में उपलब्ध और सक्षम है। चित्र की समस्या जाँचने से पहले संपादक का पुनः आरंभ संकेत अपनाएँ।
पहले छोटा परीक्षण स्तर लें। आरंभिक मार्गदर्शिका खाली स्तर या टेम्पलेट और फिर Motion Design > Create Defaults > Spawn बताती है। परीक्षण जटिल सीक्वेंस से अलग रखें ताकि गायब ऐक्टर, कैमरा समस्या या प्लगइन सेटअप को खराब स्रोत से आसानी से अलग पहचान सकें।
एक अलग हिस्से वाला खोखला बैज तैयार करें
यह मौलिक उदाहरण hollow-badge.svg नाम से सहेजें:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
<path fill="#147D78" fill-rule="evenodd"
d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
<path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>नीला-हरा पाथ बीच में खाली वर्ग वाला चौकोर फ़्रेम बनाता है। मूँगा रंग का हीराकार हिस्सा अलग पाथ है और उसके तथा फ़्रेम के बीच जगह है। फ़ाइल में पृष्ठभूमि आयत, स्ट्रोक, टेक्स्ट, फ़िल्टर, बाहरी छवि या एनीमेशन नहीं है।
ये चीज़ें जानबूझकर छोड़ी गई हैं। इससे जटिल चित्र जाँचने से पहले कुछ उपयोगी प्रश्न पूछ सकते हैं: क्या केंद्र खुला रहता है, हीराकार हिस्सा अलग रहता है और दोनों रंग इच्छित रूप में हैं?
अपना स्रोत वेक्टर संपादक में भी देखें। वह SVG कंटेनर में केवल फोटो लपेटता हो तो एम्बेडेड रास्टर जाँच यह स्थिति पहचानने में मदद करती है। बिटमैप का नाम बदलना या उसे लपेटना इस ज्यामिति अभ्यास की आवश्यक बंद सीमाएँ नहीं देता।
संपादन योग्य मूल रखें और वितरण प्रति निर्यात करें। आधार के लिए सरल बंद भरे आकार लें; प्रभाव, ग्रेडिएंट या जटिल क्लिपिंग तभी जोड़ें जब प्रोजेक्ट को चाहिए और उनका व्यवहार जाँच सकते हों। API संदर्भ में मिलता-जुलता क्लास नाम होना सुविधा की पूरी संगतता गारंटी नहीं है।

एक फ़ाइल आयात करें और बना संसाधन पहचानें
प्रयोग के लिए प्रोजेक्ट सामग्री फ़ोल्डर चुनें। Epic की सामान्य संसाधन आयात मार्गदर्शिका Content Browser का Import बटन और खींचकर छोड़ने वाला आयात बताती है। मेल खाता SVG आयातक सक्षम होने पर छोटा SVG चुनें और स्थापित संस्करण के आयातक विशेष विकल्प तथा निदान देखें।
फ़ाइल अस्वीकार हो या अपेक्षित आयातक न दिखे तो पहले इंजन संस्करण और प्लगइन सेटअप सत्यापित करें। चित्र बार-बार सरल करने से अनुपलब्ध आयात सुविधा ठीक नहीं होगी।
आयात के बाद रखने से पहले संसाधन प्रकार पहचानें। Epic के SVGImporter API में SVG डेटा, SVG ऐक्टर और डायनैमिक मेश कंपोनेंट हैं। ये उपयोगी अंतर हैं: स्रोत डेटा संसाधन अपने आप इस बात का प्रमाण नहीं कि दृश्य में इच्छित ज्यामिति है।
परीक्षण दृश्य में संसाधन लाने के लिए अपने संस्करण का SVG ऐक्टर रखने का कार्यप्रवाह लें। Motion Design टूलबॉक्स में SVG ऐक्टर हैं। रखा परिणाम चुनें और गहराई, मटीरियल या एनीमेशन बदलने से पहले सामने से देखें। कौन सा संसाधन और ऐक्टर लिया यह दर्ज करें ताकि दूसरा साथी सेटअप दोहरा सके।
आयातित संसाधन सहेजें और मूल SVG रखें। Unreal की सामान्य आयात मार्गदर्शिका बताती है कि आयात सामग्री प्रोजेक्ट संसाधनों में रहती है; बाद के संपादन और पुनः आयात के लिए स्रोत फ़ाइल अब भी मायने रखती है।
छेद, रंग और अलग ऑब्जेक्ट जाँचें
बैज के चौकोर खुले केंद्र से शुरू करें। विपरीत रंग की पृष्ठभूमि पर देखें और परिणाम में गहराई हो तो दूसरे कोण से भी देखें। केंद्र को ढकता हल्के रंग का फेस सामने से खुले भाग जैसा लग सकता है। स्वीकार्यता जाँच यह है कि इच्छित खाली क्षेत्र वास्तव में खाली रहे।
केंद्र भर जाए तो और प्रभाव जोड़ने से पहले स्रोत के उपपाथ और भरण व्यवहार देखें। SVG छेद समस्या मार्गदर्शिका बताती है कि रंगा अंदरूनी भाग और वास्तविक छेद समतल पूर्वावलोकन में समान क्यों दिख सकते हैं।
फिर हीराकार हिस्से के पास की जगह देखें। अनचाहा जोड़, अतिरिक्त फेस या पृष्ठभूमि क्षेत्र ढूँढ़ें। इसके बाद एनीमेशन में आवश्यक ऑब्जेक्ट चुनें। हीराकार हिस्से को स्वतंत्र चलना हो तो पुष्टि करें कि ऐक्टर/कंपोनेंट व्यवस्था फ़्रेम बदले बिना उसे खिसकने देती है। दृश्य में अलग सजावटी हिस्सा इच्छित चयन संरचना अपने आप सिद्ध नहीं करता।
ज्यामिति के बाद रंग जाँचें। रचना जिन मटीरियल और रोशनी परिस्थितियों में उपयोग होगी उनमें नीला-हरा फ़्रेम तथा मूँगा रंग का हीराकार हिस्से की स्रोत से तुलना करें। छायादार पार्श्व फेस को केवल सामने से गहरा होने के कारण स्रोत रंग त्रुटि न मानें।
गहराई संबंधी समस्याओं के लिए SVG एक्सट्रूज़न जाँच सूची स्रोत ज्यामिति प्रश्न देती है। यह Unreal विशेष कमांड मार्गदर्शिका नहीं और इस परीक्षण में अच्छा दिखना निर्माण के लिए पूरी तरह बंद, छेदरहित मेश सिद्ध नहीं करता।
घुमावदार चित्र देखें और सोचकर पुनः आयात करें
चौकोर उदाहरण में वक्र नहीं हैं, लेकिन अधिकांश लोगो में हैं। Epic का SVGImporter API स्प्लाइन को पॉलीलाइन बनाने की रूपांतरण गुणवत्ता सेटिंग बताता है। इसलिए स्रोत वक्र और बनी प्रस्तुति अलग जाँचने की चीज़ें हैं।
गोल लोगो में शॉट की सबसे निकट कैमरा दूरी पर बाहरी वक्र और सबसे छोटा खुला भाग देखें। किनारे खंडों वाले लगें तो इंजन संस्करण के संबंधित रूपांतरण नियंत्रण देखें। केवल स्रोत वेक्टर है इसलिए मनमाना अधिकतम मान न दें।
Epic का संस्करण विशेष 5.4 के लिए SVGData संदर्भ बताता है कि गुणवत्ता ओवरराइड बदलने से पुनः आयात और ज्यामिति पुनर्निर्माण होता है। इसलिए आधार सहेजें और स्रोत या रूपांतरण सेटिंग बदलने के बाद दृश्य फिर जाँचें; यह न मानें कि आगे का सारा काम अप्रभावित रहेगा। उस संदर्भ के प्रॉपर्टी नाम हर बाद के संपादक पैनल का वादा नहीं हैं।
पुनः आयात के बाद छेद, अंतराल, मटीरियल और ऑब्जेक्ट नियंत्रण जाँचें दोहराएँ। पूरा चित्र सेट व्यवस्थित करने से पहले वास्तविक वितरण संदर्भ में दृश्य जाँचें। यह मार्गदर्शिका पैकेज किए रनटाइम समर्थन, ब्राउज़र समान SVG रेंडरिंग या प्लगइन का सार्वभौमिक प्रदर्शन सिद्ध नहीं करती।
रास्टर चिह्न का पुनर्निर्माण चाहिए तो
वेक्टर मूल गायब हो और स्रोत सरल PNG या JPG चिह्न हो तो PerfectVector का छवि से वेक्टर कार्यप्रवाह स्थिर जाँच के लिए प्रारंभिक SVG तैयार कर सकता है। डिज़ाइन तक काटें, पूर्वावलोकन में खुला भाग और अलग सजावट देखें तथा प्रारंभिक SVG की स्रोत से तुलना करें। स्वीकृत SVG डाउनलोड करें और Unreal में वही ज्यामिति जाँचें चलाएँ।
वेक्टराइज़ेशन दृश्य इकाइयाँ नहीं चुनता, रिग नहीं बनाता, उत्पादन मटीरियल नहीं देता और विशेष मेश टोपोलॉजी की गारंटी नहीं देता। उपलब्ध हो तो मौजूदा वेक्टर मूल लें। फोटो और जटिल रंगे प्रभावों की दिखावट बेहतर सुरक्षित रहे तो रास्टर रखें। सरल ज्यामितीय बैज में पिक्सेल से पुनर्निर्माण के बजाय कुछ आवश्यक आकार सीधे बनाने से अधिक नियंत्रण मिल सकता है।
छोटा हस्तांतरण रिकॉर्ड रखें: स्रोत फ़ाइल, इंजन/प्लगइन संस्करण, आयातक सेटिंग, अपेक्षित खाली क्षेत्र, स्वतंत्र चलने वाले हिस्से और समीक्षा की कैमरा दूरी। ब्लॉग की चित्र तैयारी मार्गदर्शिकाएँ इस इंजन विशेष चरण से पहले के स्रोत निर्णय बताती हैं।
अक्सर पूछे जाने वाले प्रश्न
क्या Unreal Engine SVG फ़ाइल आयात कर सकता है? हाँ। Epic, Motion Design ज्यामिति के साथ उपयोग होने वाला SVG Importer देता है। अपने इंजन संस्करण की सुविधा और दस्तावेज़ जाँचें, फिर आयातित संसाधन और दृश्य परिणाम सत्यापित करें।
क्या SVG आयात का अर्थ है कि UMG रनटाइम में कोई भी SVG दिखा सकता है? नहीं। Motion Design ज्यामिति कार्यप्रवाह सामान्य UMG विजेट में मनमानी रनटाइम SVG लोडिंग सिद्ध नहीं करता। UI के लिए आवश्यक रेंडरिंग विकल्प चुनें और जाँचें।
आयात के बाद SVG का छेद भरा क्यों दिखता है? देखें कि स्रोत में वास्तविक छेद है या रंगा अंदरूनी भाग, फिर उपपाथ और भरण व्यवहार जाँचें। केवल सामने के दृश्य पर निर्भर होने के बजाय विपरीत पृष्ठभूमि पर आयात ज्यामिति सत्यापित करें।
क्या मैं PNG लोगो को Unreal के लिए तैयार 3D ऑब्जेक्ट में बदल सकता हूँ? वेक्टराइज़ेशन स्थिर स्रोत आकार पुनर्प्राप्त कर सकता है, लेकिन Unreal दृश्य पूरा नहीं करता। स्वीकृत SVG आयात करें, बनी ज्यामिति तथा मटीरियल देखें और प्रोजेक्ट के आवश्यक ऑब्जेक्ट नियंत्रण सत्यापित करें।
स्रोत
- Epic Games — आयात और SVG आयातक — Motion Design ज्यामिति विकल्प और ट्यूटोरियल संस्करण संदर्भ।
- Epic Games — SVG Importer प्लगइन — प्लगइन दायरा, Beta बैनर और Experimental श्रेणी।
- Epic Games — Motion Design आरंभिक मार्गदर्शिका — प्रोजेक्ट सेटअप, संपादक दायरा और SVG ऐक्टर टूलबॉक्स।
- Epic Games — सीधे संसाधन आयात करना — सामान्य Content Browser आयात और संसाधन सहेजना।
- Epic Games — SVGImporter API — डेटा, ऐक्टर, डायनैमिक मेश क्लास और स्प्लाइन रूपांतरण अवधारणाएँ।
- Epic Games — SVGData, Unreal Python 5.4 — संस्करण विशेष गुणवत्ता ओवरराइड और पुनर्निर्माण व्यवहार।
सेट आयात करने से पहले एक बैज का खुला भाग, अलग हिस्सा और दृश्य व्यवहार सत्यापित करें। केवल रास्टर चित्र बचे तो जाँच के लिए प्रारंभिक SVG तैयार करें, उसकी ज्यामिति देखें और स्वीकृत फ़ाइल Unreal प्रोजेक्ट में जाँचें।
Blog से और

SVG clipPath या मास्क: स्पष्ट किनारे या धीरे पारदर्शी होते किनारे चुनें
एक इमेज पर SVG clipPath, alpha और luminance मास्क तुलना करें। काम करने वाला नमूना कॉपी करें, हल्के-गहरे बैकग्राउंड पर परखें और सही ज्यामिति एक्सपोर्ट करें।

PixiJS में SVG आयात: Graphics या टेक्सचर चुनें
PixiJS में SVG को ज्यामिति या टेक्सचर के रूप में आयात करें। आइकन को दो आकारों पर जाँचें, टेक्सचर रिज़ॉल्यूशन देखें और जारी करने से पहले छूटे हुए समूह ट्रांसफ़ॉर्म पकड़ें।