एनाटॉमी (शरीर रचना) जाने बिना एक बुनियादी पिक्सेल आर्ट वॉक साइकिल कैसे बनाएं

ऐसा कैनवास चुनें जो आपके मौजूदा कैरेक्टर के अनुकूल हो; 32 × 32 पिक्सेल एक पिक्सेल-आर्ट वॉक-साइकिल ट्यूटोरियल में उपयोग किया गया एक व्यावहारिक उदाहरण है, कोई अनिवार्य आकार नहीं। सभी फ़्रेमों में कैनवास और कैरेक्टर की समग्र चौड़ाई व ऊंचाई एक समान रखें। पैरों के नीचे एक क्षैतिज ग्राउंड गाइड रखें, और धड़ के केंद्र जैसा एक स्थिर एंकर नोट करें। ये गाइड अवांछित बहाव (drifting) को पहचानना आसान बनाते हैं।

पहले चरण के लिए, सिर को एक अंडाकार या ब्लॉक के रूप में, धड़ को एक कॉम्पैक्ट आकार के रूप में, और प्रत्येक हाथ और पैर को एक मोटी रेखा या संकीर्ण आकार के रूप में दर्शाएं। पास और दूर के अंगों के लिए अलग-अलग अस्थायी रंगों का उपयोग करें ताकि ओवरलैप होने पर आप उनमें अंतर कर सकें। यह एक कार्यशील आरेख (working diagram) है, सटीक अनुपातों का कोई दावा नहीं। पिक्सेल कलाकार रेमंड श्लिटर बड़े स्प्राइट को परिष्कृत करने से पहले सिर, गर्दन, धड़, हाथ और पैरों को अलग करने के लिए कलर-कोडेड डमी का उपयोग करने का वर्णन करते हैं। SLYNYRD: “Pixelblog - 50 - Human Walk Cycle”

एक उपयोगी वॉक-साइकिल ढांचे में चार पोज़ होते हैं: कॉन्टैक्ट, डाउन, पासिंग और अप। इन्हें एक कदम के लिए बनाएं, फिर विपरीत पैर को आगे रखते हुए इसी पैटर्न को दोहराएं। कॉन्टैक्ट में, आगे का पैर आगे पहुंचता है और पीछे का पैर पीछे रहता है। डाउन पर, आगे का पैर कैरेक्टर का भार लेता है और शरीर थोड़ा नीचे झुकता है। पासिंग में, जब पीछे का पैर आगे निकलता है तो पैर प्रोजेक्शन में क्रॉस होते हैं, और शरीर ऊपर उठता है। अप पर, कदम बढ़ाने वाला पैर अगले कॉन्टैक्ट की ओर आगे की ओर स्विंग करता है।

आठ-फ्रेम के लूप के लिए, चित्रों को इस क्रम में व्यवस्थित करें: बायां कॉन्टैक्ट, डाउन, पासिंग, अप, दायां कॉन्टैक्ट, डाउन, पासिंग, अप। दूसरा भाग यह उलट देता है कि कौन सा पैर आगे है; इसे पहले भाग के पूरक जैसा लगना चाहिए, न कि डुप्लिकेट की गई छवि जैसा। एक विस्तृत पिक्सेल-आर्ट उदाहरण इन प्रमुख क्षणों को लेबल करता है और मितव्ययिता व तरलता (fluidity) के बीच संतुलन के रूप में आठ फ्रेम का उपयोग करता है; अन्य फ्रेम संख्याएं अन्य स्प्राइट शैलियों के अनुकूल हो सकती हैं। SLYNYRD: “Pixelblog - 50 - Human Walk Cycle”

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

प्रत्येक अंग को कूल्हे से पैर तक एक जुड़े हुए आकार के रूप में मानें। आपको हर हड्डी को पिक्सेल पर मैप करने की आवश्यकता नहीं है: पैर की लंबाई को काफी हद तक एक समान रखें और दिशा या रूपरेखा में बदलाव के माध्यम से घुटने के मोड़ को स्पष्ट करें। एक छोटे स्प्राइट पर, इसका मतलब केवल एक या दो पिक्सेल का बदलाव हो सकता है। यदि पैर एक एकल अस्पष्ट ब्लॉक बन जाते हैं, तो उनके बीच का अंतर बढ़ाएं या यह स्पष्ट करने के लिए अस्थायी पास/दूर के रंगों का उपयोग करें कि कौन सा आगे से गुजरता है। एक लो-रिज़ॉल्यूशन स्प्राइट ट्यूटोरियल बताता है कि छोटे कैरेक्टरों के लिए चार-फ्रेम वॉक काम कर सकते हैं, जबकि पैरों की बारी-बारी से शेडिंग चार-फ्रेम चक्र में दोनों प्रमुख पैरों के बीच अंतर करने में मदद कर सकती है। Manning Leonard Krull: “Tutorial: Walking animation for low-res sprites”

धड़ और सिर को फ्रेम दर फ्रेम लगभग एक ही सामान्य केंद्र के आसपास स्थिर रखें। शरीर को डाउन पोज़ के आसपास नीचे होने दें और कदम के पासिंग या अप वाले हिस्से के आसपास ऊपर उठने दें, लेकिन उछाल (bob) को नियंत्रित रखें: छोटे कैनवास पर एक पिक्सेल का बदलाव भी बहुत प्रमुख हो सकता है। हाथों के लिए, आगे वाले पैर के विपरीत हाथ को स्विंग करने का प्रयास करें। यदि दायां पैर आगे है, तो बायां हाथ आगे बढ़ सकता है; अगले कॉन्टैक्ट के लिए इस संयोजन को उलट दें। हाथों और पैरों को इतना सरल रखें कि वे अंगों से अलग दिखाई दें।

ये परीक्षण करने के लिए शुरुआती आकार हैं, सार्वभौमिक माप नहीं। भारी कपड़े पहने हुए कैरेक्टर, बहुत छोटे स्प्राइट या अत्यधिक शैलीबद्ध डिज़ाइन को अंगों के बीच कम अलगाव या हल्के हाथ के स्विंग की आवश्यकता हो सकती है। एक व्यावहारिक पिक्सेल-आर्ट ट्यूटोरियल भी हाथों और पैरों को सरल बनाने, गहराई का संकेत देने के लिए पिछले अंग के टोन को बदलने और कैरेक्टर की इच्छित शैली के अनुरूप अनुपात चुनने की सलाह देता है। Clip Studio Tips: “Tips and Configuration for Creating a Walking Cycle - PixelArt”

चेहरा, सिलवटें, हाइलाइट्स या एक्सेसरीज़ जोड़ने से पहले रफ़ लूप को चलाकर देखें। दो कॉन्टैक्ट पोज़ के बीच एक स्पष्ट बदलाव, धड़ के नीचे पैरों का स्पष्ट मूवमेंट, और एक ऐसा सिर देखें जो बग़ल में झटके लेने के बजाय संरेखित रहता है। यदि स्प्राइट एक ही जगह मार्च करता हुआ या लात मारता हुआ दिखता है, तो पहले अंगों के रफ़ आकारों को समायोजित करें। विवरण गति की समस्या को छुपा सकते हैं और प्रत्येक सुधार को धीमा कर सकते हैं।

एक बार जब सिल्हूट काम करने लगे, तो कैरेक्टर के पैलेट को पुनर्स्थापित करें और एक समय में एक विशेषता को परिष्कृत करें। बदलावों को स्थानीयकृत रखें: यदि केवल दूर का पैर गहराई बदलता है, तो सिर और धड़ को हिलाए बिना इसके रंग या ओवरलैप को बदलें। बाल, ढीली आस्तीन या छोटी एक्सेसरी शरीर के साथ थोड़ा हिल सकती है, लेकिन वे वैकल्पिक हैं। चार-फ्रेम के पिक्सेल-आर्ट अभ्यास में, पिंगुआक बुनियादी चक्र स्थापित करने के बाद बाल और टोपी की सजावट जैसे हल्के विवरणों में छोटी गति जोड़ने का प्रदर्शन करते हैं। Pinnguaq: “Pixel Art 4A: Animation Basics In GraphicsGale”

एनीमेशन का लगातार पूर्वावलोकन करें और एक समय में एक फ्रेम करके आगे बढ़ें। सबसे पहले फ्रेम आठ की तुलना फ्रेम एक से करें: धड़, सिर, ज़मीन की स्थिति और समग्र सिल्हूट बिना किसी दृश्य झटके (pop) के जुड़ने चाहिए। फिर जांचें कि दोनों कॉन्टैक्ट पोज़ विपरीत कदम हैं, और जमा हुआ पैर अलग ऊंचाई पर कूदता हुआ प्रतीत नहीं होता है। यदि कैरेक्टर बहुत अधिक उछलता हुआ प्रतीत होता है, तो लंबवत बदलाव को कम करें; यदि पैर आपस में धुंधले हो जाते हैं, तो उनके अलगाव या ओवरलैप में सुधार करें।

प्रत्येक पास में एक चीज़ बदलें, फिर दोबारा चलाएं। टाइमलाइन का फ्रेम विलंब (frame delay) यह नियंत्रित करता है कि प्रत्येक ड्राइंग स्क्रीन पर कितनी देर तक रहती है, इसलिए चित्रों को केवल स्थिर छवियों के रूप में आंकने के बजाय प्लेबैक में गति का परीक्षण करें। पिंगुआक का वॉकथ्रू एनिमेटेड पूर्वावलोकन और व्यक्तिगत फ्रेम दोनों की जांच करने और गति को समायोजित करने के लिए फ्रेम विलंब को बदलने की सलाह देता है। Pinnguaq: “Pixel Art 4A: Animation Basics In GraphicsGale”

आठ फ्रेम आपको दोनों पक्षों के लिए चार मुख्य पोज़ दिखाने की गुंजाइश देते हैं। यदि स्प्राइट बेहद छोटा है, तो दो- या चार-फ्रेम चक्र अधिक स्पष्ट दिख सकता है क्योंकि इसमें ड्रा करने के लिए बहुत कम छोटे बदलाव होते हैं; यदि बदलाव अचानक महसूस होते हैं और कैनवास में जगह है, तो मुख्य पोज़ के बीच फ्रेम जोड़ें। कोई एक फ्रेम संख्या नहीं है जो हर स्प्राइट के अनुकूल हो। Adafruit की गाइड लगभग छह फ्रेम का उपयोग करने वाले सरल गेम वॉक और लगभग बारह फ्रेम तक का उपयोग करने वाले अधिक तरल संस्करणों का वर्णन करती है, जबकि लो-रिज़ॉल्यूशन ट्यूटोरियल दो-, चार- और आठ-फ्रेम विकल्पों पर चर्चा करता है। Adafruit: “Pixel Art for LED Matrix Displays”, Manning Leonard Krull: “Tutorial: Walking animation for low-res sprites”

जब वॉक अपने इच्छित आकार में स्पष्ट रूप से दिखाई दे और अंतिम से पहले का ट्रांज़िशन निर्बाध लगे, तो समाप्त करें। अतिरिक्त फ्रेम या द्वितीयक गति जोड़ने से पहले उस रफ़ संस्करण को सहेजें; यह आपको वापस लौटने के लिए एक स्पष्ट आधार रेखा देता है यदि जोड़ा गया विवरण गति को समझने में कठिन बनाता है।

• “Pixelblog - 50 - Human Walk Cycle,” SLYNYRD

• “Tutorial: Walking animation for low-res sprites,” Manning Leonard Krull

• “Tips and Configuration for Creating a Walking Cycle - PixelArt,” Clip Studio Tips

• “Pixel Art 4A: Animation Basics In GraphicsGale,” Pinnguaq

• “Pixel Art for LED Matrix Displays,” Adafruit Learning System