परिचय
इस गाइड में PicoPixel के स्प्राइट के बारे में जानें: कब इस्तेमाल करें, कैसे बनाएँ, स्क्रीन पर होने वाली घटनाओं के अनुसार कैसे बदलें और अलग-अलग प्रोजेक्ट में फिर कैसे इस्तेमाल करें।
एनिमेशन का अनुभव ज़रूरी नहीं है। अगर आप इमेज खींचकर रख सकते हैं, तो स्प्राइट भी बना सकते हैं।
स्प्राइट क्या है?
स्प्राइट PicoPixel का एक विजेट है जिसमें कई अलग-अलग एनिमेशन होते हैं। आप ज़रूरत के अनुसार उनके बीच बदल सकते हैं। हर एनिमेशन को मोड या स्थिति कहते हैं, जैसे “Idle”, “Running” या “Happy”।
इसे वीडियो गेम के किरदार की तरह समझें। स्क्रीन पर किरदार एक ही है, लेकिन स्थिति के अनुसार चल सकता है, कूद सकता है या हाथ हिला सकता है। स्प्राइट भी ऐसा ही है: एक विजेट में कई रूप, और कौन-सा चलेगा यह आप तय करते हैं।
PicoPixel के इवेंट एडिटर से अलग-अलग स्थितियाँ शुरू कर सकते हैं। उदाहरण के लिए, ESP32 या किसी अन्य LVGL ऐप के लिए stack-chan का चेहरा बना रहे हों तो एक ही स्प्राइट में “Running”, “Thinking” और “Failed” जैसे मोड रखें। हर स्थिति के लिए अलग विजेट संभालने की ज़रूरत नहीं है।
LVGL में कई स्थितियों वाले स्प्राइट की सीधी सुविधा नहीं है। PicoPixel ने इसे LVGL के Animated Image विजेट पर बनाया है, ताकि यह व्यवस्था आपको खुद न बनानी पड़े।
स्प्राइट कब इस्तेमाल करें?
हर इमेज के लिए स्प्राइट ज़रूरी नहीं है:
- एक स्थिर तस्वीर के लिए सामान्य Image चुनें।
- एक ही एनिमेशन बार-बार चलाना हो, जैसे घूमता लोडर, तो Animated Image चुनें। यह आसान है और कम संसाधन लेता है।
- घटनाओं के अनुसार एनिमेशन बदलना हो, जैसे काम पूरा होने पर मुस्कुराता चेहरा या बैठे हुए किरदार का दौड़ना, तो Sprite चुनें।
अगर तस्वीर के एक से अधिक व्यवहार या भाव हैं और उनके बीच बदलना है, तो स्प्राइट सही विकल्प है।
स्प्राइट कैसे बनाएँ?
- Sprite विजेट चुनें। दाएँ साइडबार से पहला मोड जोड़ें, जैसे “Idle”। हर स्थिति को साफ़ नाम दें, ताकि बाद में ट्रिगर जोड़ते समय पहचान सकें।
- उस मोड के फ़्रेम अपलोड करें। हर फ़्रेम एक इमेज है; उन्हें क्रम से दिखाने पर फ़्लिपबुक जैसा एनिमेशन बनता है। उस स्थिति की अवधि भी तय कर सकते हैं: अवधि बढ़ाने पर एनिमेशन धीमा और घटाने पर तेज़ होगा।
- दूसरा मोड जोड़ें। कम से कम 2 मोड ज़रूरी हैं। केवल एक एनिमेशन चाहिए तो Animated Image बेहतर है; ऊपर स्प्राइट कब इस्तेमाल करें? देखें।
- Events टैब या इवेंट एडिटर से तय करें कि किस घटना पर कौन-सा मोड चले।
स्प्राइट के सभी मोड में हर फ़्रेम की चौड़ाई और ऊँचाई बिल्कुल समान होनी चाहिए। एक फ़्रेम 64×64 और दूसरा 80×80 हो तो वे सही जगह नहीं बैठेंगे। अपलोड करने से पहले आकार बराबर करें।
फ़्रेम की संख्या और आकार सीमित रखें। अधिक और बड़े फ़्रेम से गति सहज लग सकती है, लेकिन डिवाइस की मेमोरी भी अधिक लगती है। फ़्लैश करने के बाद स्प्राइट न दिखे तो आम समस्याएँ देखें।
स्प्राइट को प्रतिक्रिया देना सिखाएँ
स्प्राइट का असली उपयोग तब है जब उसका मोड किसी घटना पर बदले। इवेंट एडिटर में आप तय करते हैं: यह घटना हो तो इस स्थिति में जाएँ। घटना बटन दबना, वैल्यू बदलना या टाइमर हो सकती है।
एक सामान्य उदाहरण:
- शुरुआत में स्प्राइट “Idle” मोड में रहता है।
- इवेंट एडिटर में जोड़ें: बटन दबने पर “Running” मोड चलाएँ।
- दूसरा इवेंट जोड़ें: काम पूरा होने पर “Happy” या वापस “Idle” पर जाएँ।
अब स्प्राइट बिना आपके कोड लिखे उपयोगकर्ता की गतिविधि पर प्रतिक्रिया देता है। ज़रूरत के अनुसार ऐसे और इवेंट जोड़ सकते हैं।
पहले दो स्थितियों के बीच बदलाव बनाकर देखें। प्रीव्यू में सही चलने लगे, तब और स्थितियाँ जोड़ें।
स्प्राइट दोबारा कैसे इस्तेमाल करें?
लाइब्रेरी में सहेजकर उसी स्प्राइट को अलग-अलग प्रोजेक्ट में इस्तेमाल कर सकते हैं:
- तैयार स्प्राइट पर राइट-क्लिक करें और Add Library Widget चुनें। अब वह Assets टैब की लाइब्रेरी में तैयार विजेट के रूप में उपलब्ध होगा।
- दूसरे प्रोजेक्ट या टीम के साथी तक लाइब्रेरी पहुँचाने के लिए Library में जाकर Export करें।
- नया या मौजूदा प्रोजेक्ट खोलें, लाइब्रेरी इम्पोर्ट करें और स्प्राइट खींचकर रखें। उसके सभी फ़्रेम, अवधि और स्थितियाँ मूल स्प्राइट जैसी रहेंगी।
आम समस्याएँ
डिवाइस पर फ़्लैश करने के बाद स्प्राइट नहीं दिखता।
- अक्सर इसकी वजह मेमोरी होती है। इमेज फ़्रेम रखने के लिए डिवाइस में पर्याप्त RAM चाहिए।
- यह LVGL कॉन्फ़िगरेशन में तय होता है और आपके बोर्ड पर निर्भर है; PicoPixel इसे अपने-आप नहीं बदल सकता।
- एक्सपोर्ट की गई
README.mdमें इसकी जानकारी है। AI असिस्टेंट उसकी मदद से आपके डिवाइस का SDK/LVGL कॉन्फ़िगरेशन बदल सकता है।
फ़्रेम खिसके हुए या उछलते हुए दिखते हैं।
- सभी स्थितियों के हर फ़्रेम का आकार दोबारा जाँचें। कुछ पिक्सेल का अंतर भी उनकी जगह बिगाड़ सकता है।
एनिमेशन बहुत तेज़ या धीमा है।
- उस स्थिति की अवधि बदलें। हर स्थिति की अपनी अवधि होती है, इसलिए उन्हें अलग-अलग ठीक करना पड़ सकता है।
स्प्राइट सहेजते समय दूसरी स्थिति माँगी जा रही है।
- स्प्राइट में कम से कम 2 स्थितियाँ चाहिए। दूसरी स्थिति जोड़ें या केवल एक एनिमेशन के लिए Animated Image चुनें।
