अपने ऐप के लिए एनिमेटेड मैस्कॉट कैसे बनाएँ

ऐप एनिमेटेड मैस्कॉट क्यों इस्तेमाल करते हैं?

मैस्कॉट आपके प्रोडक्ट को उन पलों में एक चेहरा देता है जो वरना खाली इंतज़ार या बुरी खबर होते। एक spinner कहता है "रुको।" व्यस्त दिखता कैरेक्टर कहता है "हम इस पर काम कर रहे हैं।" हमदर्दी से कंधे उचकाता कैरेक्टर एरर स्क्रीन को crash कम और छोटी-सी अड़चन ज़्यादा जैसा दिखाता है।

सबसे जाना-माना उदाहरण Duolingo है। उसकी टीम ने कैरेक्टर का lip sync Rive स्टेट मशीन पर बनाया, ताकि वही कैरेक्टर हर लाइन के लिए अलग वीडियो के बिना हर कोर्स में रिएक्ट कर सकें और बोल सकें (Duolingo ब्लॉग)।

इसका फ़ायदा पाने के लिए आपको Duolingo जितने बड़े स्तर की ज़रूरत नहीं है। एक छोटे ऐप को आमतौर पर ज़्यादातर फ़ायदा कुछ ही स्टेट से मिल जाता है, जिन्हें वहाँ रखा जाए जहाँ यूज़र पहले से रुकते हैं:

• इंतज़ार: loading, अपलोड, जनरेट होना।
• अभी यहाँ कुछ नहीं: खाली लिस्ट, पहला लॉन्च, कोई search result नहीं।
• नतीजे: पूरी हुई खरीदारी, सेव हुई फ़ाइल, फ़ेल हुई request।
• स्वागत और विदाई: ऑनबोर्डिंग, साइन इन, फ़ीचर टूर।

मैस्कॉट को इंटरफ़ेस का साथ देना चाहिए, उसकी जगह कभी नहीं लेनी चाहिए। असली काम text labels और buttons से ही करवाएँ, और कैरेक्टर को माहौल बनाने दें।

मैस्कॉट को कैसे डिज़ाइन करें ताकि उसे एनिमेट करना आसान हो?

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

• सामने की ओर पोज़। सामने या लगभग सामने के view में आँखें, मुँह और हाथ एक जैसे (symmetrical) तरीके से हिल सकते हैं। साइड view और three-quarter turn में हर स्टेट के लिए अतिरिक्त ड्रॉइंग चाहिए।
• सपाट, ठोस shapes। ठोस fills और साफ़ outlines आसानी से deform होते हैं। भारी textures, फ़ोटो जैसी डिटेल और जटिल gradients रिगिंग को मुश्किल बनाते हैं।
• अलग हिस्से। body, आँखें, मुँह, हाथ और accessories को अपनी-अपनी layers या groups में रखें। अगर आँखें सिर में ही जुड़ी हैं, तो पलक नहीं झपकाई जा सकती।
• सरल silhouette। 48 से 64 px पर साफ़ पढ़ी जा सकने वाली outline का मतलब है कि कैरेक्टर toolbar या list row में भी ठीक काम करता है।
• हिलने-डुलने की जगह। canvas में कैरेक्टर के चारों ओर जगह छोड़ें, ताकि उछलते या हाथ हिलाते समय वह कटे नहीं।
• सादा बैकग्राउंड। कैरेक्टर को ट्रांसपेरेंट या एक ही रंग के बैकग्राउंड पर दें, किसी सीन के अंदर नहीं।

अगर आपके पास पहले से ऐसा मैस्कॉट है जो इनमें से कुछ नियमों पर खरा नहीं उतरता, तो भी उसे एनिमेट किया जा सकता है। बस इससे यह सीमित हो जाता है कि कौन-सी तकनीकें काम करेंगी, जैसा नीचे PNG वाले सेक्शन में बताया गया है।

ऐप मैस्कॉट में कौन-सी स्टेट होनी चाहिए?

एनिमेशन को दो तरह से सोचें। लूप तब तक चलते हैं जब तक कोई स्थिति बनी रहती है, जैसे loading या listening। वन-शॉट (एक बार चलने वाले रिएक्शन) किसी इवेंट के जवाब में एक बार चलते हैं, जैसे success या error, और फिर उसी लूप पर लौट जाते हैं जो पहले चल रहा था।

शुरुआत के लिए एक व्यावहारिक सेट:

अगर मैस्कॉट किसी चैट या वॉइस फ़ीचर का चेहरा है, तो listening और talking भी जोड़ें। मैस्कॉट एनिमेशन स्टेट वाली गाइड हर स्टेट को ऐप के खास इवेंट से जोड़कर बताती है।

शुरुआत में ही तय कर लें कि हर वन-शॉट कैसे खत्म होगा। सबसे साफ़ नियम यह है कि रिएक्शन हमेशा उसी लूप पर लौटे जो उससे पहले चल रहा था, यानी loading के दौरान आया success वापस loading पर जाए, और idle के दौरान आया success वापस idle पर। यह नियम कैरेक्टर को एनिमेट करने वाले के लिए लिखकर रखें, क्योंकि इसी से तय होता है कि हर वन-शॉट का पहला और आखिरी फ़्रेम कैसा दिखना चाहिए।

मैस्कॉट को एनिमेट करने के आपके पास कौन-से विकल्प हैं?

चार व्यावहारिक रास्ते हैं। हर एक में पैसा, समय और कंट्रोल का संतुलन अलग है।

Lottie उन After Effects एनिमेशन को रेंडर करता है जो Bodymovin प्लगइन से JSON के रूप में एक्सपोर्ट किए गए हों (lottie-web)। नया dotLottie फ़ॉर्मेट एक ही फ़ाइल में कई एनिमेशन और स्टेट मशीन रख सकता है (dotLottie)। Rive शुरू से ही स्टेट मशीन के इर्द-गिर्द बना है, जो कई स्टेट के बीच बदलने वाले मैस्कॉट के लिए सही है; देखें Rive vs Lottie।

Charmotion ऑटोमेटेड रास्ते का एक उदाहरण है। आप एक मैस्कॉट इमेज अपलोड करते हैं और 17 एनिमेशन पाते हैं, आमतौर पर कुछ ही मिनटों में: mood नंबर (0–9) से चुने जाने वाले दस लूप, छह वन-शॉट ट्रिगर और एक लॉन्च इंट्रो। पेड प्लान पर ये एक Rive फ़ाइल (फ़्लैट मैस्कॉट के लिए लगभग 40 KB, 3D रेंडर के लिए बड़ी, जैसे 3D लोगो के लिए लगभग 1.0 MB) के साथ MP4, GIF और ट्रांसपेरेंट WebM और MOV फ़ाइलों के रूप में आते हैं।

क्या मैं मौजूदा PNG मैस्कॉट को एनिमेट कर सकता हूँ?

हाँ, लेकिन तरीका इस पर निर्भर करता है कि PNG में क्या है।

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

पेंट किया हुआ, 3D-रेंडर या ज़्यादा ग्रेडिएंट वाला आर्टवर्क बाँटना मुश्किल होता है। उसे वेक्टर में फिर से ट्रेस करने पर आमतौर पर उसका लुक खो जाता है। विकल्प यह है कि असली पिक्सेल रखें और उन्हें डिफ़ॉर्म करें: बैकग्राउंड हटाएँ, इमेज पर मेश लगाएँ, उसे कुछ बोन्स से जोड़ें और squash, stretch, झुकाव और उछाल के लिए आर्टवर्क को मोड़ें। आँखों की जगह पहचानकर और सिर्फ़ उसी हिस्से को एनिमेट करके पलक झपकना जोड़ा जा सकता है।

आप कोई भी रास्ता चुनें, सोर्स इमेज मायने रखती है:

• आपके पास जो सबसे ज़्यादा रेज़ोल्यूशन है वही इस्तेमाल करें, बेहतर हो कि छोटी तरफ़ 1,000 px या उससे ज़्यादा हो।
• सादे बैकग्राउंड पर सामने की ओर देखता कैरेक्टर बेहतर है।
• असली लोगों या चीज़ों की फ़ोटो और साइड व्यू से बचें, ज़्यादातर रिगिंग तरीके इन्हें ठीक से नहीं संभाल पाते।

यही तकनीकें लोगो पर भी लागू होती हैं; देखें PNG से लोगो को एनिमेट कैसे करें।

मुझे कौन-सा फ़ॉर्मेट शिप करना चाहिए: Rive, Lottie या वीडियो?

प्रोडक्ट के अंदर इंटरैक्टिव फ़ॉर्मेट और बाकी हर जगह वीडियो इस्तेमाल करें।

• ऐप या वेब ऐप में: Rive फ़ाइल या dotLottie फ़ाइल। एक ही फ़ाइल में हर स्टेट होती है, और आपका कोड उनके बीच स्विच करता है। Rive के आधिकारिक रनटाइम MIT License के तहत ओपन सोर्स हैं (Rive docs)।
• मार्केटिंग साइट पर: एक लूपिंग हीरो के लिए ट्रांसपेरेंट वीडियो अच्छा काम करता है। Chrome, Edge और Firefox के लिए अल्फ़ा वाला VP9 WebM दें, और Safari के लिए अल्फ़ा वाला HEVC भी, क्योंकि Safari WebM का अल्फ़ा चैनल हटा देता है (Jake Archibald)।
• सोशल पोस्ट, ऐप स्टोर प्रीव्यू, प्रेज़ेंटेशन: MP4।
• ईमेल और डॉक्स: GIF, सिर्फ़ फ़ॉलबैक प्रीव्यू के रूप में।

वीडियो एम्बेड करना आसान है, लेकिन हर स्टेट एक अलग फ़ाइल होती है, और क्लिप के बीच स्विच करना कभी उतना स्मूद नहीं होता जितना स्टेट मशीन में स्टेट बदलना। पूरी तुलना के लिए GIF vs WebM vs MP4 vs Rive पढ़ें।

मैस्कॉट एनिमेशन में कितना समय और खर्च लगता है?

इंडस्ट्री में कोई भरोसेमंद प्राइस लिस्ट नहीं है, इसलिए एक ही आँकड़ा बताने वाले से सावधान रहें। फिर भी खर्च और समय किन बातों पर निर्भर करते हैं, यह साफ़ है:

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

प्रोजेक्ट छोटा रखने के लिए idle, loading, success और error से शुरू करें। इन्हें शिप करें, देखें कि यूज़र असल में मैस्कॉट को कहाँ देखते हैं, फिर स्टेट जोड़ें। चार सही जगहों पर दिखने वाला मैस्कॉट उस मैस्कॉट से बेहतर है जिसके बीस एनिमेशन कोई ट्रिगर ही नहीं करता।

एनिमेटेड ऐप मैस्कॉट कैसे बनाएँ

1. मोशन के लिए डिज़ाइन करें. सादे बैकग्राउंड पर सामने की ओर देखता कैरेक्टर बनाएँ, फ़्लैट शेप के साथ और शरीर, आँखों, मुँह और बाँहों के अलग हिस्सों के साथ।
2. अपनी स्टेट की लिस्ट बनाएँ. ऐप के वे पल चुनें जिनमें मैस्कॉट दिखेगा और हर एक को लूप (loading, idle) या वन-शॉट (success, error) के रूप में मार्क करें।
3. प्रोडक्शन का रास्ता चुनें. बजट और टाइमलाइन के हिसाब से एनिमेटर हायर करें, Rive या After Effects में खुद रिग करें, या ऑटोमेटेड सर्विस इस्तेमाल करें।
4. स्टेट एनिमेट करें और जोड़ें. लूप और वन-शॉट एक ही इंटरैक्टिव फ़ाइल में बनाएँ और उन्हें इनपुट या Data Binding के ज़रिए ऐप इवेंट से जोड़ें।
5. हर चैनल के लिए एक्सपोर्ट करें. प्रोडक्ट में Rive या dotLottie, वेब पर ट्रांसपेरेंट WebM के साथ HEVC MOV, और सोशल व स्टोर प्रीव्यू के लिए MP4 इस्तेमाल करें।
6. मोशन कम करें के साथ टेस्ट करें. जाँचें कि जब यूज़र ने सिस्टम में मोशन कम करने को कहा हो, तो ऐप एक स्थिर पोज़ पर आ जाए।

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

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

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

मेरा मैस्कॉट वेक्टर होना चाहिए या रास्टर?

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

एक ऐप मैस्कॉट को कितने एनिमेशन चाहिए?

ज़्यादातर ऐप को शुरुआत में चार चाहिए: idle, loading, success और error। इसके बाद एम्प्टी स्टेट लूप, ऑनबोर्डिंग के लिए स्वागत और नोटिफ़िकेशन के लिए attention जोड़ें। चैट और वॉइस असिस्टेंट को listening और talking भी चाहिए। नई स्टेट सिर्फ़ वहीं जोड़ें जहाँ मैस्कॉट आपके ऐप में सच में दिखेगा।

मैस्कॉट के लिए Rive बेहतर है या Lottie?

दोनों काम करते हैं। Rive स्टेट मशीन के इर्द-गिर्द डिज़ाइन किया गया है, जो कई स्टेट के बीच बदलने वाले मैस्कॉट के लिए सही है। Lottie उन टीमों के लिए सही है जो पहले से After Effects में एनिमेट करती हैं, और अब dotLottie भी स्टेट मशीन सपोर्ट करता है। वही चुनें जिसे आपकी टीम बना और मेंटेन कर सके।

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

• Duolingo अपने कैरेक्टर को एनिमेट कैसे करता है?
• क्या एनिमेटेड मैस्कॉट लोडिंग स्पिनर की जगह ले सकता है?
• Charmotion एनिमेशन सेट तैयार होने में कितना समय लगता है?

स्रोत

• How Duolingo's characters lip sync (visemes), Duolingo Blog
• Runtimes: getting started, Rive
• lottie-web, Airbnb on GitHub
• dotLottie, LottieFiles
• Video with alpha transparency on the web, Jake Archibald
• prefers-reduced-motion, MDN Web Docs