PNG से Rive एनिमेशन: इमेज को .riv फ़ाइल में कैसे बदलें

क्या Rive एक PNG को एनिमेट कर सकता है?

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

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

इम्पोर्ट करने से पहले PNG को कैसे तैयार करें?

• ट्रांसपेरेंट बैकग्राउंड। पहले बैकग्राउंड हटाएँ। बचे हुए किनारे (halo) हर उस रंग पर दिखेंगे जिस पर आप बाद में एनिमेशन रखेंगे।
• सामने की ओर देखता हुआ, हाथ-पैरों के आसपास जगह के साथ। शरीर से सटे हाथ-पैरों को इमेज फाड़े बिना हिलाना मुश्किल होता है।
• हो सके तो हिस्सों में बाँटें। अपनी डिज़ाइन फ़ाइल से सिर, शरीर, हर हाथ और एक्सेसरीज़ को अलग-अलग PNG के रूप में एक्सपोर्ट करें। अलग हिस्से अपने pivot के चारों ओर घूम सकते हैं; एक सपाट इमेज सिर्फ़ डिफ़ॉर्म हो सकती है।
• पर्याप्त रेज़ोल्यूशन। Rive वेक्टर को बिना दिक्कत स्केल करता है, लेकिन बिटमैप बड़ा करने पर धुँधले हो जाते हैं, इसलिए उतने बड़े साइज़ पर एक्सपोर्ट करें जितना एनिमेशन दिखाया जाएगा, हाई-डेंसिटी स्क्रीन के लिए 2× पर।

अगर कैरेक्टर सिर्फ़ एक सपाट PNG के रूप में है और उसमें सरल आकार और ठोस रंग हैं, तो अक्सर पहले उसे SVG में ट्रेस करना फ़ायदेमंद होता है: तब आप असली वेक्टर हिस्सों को एनिमेट करते हैं और .riv छोटी रहती है।

Rive editor में इसे रिग और एनिमेट कैसे करें?

बोन्स Rive का कंकाल हैं। ये सिर्फ़ चाइल्ड ऑब्जेक्ट को साथ ले जा सकते हैं (हाथ, बाँह के निचले हिस्से के साथ चलता है), वेक्टर पाथ को डिफ़ॉर्म कर सकते हैं, या इमेज मेश को डिफ़ॉर्म कर सकते हैं। जब आप किसी मेश को बोन्स से बाइंड करते हैं, तो Rive हर बोन को एक रंग और हर vertex को एक weight देता है, जिसे आप पेंट, auto-weight और smooth कर सकते हैं।

1. PNG (या उसके हिस्सों) को stage पर ड्रैग करके इम्पोर्ट करें।
2. Inspector के Deform सेक्शन में हर इमेज पर एक मेश जोड़ें और उसका कंटूर बनाएँ।
3. जिन हिस्सों को मुड़ना है उनके लिए बोन्स बनाएँ: शरीर के लिए एक रीढ़, हर हाथ के लिए एक चेन।
4. मेश के vertices को बोन्स से बाइंड करें और weights तब तक ठीक करें जब तक मुड़ना साफ़ न दिखे।
5. हर एनिमेशन (idle, happy, wave वगैरह) के लिए एक timeline बनाएँ और बोन्स को keyframe करें।

idle को हल्का और लूप होने लायक रखें, और रिएक्शन को छोटे वन-शॉट बनाएँ जो वापस idle पोज़ पर लौटें, ताकि उनके बीच बदलते समय कभी झटका न लगे।

.riv को स्टेट मशीन की ज़रूरत क्यों होती है?

अलग-अलग timelines वाली .riv एक ही एनिमेशन चलाती है। एक स्टेट मशीन आपके ऐप को नंबर, boolean या ट्रिगर से उनके बीच बदलने देती है और ट्रांज़िशन को ब्लेंड करती है। Rive अब पुराने इनपुट की जगह data binding (properties वाला एक व्यू मॉडल) से स्टेट मशीन चलाने की सलाह देता है, और नए रनटाइम इसी के इर्द-गिर्द बने हैं।

किसी ऐप कैरेक्टर के लिए एक व्यावहारिक सेट कुछ ऐसा दिखता है:

क्या PNG से .riv पाने का कोई तेज़ तरीका है?

ज़्यादातर लोगों के लिए सत्रह स्टेट को हाथ से रिग और कीफ़्रेम करना कई दिनों का काम है। Charmotion यह स्टेप आपके लिए करता है: PNG अपलोड करें और इंजन फ़्लैट आर्टवर्क को वेक्टर हिस्सों में ट्रेस करता है (या, डिटेल वाली और 3D आर्टवर्क के लिए, आपके हूबहू पिक्सेल रखकर उन्हें स्क्वैश, स्ट्रेच, झुकाव और पलक झपकने के लिए रिग करता है), 17 एनिमेशन के कीफ़्रेम बनाता है और उन्हें एक .riv में जोड़ता है, जिसमें data-binding व्यू मॉडल और क्लासिक स्टेट मशीन दोनों होते हैं। हर पेड प्लान में .riv के साथ ट्रांसपेरेंट वीडियो और कोड शामिल है; आप पहले ब्राउज़र में अपनी इमेज का प्रीव्यू देख सकते हैं, फ़्री और बिना अपलोड किए।

Charmotion सपाट, सामने की ओर देखते मैस्कॉट और लोगो कैरेक्टर के साथ सबसे अच्छा काम करता है। फ़ोटो, पेंटिंग जैसी आर्ट और साइड व्यू इसके लिए ठीक नहीं हैं, और उनके लिए Rive editor में काम करने वाला कोई एनिमेटर अब भी बेहतर विकल्प है।

PNG को Rive एनिमेशन में बदलें

1. इमेज तैयार करें. बैकग्राउंड हटाएँ और हो सके तो कैरेक्टर के हिस्सों को अलग-अलग PNG के रूप में एक्सपोर्ट करें।
2. Rive में इम्पोर्ट करें. PNG को Rive stage पर ड्रैग करें। SVG वेक्टर शेप बन जाते हैं; PNG, JPEG और WebP बिटमैप ही रहते हैं।
3. मेश जोड़ें. Deform सेक्शन में हर बिटमैप को एक मेश दें ताकि उसके पिक्सेल मुड़ सकें।
4. बोन्स से रिग करें. बोन चेन बनाएँ, मेश के vertices को उनसे बाइंड करें और weights ठीक करें।
5. एनिमेशन keyframe करें. हर स्टेट के लिए एक timeline बनाएँ: लूप होने लायक एक idle, साथ में वे लूप और वन-शॉट जो आपके ऐप को चाहिए।
6. स्टेट मशीन जोड़ें और एक्सपोर्ट करें. timelines को एक स्टेट मशीन में जोड़ें जो व्यू मॉडल या इनपुट से चलती हो, फिर .riv एक्सपोर्ट करें।

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

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

हाँ। Rive editor PNG, JPEG और WebP इमेज को drag and drop से या Assets पैनल से इम्पोर्ट करता है। ये बिटमैप ही रहती हैं; अगर आप इन्हें डिफ़ॉर्म करना चाहते हैं तो मेश जोड़ें।

क्या Rive के लिए SVG, PNG से बेहतर है?

सपाट आर्टवर्क के लिए, आमतौर पर हाँ। Rive एक SVG को एडिट होने लायक वेक्टर ऑब्जेक्ट में बदलता है, इसलिए आप अलग-अलग शेप को एनिमेट कर सकते हैं और फ़ाइल छोटी तथा हर साइज़ पर शार्प रहती है। PNG असली पिक्सेल वैसे ही रखता है, जो डिटेल वाली या शेडिंग वाली आर्ट के लिए ठीक है।

क्या अंदर PNG होने से मेरी .riv बड़ी हो जाएगी?

हाँ, एम्बेड किए गए बिटमैप अपना compressed साइज़ फ़ाइल में जोड़ते हैं, जबकि हर वेक्टर शेप कुछ ही bytes में दर्ज होती है। बिटमैप को उससे बड़ा एक्सपोर्ट न करें जितना आप उन्हें दिखाएँगे।

क्या एक्सपोर्ट के लिए मुझे पेड Rive प्लान चाहिए?

Rive के प्लान में शामिल चीज़ें अलग-अलग हैं, और समय के साथ बदलती रहती हैं। कोई कमर्शियल प्रोजेक्ट शुरू करने से पहले Rive के प्राइसिंग पेज पर मौजूदा फ़ीचर देख लें।

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

• PNG को Rive एनिमेशन में कैसे बदलें?

स्रोत

• Importing assets, Rive
• Meshes, Rive
• Bones, Rive
• State Machine, Rive
• Data Binding overview, Rive
• Rive pricing, Rive