कंटेंट पर जाएँ
charmotion
शुरू करें

Duolingo जैसा मैस्कॉट एनिमेशन: स्टेट, रिएक्शन और मेहनत

Charmotion टीम द्वारा · अपडेट:

गाइड का कवर इलस्ट्रेशन: Duolingo-स्टाइल मैस्कॉट एनिमेशन: स्टेट, रिएक्शन और मेहनत, Charmotion के डेमो कैरेक्टर के साथ

Duolingo के engineering blog के अनुसार, Duolingo अपने कैरेक्टर को Rive में एनिमेट करता है, जिसमें स्टेट मशीन होती हैं जो ऐप के कोड को तय करने देती हैं कि कौन सा एनिमेशन चले। Duolingo जैसे मैस्कॉट को कुछ लूपिंग मूड चाहिए, जैसे idle, thinking, happy और sad, साथ ही सही और गलत जवाब के लिए छोटे वन-शॉट रिएक्शन, जिन्हें आपका कोड ट्रिगर के रूप में फ़ायर करता है और फिर कैरेक्टर idle पर लौट आता है।

मुख्य बातें

  • Duolingo के blog के अनुसार उसके दस World Characters Rive में lip-sync करते हैं, जिनमें 40+ भाषाओं और 100+ कोर्स में 20+ मुँह के शेप इस्तेमाल होते हैं।
  • पैटर्न यह है: लगातार चलने वाले मूड के लिए लूप, और सही या गलत जवाब जैसे इवेंट के लिए वन-शॉट ट्रिगर।
  • सही जवाब का रिएक्शन गलत जवाब वाले से बड़ा रखें, और गलती के बाद जल्दी सामान्य स्थिति में लौटें।
  • lip-sync, कस्टम सीन और UI के साथ इंटरैक्ट करते कैरेक्टर के लिए अब भी एनिमेटर की ज़रूरत होती है।
  • अपना खुद का कैरेक्टर इस्तेमाल करें: Duolingo के कैरेक्टर और आर्टवर्क Duolingo के हैं।

पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।

क्या Duolingo, Rive का इस्तेमाल करता है?

हाँ, Duolingo के अपने बयान के अनुसार। नवंबर 2022 की एक पोस्ट में Duolingo की टीम Rive को "रियल-टाइम इंटरैक्टिव एनिमेशन और डिज़ाइन बनाने का एक वेब-आधारित टूल, जो एक गेम इंजन जैसा है" बताती है, और इसकी स्टेट मशीन के बारे में कहती है: "State Machine के दमदार सिस्टम की वजह से ही यह प्रोजेक्ट बड़े पैमाने पर मुमकिन हो सका।" यह प्रोजेक्ट "हमारे दस World Characters" को "20+ मुँह के एक सेट" के साथ लिप-सिंक कराने का था, "100 से ज़्यादा कोर्स में 40 से ज़्यादा भाषाओं" के लिए।

बाद में Rive के अपने ब्लॉग ने Duolingo के Video Call फ़ीचर के बारे में लिखा, जिसमें कैरेक्टर Lily 8 सिर और 8 शरीर के एनिमेशन को मिलाकर 64 से ज़्यादा idle वेरिएशन बनाती है, और फ़ाइल 1 MB से कम की है। यह Rive का अपने कस्टमर के बारे में लिखा लेख है, इसलिए इसे बेंचमार्क के बजाय केस स्टडी की तरह पढ़ें।

इससे सीखने वाली बात इसका आर्किटेक्चर है: हर कैरेक्टर के लिए एक इंटरैक्टिव फ़ाइल, जिसकी स्टेट मशीन को ऐप चलाता है। ऐप तय करता है कि क्या हुआ (सही जवाब, पूरा हुआ लेसन); फ़ाइल तय करती है कि कैरेक्टर कैसे मूव करे और स्टेट्स के बीच कैसे ब्लेंड हो। इस पेज पर दी गई किसी भी बात का मतलब यह नहीं है कि Duolingo और यहाँ बताए गए टूल्स के बीच कोई संबंध है।

Duolingo जैसे मैस्कॉट को कौन से स्टेट चाहिए?

लर्निंग फ़्लो छोटे इवेंट की एक कड़ी होता है, इसलिए इसमें लूप (बदले जाने तक चलते हैं) और वन-शॉट (एक बार चलकर वापस लौटते हैं) दोनों होते हैं। व्यावहारिक तौर पर कम से कम ये चाहिए:

पलस्टेटप्रकार
लेसन खुलता हैenter, फिर idleवन-शॉट, फिर लूप
स्क्रीन पर सवालidle या thinkingलूप
सीखने वाला जवाब बोलता हैlisteningलूप
सही जवाबyes या successवन-शॉट
गलत जवाबno (या हल्का error)वन-शॉट
लेसन पूरा, streak बढ़ीsuccess, फिर happyवन-शॉट, फिर लूप
सीखने वाला दूर है या कुछ बाकी नहींsleepingलूप
रिमाइंडर या नई यूनिटattention या waveलूप

सवाल वाले स्टेट को शांत रखें। मैस्कॉट एक्सरसाइज़ में साथ दे रहा है, इसलिए लूप इतना हल्का होना चाहिए कि उस पर ध्यान न जाए। लंबी लिस्ट के लिए मैस्कॉट एनिमेशन स्टेट्स देखें; बच्चों के ऐप में टोन के लिए बच्चों के एजुकेशन ऐप के मैस्कॉट देखें।

सही और गलत जवाब के रिएक्शन कैसे काम करते हैं?

Rive की भाषा में, रिएक्शन एक trigger है: एक बार का सिग्नल जो किसी भी स्टेट से वन-शॉट एनिमेशन चलाता है और फिर मौजूदा लूप पर लौट आता है। मौजूदा लूप एक number (या enum) है जिसे आपका कोड सेट करता है। आपके जवाब चेक करने वाले कोड को बस सही ट्रिगर फ़ायर करना है:

// Rive web runtime with Data Binding (autoBind: true)
const vm = rive.viewModelInstance;

function onAnswerChecked(correct) {
  vm.trigger(correct ? "yes" : "no").trigger();
}

function onLessonComplete() {
  vm.trigger("success").trigger();
  vm.number("mood").value = 1; // happy loop after the reaction
}

अगर फ़ाइल में property का नाम मौजूद नहीं है तो दोनों कॉल null लौटाते हैं, इसलिए प्रोडक्शन में इनकी जाँच ज़रूर करें। पुरानी इनपुट-आधारित फ़ाइलों में आप स्टेट मशीन से ट्रिगर इनपुट लेते हैं और उसकी जगह fire() कॉल करते हैं।

छह वन-शॉट रिएक्शन: success, error, yes, no, enter और exit
वन-शॉट रिएक्शन ट्रिगर से फ़ायर होते हैं और खत्म होने पर मौजूदा मूड पर लौट आते हैं।

लर्निंग ऐप्स से डिज़ाइन के तीन नियम:

  • असमानता। गलत जवाब पर रिएक्ट करने से ज़्यादा सही जवाब का जश्न मनाएँ। सिर का हल्का सा हिलना फ़ीडबैक जैसा लगता है; बड़ा उदास एनिमेशन सज़ा जैसा लगता है।
  • इनपुट कभी ब्लॉक न करें। रिएक्शन चलते समय भी सीखने वाला "continue" पर टैप कर सके।
  • मोशन कम करें सेटिंग का सम्मान करें। अगर सिस्टम कम मोशन माँगता है, तो रिएक्शन रखें लेकिन उसे छोटा कर दें, या एक स्थिर पोज़ दिखाएँ।

Duolingo जैसा मैस्कॉट बनाने में कितना काम है?

काम की लिस्ट वही रहती है, चाहे कोई भी करे:

  1. रिग के अनुकूल पोज़ में कैरेक्टर डिज़ाइन: सामने की ओर देखता, अलग-अलग अंग, सादा बैकग्राउंड।
  2. रिगिंग: बोन्स या मेश, ताकि हिस्से फिर से बनाए बिना मूव कर सकें।
  3. हर मूड के लिए लूप, जो एक ही पोज़ पर शुरू और खत्म हों।
  4. हर रिएक्शन के लिए वन-शॉट, जो किसी भी लूप में आसानी से वापस घुल-मिल जाएँ।
  5. स्टेट मशीन और उसके इनपुट या व्यू मॉडल, ऐसे नामों के साथ जिन्हें डेवलपर सीधे इस्तेमाल कर सकें।
  6. असली डिवाइस पर इंटीग्रेशन और टेस्टिंग, "मोशन कम करें" सेटिंग समेत।

एनिमेटर का ज़्यादातर समय स्टेप 2 से 5 में लगता है। इस काम को आउटसोर्स करने के रेट और टाइमलाइन Rive export वाली मैस्कॉट एनिमेशन सर्विस में दिए गए हैं।

Charmotion एक इमेज के लिए स्टेप 2 से 5 ऑटोमेट करता है: अपना कैरेक्टर अपलोड करें और कुछ ही मिनटों में 10 लूप (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention), 6 रिएक्शन (success, error, yes, no, enter, exit) और एक लॉन्च इंट्रो एक .riv में पाएँ, जो mood नंबर और हर रिएक्शन के लिए एक ट्रिगर वाले Character व्यू मॉडल से जुड़ा होता है। .riv और कोड हर पेड प्लान के साथ मिलते हैं, Starter ($20/माह) से, साथ में MP4, GIF और एक 9:16 लॉन्च वीडियो।

एनिमेटर के बिना आपको क्या नहीं मिल सकता?

जनरेट किया गया स्टेट सेट रोज़मर्रा के मौकों को कवर करता है। इन चीज़ों के लिए अब भी किसी एनिमेटर की ज़रूरत होती है, या Rive editor में काफ़ी समय लगाना पड़ता है:

  • लिप-सिंक। Duolingo का सिस्टम बोली की आवाज़ों को 20+ मुँह के आकारों से मैप करता है। विज़ीम चलाने के लिए हर आकार का अलग माउथ आर्टवर्क और आपके स्पीच ऑडियो से एक पाइपलाइन चाहिए; देखें लिप-सिंक बनाम एम्प्लिट्यूड।
  • कस्टम सीन, जैसे प्रॉप्स के साथ जश्न मनाता कैरेक्टर, UI से जुड़ा कॉन्फ़ेटी, या आपस में बात करते दो कैरेक्टर।
  • नए एंगल और पोज़ जो ओरिजिनल इमेज में नहीं हैं, जैसे साइड की ओर मुड़ना या स्क्रीन पर चलकर जाना।
  • कैरेक्टर की अपनी पर्सनैलिटी: खास जेस्चर जिनसे मैस्कॉट सिर्फ़ अपनी मूवमेंट से पहचाना जा सके।

समझदारी का तरीका यह है कि पहले स्टैंडर्ड स्टेट शिप करें, देखें कि यूज़र किन मौकों पर ध्यान देते हैं, और सिर्फ़ उन्हीं के लिए कस्टम काम करवाएँ।

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

क्या मैं अपने ऐप में Duo या Duolingo के दूसरे कैरेक्टर इस्तेमाल कर सकता हूँ?

नहीं। Duo और World Characters, Duolingo के अपने कैरेक्टर हैं। आर्टवर्क नहीं, पैटर्न अपनाएँ: अपना मैस्कॉट डिज़ाइन करें, फिर उसे अपने ऐप के इवेंट से जुड़े लूप और रिएक्शन दें। उनके लुक की इतनी नकल न करें कि यूज़र भ्रमित हो जाएँ।

क्या गलत जवाब पर sad एनिमेशन चलना चाहिए?

आमतौर पर sad लूप के बजाय छोटा सा 'no' या सिर हिलाना बेहतर रहता है। इससे साफ़ फ़ीडबैक मिलता है, पर सीखने वाले को सज़ा जैसा महसूस नहीं होता। sad मूड को कभी-कभार के मौकों के लिए रखें, और अगला सवाल आते ही idle पर लौट आएँ।

क्या लर्निंग ऐप के मैस्कॉट को लिप-सिंक की ज़रूरत है?

सिर्फ़ तब, जब वह स्क्रीन पर रिकॉर्ड किए गए या सिंथेसाइज़्ड ऑडियो के साथ बोलता हो। टैप करने और पढ़ने वाली एक्सरसाइज़ के लिए idle, thinking और रिएक्शन स्टेट काफ़ी हैं। असली लिप-सिंक के बिना talking लूप छोटी लाइनों के लिए ठीक चलता है, पर लंबी बातचीत में अटपटा लगता है।

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

स्रोत

संबंधित गाइड