SVG से Rive: SVG इम्पोर्ट करें और एनिमेट करें

क्या Rive SVG इम्पोर्ट सपोर्ट करता है?

हाँ। Rive इम्पोर्ट किए जा सकने वाले फ़ॉर्मेट में SVG को शामिल करता है और बताता है कि SVG "अलग फ़ाइल एसेट के रूप में एक्सपोर्ट होने के बजाय Rive वेक्टर ऑब्जेक्ट में बदल दिए जाते हैं"। PNG की तुलना में यही सबसे बड़ा फ़ायदा है: आप कोई भी path चुन सकते हैं, उसके पॉइंट बदल सकते हैं, रंग बदल सकते हैं और उसे सीधे बोन्स से जोड़ सकते हैं।

SVG को कैसे तैयार करें?

• शरीर के हिस्सों के हिसाब से ग्रुप करें। सिर, आँखें, मुँह, शरीर, बायाँ हाथ, दायाँ हाथ, एक्सेसरीज़। हर ग्रुप ऐसी चीज़ बन जाता है जिसे आप अलग से घुमा सकते हैं।
• लेयर के नाम रखें। नाम hierarchy में आ जाते हैं और बाद में अंदाज़ा लगाने से बचाते हैं।
• छिपा हुआ हिस्सा भी बनाएँ। अगर कोई हाथ झूलेगा, तो उसके पीछे का शरीर पूरा होना चाहिए, वरना वहाँ खाली जगह दिखेगी।
• इसे सरल रखें। जटिल स्ट्रोक को आउटलाइन करें, टेक्स्ट को शेप में बदलें, और ऐसे फ़िल्टर और ब्लेंड इफ़ेक्ट फ़्लैटन करें जो वेक्टर पाथ में नहीं बदलते।

इम्पोर्ट किए गए SVG को रिग कैसे करें?

हर ग्रुप का ओरिजिन वहाँ सेट करें जहाँ से उसे घूमना है (हाथ के लिए कंधा, सिर के लिए गर्दन)। सख्त हिस्सों के लिए उन्हें किसी बोन से पेरेंट करना काफ़ी है। जिन हिस्सों को मुड़ना है, उनके पाथ के वर्टिसेज़ को बोन चेन से बाइंड करें; Rive आपको वर्टिसेज़ और Bézier हैंडल को weighted influence के साथ बाइंड करने देता है। इसके बाद टाइमलाइन में कीफ़्रेम बनाएँ और स्टेट मशीन तैयार करें, जैसा PNG से Rive गाइड में बताया गया है।

Rive में मेरा SVG गलत क्यों दिखता है?

• ग्रेडिएंट या इफ़ेक्ट गायब: SVG फ़िल्टर, मास्क और कुछ ब्लेंड मोड का कोई सीधा समकक्ष नहीं है; उन्हें Rive के अपने फ़िल से दोबारा बनाएँ या डिज़ाइन टूल में ही फ़्लैटन करें।
• हज़ारों छोटे पाथ: ऑटो-ट्रेस किए गए SVG अक्सर सैकड़ों शेप के रूप में इम्पोर्ट होते हैं। पहले ट्रेस को साफ़ करें; हल्की फ़ाइल बेहतर एनिमेट और रेंडर होती है।
• सब कुछ एक ही ग्रुप में: रिगिंग से पहले दोबारा ग्रुप बनाएँ, वरना हर कीफ़्रेम पर यह हायरार्की आपके काम में रुकावट डालेगी।

क्या मैं यह सब खुद किए बिना रिग की हुई .riv पा सकता हूँ?

अगर आप खुद रिगिंग और कीफ़्रेमिंग नहीं करना चाहते, तो Charmotion आपके कैरेक्टर की एक इमेज से .riv बनाता है: यह फ़्लैट आर्टवर्क को वेक्टर हिस्सों में ट्रेस करता है, पिवट सेट करता है, उसे रिग करता है, 17 एनिमेशन के कीफ़्रेम बनाता है और data-binding view model के साथ एक क्लासिक स्टेट मशीन भी जोड़ता है। SVG का PNG, JPEG या WebP एक्सपोर्ट अपलोड करें। प्लान चुनने से पहले अपने कैरेक्टर के साथ प्रीव्यू देखें।

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

क्या Rive मेरे SVG को वेक्टर के रूप में रखता है?

हाँ। इम्पोर्ट किए गए SVG एम्बेडेड इमेज नहीं, बल्कि Rive के नेटिव वेक्टर ऑब्जेक्ट बन जाते हैं जिन्हें आप एडिट कर सकते हैं।

क्या मैं Rive एनिमेशन को वापस SVG में एक्सपोर्ट कर सकता हूँ?

एनिमेटेड SVG के रूप में नहीं। Rive अपने रनटाइम के लिए .riv एक्सपोर्ट करता है, और दूसरे इस्तेमाल के लिए वीडियो और इमेज सीक्वेंस भी।

क्या Rive इस्तेमाल करने से पहले मुझे अपना PNG, SVG में ट्रेस करना चाहिए?

फ़्लैट, सॉलिड-कलर आर्टवर्क के लिए हाँ: वेक्टर ज़्यादा लचीले ढंग से एनिमेट होते हैं और फ़ाइल छोटी रहती है। डिटेल्ड या शेडेड आर्ट के लिए PNG ही रखें और उसकी जगह मेश इस्तेमाल करें।

इस गाइड से झटपट जवाब

• क्या मैं Rive में SVG इम्पोर्ट कर सकता हूँ?

स्रोत

• Importing assets, Rive
• Bones, Rive
• Meshes, Rive
• State Machine, Rive
• Exporting for video and static design, Rive