पिक्सेल कैरेक्टर को जीवंत दिखाने के लिए दर्जनों फ़्रेम बनाने की ज़रूरत नहीं होती। 32×32 कैनवस पर शरीर को केवल एक पिक्सेल ऊपर उठाना, परछाईं को थोड़ा चपटा करना और सबसे ऊंची मुद्रा को एक पल रोकना भी सांस लेने जैसा प्रभाव पैदा कर सकता है।
इस गाइड में हम बिना झटके दोहरने वाला चार फ़्रेम का स्थिर मुद्रा एनिमेशन बनाएंगे। यही अभ्यास गेम स्प्राइट, प्रोफ़ाइल चित्र, स्टिकर और पिक्सेल GIF के लिए उपयोगी है।
अधिक फ़्रेम नहीं, हर फ़्रेम में एकरूपता ज़रूरी है
हर फ़्रेम में कैनवस का आकार, कैरेक्टर की जगह, बाहरी रेखा की मोटाई और रंग-पैलेट समान रखें। केवल उसी हिस्से को बदलें जिसे वास्तव में हिलना है। छोटी पिक्सेल तस्वीर में एक पिक्सेल भी बड़ा बदलाव होता है, इसलिए मामूली अंतर दोहराव में कंपन जैसा दिखाई देता है।
बारीकियां जोड़ने से पहले जालिका और एक स्थिर संदर्भ-बिंदु तय करें। खड़े कैरेक्टर के लिए पैरों का मध्य और हवा में तैरते कैरेक्टर के लिए परछाईं का मध्य अच्छा संदर्भ-बिंदु है।
पहले अभ्यास की तैयारी
- कैनवस: शुरुआत के लिए 32×32 रखें। बहुत सरल चिह्न के लिए 16×16 भी ठीक है।
- रंग-पैलेट: बाहरी रेखा, मुख्य रंग, छाया और चमक मिलाकर 4–6 रंग चुनें।
- आकार बढ़ाना: चित्र को 2×, 3× या 4× के पूर्णांक अनुपात में, निकटतम-पड़ोसी विधि से बड़ा करें ताकि किनारे साफ़ रहें।
- गति: एक वाक्य में तय करें, जैसे “कैरेक्टर धीरे-धीरे सांस ले रहा है।” शुरुआत में कूदना, हाथ हिलाना और पलक झपकना एक साथ न जोड़ें।
चार फ़्रेम के स्थिर मुद्रा एनिमेशन की योजना
| फ़्रेम | बदलाव | स्थिर हिस्सा |
|---|---|---|
| 1 | बीच की मुद्रा, जो आधार बनेगी | पैरों का मध्य और कैनवस का आकार |
| 2 | शरीर एक पिक्सेल ऊपर और थोड़ा लंबा | आंखों की दूरी और रंग-पैलेट |
| 3 | सबसे ऊंची मुद्रा पर छोटी रुकावट | परछाईं का मध्य |
| 4 | नीचे आते समय शरीर थोड़ा दबा हुआ | भार दाएं या बाएं न खिसके |
हर फ़्रेम को बराबर समय देना ज़रूरी नहीं है। ऊंची मुद्रा को थोड़ा अधिक रोकने से हल्कापन महसूस होता है, जबकि तेज़ वापसी से उछाल आता है।
चरण 1: एक रंग में बाहरी आकार जांचें
आंखें, कपड़ों के नमूने और चमक कुछ समय के लिए छिपा दें। चित्र को उसी आकार में देखें जिसमें वह अंततः दिखाई देगा। यदि सिर, शरीर और पैर अब भी साफ़ पहचाने जा रहे हैं, तो गति के दौरान भी कैरेक्टर समझ में आएगा।
पहले अभ्यास के लिए जेली जैसा जीव, चौकोर रोबोट, मशरूम या कानों वाला गोल चेहरा चुन सकते हैं। छोटे सजावटी हिस्से मुख्य गति ठीक होने के बाद जोड़ें।
चरण 2: आधार फ़्रेम की प्रतियां बनाएं
पहले फ़्रेम की तीन प्रतियां बनाएं और केवल ज़रूरी पिक्सेल खिसकाएं। हर फ़्रेम को नए सिरे से बनाने पर सिर की चौड़ाई, आंखों की दूरी या रेखा की मोटाई अनजाने में बदल सकती है।
यदि संपादक में पिछला फ़्रेम हल्का दिखाने की सुविधा है, तो उसे चालू रखें। ऐसी सुविधा न हो तो दो फ़्रेम के बीच जल्दी-जल्दी बदलकर टिमटिमाते किनारों को पहचानें।
चरण 3: संदर्भ-बिंदु को स्थिर रखें
शरीर एक पिक्सेल ऊपर जाए तो पैरों को साथ ले जाना आवश्यक नहीं है। स्थिर पैर गति को सांस जैसा बनाते हैं। यदि पैर और परछाईं दोनों साथ खिसकेंगे, तो पूरा कैरेक्टर कैनवस पर फिसलता हुआ लगेगा।
हर फ़्रेम में बदलाव के बाद संदर्भ-बिंदु की जगह जांचें। अनचाहा कंपन दूर करने का यह सबसे आसान तरीका है।
चरण 4: रंग-पैलेट और बाहरी रेखा समान रखें
सभी फ़्रेम में वही रंग इस्तेमाल करें। केवल एक फ़्रेम में नया रंग दिखाई दे तो वह चमकती हुई गड़बड़ी जैसा लगेगा। प्रकाश को हिलाना हो तो मौजूदा चमक वाले पिक्सेल को खिसकाएं।
चित्र बड़ा करके देखें कि एक पिक्सेल की रेखा अनजाने में दो पिक्सेल मोटी न हो गई हो। केवल जानबूझकर दबाव या खिंचाव दिखाते समय ऐसा बदलाव करें।
चरण 5: पूर्वावलोकन में गति तय करें
पहले एनिमेशन को धीमा चलाएं और फ़्रेमों के बीच आने वाले झटके खोजें। उसके बाद गति बढ़ाएं। कोई एक निश्चित FPS हर काम के लिए सही नहीं होता; ज़रूरी यह है कि गति साफ़ समझ आए और चौथा फ़्रेम पहले फ़्रेम से सहजता से जुड़ जाए।
GIF निर्यात करने के बाद भी एक बार अवश्य देखें, क्योंकि अलग-अलग ब्राउज़र और सामाजिक मंच उसकी चाल थोड़ी अलग दिखा सकते हैं।
चरण 6: केवल एक सहायक गति जोड़ें
मुख्य गति ठीक होने के बाद पलक झपकना, थोड़ी देर से हिलते बाल, लहराता स्कार्फ़, खिसकती चमक या बदलती परछाईं में से एक चुनें। शरीर से एक फ़्रेम देर से होने वाली गति कैरेक्टर में भार का एहसास जोड़ती है।
32×32 में बहुत अधिक चलते हुए हिस्से मुख्य क्रिया को छिपा देते हैं। एक बदलाव जोड़ें, पूर्वावलोकन देखें और उसके बाद ही अगला निर्णय लें।
आम गलतियां और उनके समाधान
- दाएं-बाएं कंपन: पैरों या परछाईं की जगह फ़्रेमों के बीच बदल रही है।
- बाहरी रेखा टिमटिमाना: कुछ पिक्सेल गायब हैं या रेखा की मोटाई समान नहीं है।
- शरीर पिघलता हुआ लगना: हर हिस्सा बदल रहा है और कोई स्थिर क्षेत्र नहीं बचा।
- गति बहुत तेज़ होना: मुख्य मुद्राएं पर्याप्त समय तक दिखाई नहीं देतीं।
- बड़ा करने पर चित्र धुंधला होना: निकटतम-पड़ोसी विधि और पूर्णांक अनुपात इस्तेमाल करें।
- चक्र के जोड़ पर झटका: चौथा और पहला फ़्रेम एक-दूसरे से बहुत अलग हैं।
GIF निर्यात करने से पहले
- एनिमेशन को वास्तविक आकार और बड़े आकार, दोनों में देखें।
- कम से कम दस चक्र चलाकर पैरों, आंखों और बाहरी रेखा को अलग-अलग जांचें।
- साझा करने के लिए GIF और साफ़ स्थिर फ़्रेम के लिए PNG रखें। गेम के लिए क्रमांकित PNG या स्प्राइट शीट किसी उपयुक्त चित्र-संपादक में तैयार करें।
- मूल फ़ाइल JPG में न रखें, क्योंकि उसका संपीड़न पिक्सेल किनारों को खराब कर सकता है।
अक्सर पूछे जाने वाले सवाल
शुरुआत में कितने फ़्रेम रखने चाहिए?
2–4 फ़्रेम पर्याप्त हैं। सांस लेना, पलक झपकना और हल्का उछाल इतने फ़्रेम में साफ़ दिख सकते हैं। गति समझ में न आए तो नए फ़्रेम जोड़ने से पहले मुख्य मुद्राओं का अंतर बढ़ाएं।
16×16 और 32×32 में कौन-सा आकार बेहतर है?
32×32 में कैरेक्टर की पहचान बनाए रखने के लिए पर्याप्त जगह मिलती है और फिर भी हर पिक्सेल को नियंत्रित करना आसान रहता है। अत्यंत सरल बाहरी आकार का अभ्यास करना हो तो 16×16 चुनें।
क्या पिक्सेल आर्ट एनिमेशन केवल गेम के लिए है?
नहीं। इसका उपयोग प्रोफ़ाइल चित्र, स्टिकर, वेबसाइट सजावट और दोहरने वाले GIF में भी किया जा सकता है। अलग दिशाओं की गति, टकराव क्षेत्र और स्प्राइट शीट अगले चरण के विषय हैं।
अपना पहला चार फ़्रेम का चक्र बनाएं
छोटा चित्र बनाएं, एक पिक्सेल खिसकाएं और तुरंत पूर्वावलोकन देखें। इस छोटे अभ्यास से बारीकियां बढ़ने से पहले कंपन पकड़ में आ जाता है।
WigglyPaint में चित्र बनाना शुरू करें