Spine डेमो

Spine पारंपरिक 2डी ऐनिमेशन की सीमाओं से बहुत आगे जाता है. नीचे दिए गए डेमो दिखाते हैं कि आपके कलाकार, एनिमेटर, और प्रोग्रामर Spine द्वारा प्रदान किए गए बेहतर वर्कफ़्लो और क्षमताओं का उपयोग करके शानदार गेम कैसे बना सकते हैं.

नीचे दिए गए सभी डेमो लाइव डेमो हैं, जो हमारे spine-ts रनटाइम (WebGL के लिए) का उपयोग करते हैं. प्रत्येक डेमो के स्रोत कोड का अन्वेषण करके देखें कि हमने डेमो में Spine रनटाइम्स का उपयोग कैसे किया है.

Spine बनाम स्प्राइट शीट्स

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

पारंपरिक स्प्राइट ऐनिमेशन में ऐनिमेशन के प्रत्येक फ्रेम के लिए एक छवि की आवश्यकता होती है, जिसके परिणामस्वरूप बहुत बड़ी स्प्राइट शीट्स बनती हैं. प्रत्येक अतिरिक्त ऐनिमेशन आपके गेम के डिस्क स्थान और मेमोरी की आवश्यकताओं को बहुत बढ़ा देता है, विशेष रूप से स्मूद प्लेबैक के लिए आवश्यक फ्रेम दर पर. यह आपके कलाकारों के लिए बहुत काम हो जाता है और जब आकार की सीमाओं को पूरा करने के लिए ऐनिमेशनों की संख्या कम करनी पड़ती है तो आपका अंतिम उत्पाद प्रभावित होता है.

Spine ऐनिमेशन केवल हड्डियों और ऐनिमेशन डेटा को संग्रहीत करते हैं, साथ ही एक ही सेट की अलग-अलग छवियों के साथ जिन्हें प्रत्येक ऐनिमेशन के लिए पुन: उपयोग किया जाता है. इससे आप अपने गेम्स में बहुत सारे अनूठे ऐनिमेशन भरकर उन्हें सजीव बना सकते हैं. इसके अलावा, Spine ऐनिमेशन इंटरपोलेटेड होते हैं, जिससे फ्रेम दर कैसी भी हो, प्लेबैक हमेशा बहुत स्मूद रहता है.

Spine और स्प्राइट शीट ऐनिमेशन के बीच मेमोरी और डिस्क स्थान की आवश्यकताओं की तुलना करें.

ऐनिमेशन की गति
 

Spine फ्रेम-आधारित ऐनिमेशन के साथ

हालाँकि Spine पारंपरिक फ्रेम-दर-फ्रेम ऐनिमेशन की आवश्यकता को काफी हद तक कम कर देता है, लेकिन आवश्यकता होने पर छवियों को अभी भी स्वैप किया जा सकता है. उदाहरण के लिए, धड़ या फड़फड़ाते पंखों का दृष्टिकोण बदलना, विभिन्न चेहरे के हावभाव, या मज़ल फ्लैश.

Spine के स्लॉट, अटैचमेंट और ड्रॉ ऑर्डर तंत्र आपको अपने पूर्णतया डायनामिक Spine ऐनिमेशन में फ्रेम-दर-फ्रेम ऐनिमेशन को आसानी से एकीकृत करने की अनुमति देते हैं. और भी बेहतर, Spine फ्रेम-दर-फ्रेम छवियों में बदलाव कर सकता है, जैसा कि इस डेमो में एलियन के फटते सिर को स्केल करके दिखाया गया है.

ट्रांज़िशन और लेयरिंग

Smooth
Abrupt

2डी गेम्स का एक सामान्य नुकसान स्मूद ऐनिमेशन ट्रांज़िशन की कमी है. 3डी गेम्स में, ऐनिमेशनों के बीच ट्रांज़िशन रनटाइम पर ही तुरंत गणना किए जा सकते हैं. ऐनिमेशन एक-दूसरे में मिल भी सकते हैं, जैसे आधा चलना और आधा दौड़ना. Spine के बिना 2डी गेम्स में ब्लेंडिंग संभव नहीं है और आम तौर पर ट्रांज़िशन बहुत खटकते हैं. आर्टिस्ट हर संभव ट्रांज़िशन के लिए मैन्युअल रूप से फ्रेम बना सकते हैं, लेकिन जब ऐनिमेशन मिड प्लेबैक में रद्द हो सकता है तो वह भी मदद नहीं करता.

Spine 3डी दुनिया के फ़ायदे वापस 2डी में लाता है. Spine रनटाइम्स एक ऐनिमेशन से दूसरे में स्मूद और डायनामिक तरीके से ट्रांज़िशन करते हैं, जिससे आपके पात्रों में स्वाभाविक गतिशीलता दिखाई देती है. लेयरिंग के माध्यम से ऐनिमेशन एक-दूसरे के ऊपर ब्लेंड हो सकते हैं, जैसे चरित्र के दौड़ते समय शूटिंग का ऐनिमेशन चलाना या क्षति बढ़ने पर चलना और लंगड़ाना को धीरे-धीरे मिलाना.

ऐनिमेशन की गति
 

मेष विकृति

कठोर 2डी छवियों से बना एक Spine चरित्र पहले से ही बेहतरीन परिणाम दे सकता है, जैसे कि ऊपर डेमो में Spineboy. आपके पात्रों को और अधिक जीवंत बनाने के लिए, Spine 3डी दुनिया से और तरकीबें लाता है, जैसे मेष और वेट. मेष के साथ, छवियां अब कठोर नहीं रहतीं और आप जैसे चाहें मुड़ और विकृत हो सकती हैं. वेट मेष को हड्डियों से बांधते हैं, इसलिए हड्डियों के हिलने पर छवियां स्वचालित रूप से विकृत हो जाती हैं.

मेष आपके गेम के प्रदर्शन को भी बेहतर बना सकते हैं, क्योंकि यह आपकी छवियों के पारदर्शी हिस्सों को नहीं ड्रॉ करके फिल रेट उपयोग को कम कर देता है. यह मोबाइल उपकरणों पर विशेष रूप से महत्वपूर्ण होता है.

इस डेमो के लिए शानदार आर्ट Hwadock (उर्फ dugy) द्वारा प्रदान किया गया है. उन्हें Twitter और उनके ब्लॉग पर फॉलो करें.

हड्डियां दिखाएं
त्रिभुज दिखाएं

स्किन्स

Spine की स्किन्स फीचर आपकी वर्कलोड को उचित रखते हुए अनुकूलन और विविधता प्रदान करने के लिए बेहतरीन है. स्किन्स के साथ, ऐनिमेशन का काम केवल एक बार किया जाना होता है, फिर आप अपने सभी ऐनिमेशन का पुन: उपयोग करते हुए अपने कंकाल को विभिन्न रूप दे सकते हैं. अत्यधिक लचीलापन प्रदान करने के लिए, Spine रनटाइम्स आपको रनटाइम पर विभिन्न स्किन्स के भागों को मिलाने की अनुमति देते हैं, जिससे अनुकूलन की सभी आवश्यकताएं पूरी हो जाती हैं.

स्किन्स खिलाड़ियों को उनके अवतारों को नए लुक, कपड़े, हथियार और अन्य एक्सेसरीज़ के साथ तैयार करके आपके गेम की दुनिया में अपना अलग स्पर्श जोड़ने की सुविधा देती हैं. स्किन्स आपके ऐनिमेशनों का अधिकतम उपयोग भी कराती हैं: शत्रुओं, वस्तुओं और अन्य गेम ऑब्जेक्ट के लिए अपनी आर्ट को मिलाकर और मैच करके थोड़े से प्रयास में विविधता को बहुत बढ़ाया जा सकता है.

इस डेमो की आर्ट Unity के 2D Anim Heroes कैरेक्टर पैक में मिल सकती है.

यादृच्छिक स्किन्स

इनवर्स कीनेमेटिक्स

Spine में इनवर्स कीनेमेटिक्स का समर्थन वास्तविक और डायनामिक मूवमेंट प्रदान करता है, जिसे अन्यथा एनिमेट करना कठिन या असंभव होता. यह अधिक उन्नत रिगिंग को भी सक्षम बनाता है, जहाँ जटिल पोज़ को कुछ हड्डियों से आसानी से नियंत्रित किया जा सकता है.

क्योंकि Spine बेकिंग या प्लॉटिंग का उपयोग नहीं करता, आईके रनटाइम पर वास्तव में चमकता है. रनटाइम पर हड्डियों की स्थिति डायनामिक रूप से तय करके, आईके constraints आपके चरित्र को वातावरण पर आसानी से प्रतिक्रिया करने की अनुमति देता है, जैसे दुश्मनों पर निशाना साधना, टेढ़े-मेढ़े या उबड़-खाबड़ भूभाग पर पैर चलाना, इत्यादि. इस डेमो में Spineboy एक उपयोगकर्ता द्वारा नियंत्रित होवर बोर्ड पर संतुलित रहता है और साथ ही एक ऐनिमेशन भी चलाता है.

आजमाएं! लाल घेरों को खींचकर Spineboy को डायनामिक पोज़ दें. शूट और जंप बटन तथा लक्ष्य चेकबॉक्स आइडल ऐनिमेशन पर लेयर ऐनिमेशन जोड़ते हैं.

लक्ष्य
हड्डियां दिखाएं

एडिटिव ऐनिमेशन ब्लेंडिंग

अलग-अलग ट्रैक पर ऐनिमेशन चलाने पर आमतौर पर निचली ट्रैक का पोज़ ऊपरी ट्रैक से ओवरराइड हो जाता है. एडिटिव ट्रैक के साथ, उसका पोज़ निचली ट्रैक के परिणाम में जोड़ा जाता है. इससे विभिन्न स्वतंत्र ऐनिमेशनों के पोज़ अलग-अलग प्रभावों के साथ ब्लेंड हो सकते हैं, जैसे 50% खुश, 20% गुस्सा, और 30% उत्साहित.

इस डेमो में उल्लू के 4 ऐनिमेशन हैं, प्रत्येक दिशा के लिए एक. इन ऐनिमेशनों के स्वतंत्र पोज़ को कैनवास के केंद्र के सापेक्ष माउस कर्सर की स्थिति के आधार पर एक-दूसरे में ब्लेंड किया जाता है.

पाथ constraints

अक्सर किसी चरित्र का कोई भाग खुले या बंद रास्ते का अनुसरण करता है. इस मूवमेंट को मैन्युअल रूप से की करने के बजाय, Spine के पाथ constraints का उपयोग करके हड्डियों को अपने आप किसी पथ का अनुसरण कराया जा सकता है. यह संयुक्त बेज़ियर पथ आपस में जुड़े बिंदुओं के एक सेट से बना होता है, जिससे आप पथ को मोड़ और आकार दे सकते हैं. स्वयं पथ को भी एनिमेट किया जा सकता है और यहां तक कि हड्डियों के साथ वेट भी किया जा सकता है, इसलिए हड्डियों के हिलने पर पथ स्वचालित रूप से विकृत हो जाता है.

इस डेमो में एक बेल मेष हड्डियों से बंधी हुई है जिन्हें एक पथ में constraint किया गया है. मेष में जितने अधिक वर्टाइसेज़ होंगे, वह उतनी ही स्मूद तरीके से मुड़ेगा.

पाथ constraints का उपयोग रनटाइम पर भी बहुत प्रभावी ढंग से किया जा सकता है. लाल हैंडल को खींचकर पथ को डायनामिक तरीके से बदलें और देखें कैसे बेल उसे बिना किसी रुकावट के फॉलो करती है!

हड्डियां और पथ दिखाएं

पाथ constraints शक्तिशाली रिगिंग की सुविधा देते हैं, जैसा कि इस डेमो में Stretchyman द्वारा दिखाया गया है. बाहों और पैरों के लिए, मेष को कई छोटी हड्डियों से वेट किया जाता है, जिन्हें फिर अंगों के लिए सरल पथ का अनुसरण करने के लिए constraint किया जाता है. फिर इन पथों को हड्डियों से वेट किया जाता है, जिन्हें हिलाकर अंगों को नियंत्रित किया जा सकता है. इस सेटअप में कई हड्डियों को सिर्फ कुछ हड्डियों से नियंत्रित किया जा सकता है. इससे न केवल ऐनिमेशन करना आसान होता है, बल्कि रनटाइम पर डायनामिक पोज़ के लिए कुछ ही हड्डियों को समायोजित करना पड़ता है.

लाल हैंडल खींचें और Stretchyman को नचाएं!

हड्डियां और पथ दिखाएं

क्लिपिंग

कभी-कभी ऐनिमेशन के कुछ भागों को आंशिक रूप से छिपाना पड़ता है, जैसे इस उदाहरण में जहाँ Spineboy एक पोर्टल से बाहर आता है. ऐसे मामलों में क्लिपिंग मददगार होती है, क्योंकि यह रेंडरिंग को एक बहुभुज क्षेत्र तक सीमित कर देती है. परिभाषित, एनिमेट होने योग्य क्षेत्र के भीतर का कंकाल ही दिखता है. इससे ऐसे कई प्रभाव संभव होते हैं जो अन्यथा संभव नहीं होते, जैसे खिड़कियाँ, प्रकाश प्रभाव, आदि. यह भी संभव है कि क्लिपिंग केवल कंकाल के एक उपसमुच्चय को प्रभावित करे. उदाहरण के लिए, एक ऐनिमेशन जिसमें कोई चरित्र एक्स-रे से गुजरता है.

त्रिभुज दिखाएं

ट्रांसफ़ॉर्म constraints

कई परस्पर निर्भर भागों वाले जटिल कंकालों को एनिमेट करना थकाऊ हो सकता है. Spine के ट्रांसफ़ॉर्म constraints अधिक शक्तिशाली रिगिंग प्रदान करके यह दिक्कत दूर कर देते हैं. एक हड्डी के ट्रांसफ़ॉर्म को दूसरी हड्डी के ट्रांसफ़ॉर्म से constraint करने पर, आपको केवल एक हड्डी को एनिमेट करने की आवश्यकता होती है और बाकी हड्डियाँ स्वचालित रूप से समायोजित हो जाती हैं. सतह पर यह सरल लग सकता है, लेकिन उन्नत रिगिंग इसका उपयोग करके यह स्वचालित कर सकती है कि कंकाल पोज़ किए जाने पर कैसे व्यवहार करता है.

ट्रांसफ़ॉर्म constraints मशीनरी के लिए भी बहुत अच्छे हैं, जैसे इस डेमो में टैंक. प्रत्येक पहिये का रोटेशन की करने के बजाय, एक पहिये को एनिमेट किया जाता है जबकि अन्य पहिये ट्रांसफ़ॉर्म constraint के माध्यम से उसका अनुसरण करते हैं. ऑफसेटिंग और मिक्सिंग करके constraint भागों में फिर से अलग-अलगपन जोड़ा जा सकता है.

टैंक की पट्टियों (ट्रेड्स) को पाथ constraint के माध्यम से घुमाया जाता है, जो पाथ के बिना एनिमेट करना असंभव होता. पथ पहियों से वेट किया गया है, इसलिए पहियों के ऊपर-नीचे होने पर पथ स्वचालित रूप से मुड़ता है.

हड्डियां और पथ दिखाएं

इस डेमो में, दो छोटे पहियों का घूमना बड़े पहिये के घूमने से constraint किया गया है. साथ ही, बड़े पहिये का अनुवाद constraint किया गया है ताकि वह दोनों छोटे पहियों के बीच रहे.

रोटेशन ऑफ़सेट
 
अनुवाद मिक्स