पर्दे के पीछे - मीडिया क्वेरी मारियो

इस हेब्रेटोपिक में, हम डेमो मीडिया क्वेरी मारियो बनाने के बारे में बात करेंगे, जिसका उल्लेख डाइजेस्ट ज़ोर्ट # 30 में किया गया था।

मुझे अपने ब्राउज़र पर मिलने वाले हर नए टेक डेमो से प्यार है। कभी-कभी उनमें जो लोग गठबंधन करते हैं, वे अपनी जटिलता और रचनात्मकता के साथ मस्तिष्क को उड़ा सकते हैं।

अक्टूबर के मध्य में WebDevConf 2012 का दौरा करने के बाद, मैंने बहुत ही उदात्त प्रेरणा महसूस की जो एक अच्छा सम्मेलन प्रस्तुत करता है। लंदन में एक सम्मेलन से लौटकर, मैंने मोज़िला देव डर्बी के बारे में एक ट्वीट देखा, और, अभी भी प्रेरित, योगदान करने का फैसला किया। परिणाम मीडिया क्वेरी मारियो का एक तकनीकी डेमो था, जो मीडिया प्रश्नों, CSS3 एनिमेशन और HTML5 ऑडियो का मिश्रण है।

कहाँ से शुरू करें?

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

मारियो 3 पहली चीज थी जो दिमाग में आई। मैं एक दो-आयामी पक्षों को प्राप्त करना चाहता था, और जब से मैं रेट्रो गेम से ग्रस्त हूं, मैंने तुरंत मारियो के बारे में सोचा। हर कोई जो मारियो के बारे में खेल में दिलचस्पी नहीं रखता है, वह समझ जाएगा कि मारियो 3 भूमिका के लिए एकमात्र संभावित उम्मीदवार था (यदि कोई सहमत नहीं है, तो मेरे पास हमेशा यह साबित करने के लिए तर्क होंगे कि यह सबसे अच्छा द्वि-आयामी मारियो है)।

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

मैंने खुद को सिर्फ एक कार्यान्वयन नियम तक सीमित रखा: जहाँ भी संभव हो, चेतन का उपयोग सीएसएस करें। यदि सीएसएस का उपयोग करके कुछ किया जा सकता है, तो मुझे इसे क्रियान्वयन के प्रदर्शन और जटिलता की परवाह किए बिना, इसके साथ करना चाहिए था। मुझे प्रदर्शन देखने की उम्मीद थी, मैं बाद में लौटूंगा।

शुरू करने के लिए, किसी भी बटन पर क्लिक करें

पहली समस्याओं में से एक मैं यह समझने के लिए था कि उपयोगकर्ता को यह सब देखने के लिए स्क्रीन कितनी चौड़ी होगी। यह न केवल एनिमेशन के आकार को डिजाइन करते समय महत्वपूर्ण था, यह निर्धारित करना महत्वपूर्ण था कि एक बार में उपयोगकर्ता को किस स्तर का टुकड़ा दिखाया जाएगा। जितना बड़ा टुकड़ा देखा जा रहा है, उतना ही एनीमेशन आपको एक समय में चाहिए।

मारियो 3 खुद क्या था, इस पर थोड़ा ध्यान देने के बाद, मुझे यह प्रतीत हुआ कि नियंत्रण के लिए मूल मेनू स्क्रीन का उपयोग करना समझ में आता है। इस तथ्य के अलावा कि वह डेमो डाउनलोड करने के लिए जिम्मेदार होगा, वह यह भी सुनिश्चित करेगा कि उपयोगकर्ता ने एनीमेशन शुरू करने से पहले खिड़की का आकार बदल दिया है। मैंने इस मीडिया अनुरोध को प्रारंभ एनीमेशन बटन को छिपाने वाली एक शर्त के साथ नियंत्रित किया:

@media screen and (max-width: 320px), (min-width: 440px) { .startBtn { display:none; } } 

एनीमेशन की योजना बनाते समय, मैं मूल गेमप्ले को यथासंभव मैच करना चाहता था। इसे आसान बनाने के लिए, मुझे एक गति से एक स्तर से गुजरने का एक वीडियो मिला जिसे मैं दोहरा सकता था। वीडियो ने मुझे आवश्यक संसाधनों और एनीमेशन की गति की योजना बनाने में मदद की, और इस पर प्रतिबिंबित किया कि मैं विभिन्न दुश्मनों और शक्ति-अपों को कैसे चेतन करूंगा।

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

यहाँ एनीमेशन के लिए बाद में उपयोग किया गया था:

चलो चलते हैं!

इसलिए, इस क्षण तक मेरे पास एक विचारशील विचार और हाथ पर उपयुक्त संसाधन थे, और पहले से ही उन्हें कोड में संयोजित करने के लिए तैयार था।

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

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

बनाने के लिए एक छोटी सी टिप्पणी: नई CSS3 सुविधाओं का उपयोग करते समय, LESS या SASS जैसे पूर्वप्रक्रमक का उपयोग करना आपके जीवन को सरल बना सकता है, और मैं दृढ़ता से अनुशंसा करूंगा कि आप उनकी दिशा में देखें। मिश्रण का उपयोग करना विक्रेता के उपसर्गों को छुपाता है और उन्हें उस कोड से निकाल देता है जिसे आप सीधे काम करते हैं, कोड में गड़बड़ी से बचाते हैं और विश्व स्तर पर CSS गुणों की जगह लेते समय बहुत समय बचाता है।

विशिष्ट तकनीकों का अध्ययन शुरू करने से पहले, हमें यह समझने की आवश्यकता है कि एनीमेशन में दो मुख्य भाग होते हैं: एनीमेशन गुण और संबंधित कीफ़्रेम।

एनिमेशन गुण

कई संबंधित गुणों का उपयोग करके एक एनीमेशन बनाया जा सकता है। यहाँ मुख्य गुण हैं जिनका मैंने उपयोग किया है:

 //  ,        animation-name: mario-jump; //,     ,     animation-duration: 500ms; //       animation-timing-function: ease-in-out; //     ,    animation-delay: 0s; //      animation-iteration-count: 1; //           animation-fill-mode: forwards; 

डेमो में animation-fill-mode संपत्ति का उपयोग करना विशेष रूप से महत्वपूर्ण था, क्योंकि यह प्लेबैक के अंत में अंतिम शैलियों को लागू करने के लिए एनीमेशन को बताता है। इसके बिना, तत्व उस स्थिति में वापस आ जाएगा जो एनीमेशन से पहले था।

उदाहरण के लिए, यदि animation-fill-mode सेट नहीं किया जाता है, जब हम ऑब्जेक्ट की बाईं सीमा को 30 पीएक्स से प्रारंभिक स्थिति में 0 पीएक्स पर ले जाते हैं, तो एनीमेशन के बाद यह 0px स्थिति पर लौट आएगा। और अगर भरण मोड को forwards सेट किया जाता है, तो तत्व अपने अंतिम स्थान पर रहेगा।

मुख्य फ्रेम

@keyframes नियम आपको एनीमेशन चरणों को निर्दिष्ट करने की अनुमति देता है। अपने सबसे बुनियादी स्तर पर, इस नियम को इस प्रकार लिखा जा सकता है:

 @keyframes mario-move { from { left:0px; } to { left:200px; } } 

कहाँ from और क्रमशः 0% और 100% एनीमेशन के लिए कीवर्ड हैं। अधिक जटिल उदाहरण दिखाने के लिए, आइए उस कोड को देखें जो कई प्लेटफार्मों के बीच मारियो की छलांग को दर्शाता है:

 @keyframes mario-jump-sequence { 0% { bottom:30px; left: 445px; } 20% { bottom:171px; left: 520px; } 30% { bottom:138px; left: 544px; } 32% { bottom:138px; left: 544px; } 47% { bottom:228px; left: 550px; } 62% { bottom:138px; left: 550px; } 64% { bottom:138px; left: 550px; } 76% { bottom:233px; left: 580px; } 80% { bottom:253px; left: 590px; } 84% { bottom:273px; left: 585px; } 90% { bottom:293px; left: 570px; } 100% { bottom:293px; left: 570px; } } 

यदि उपरोक्त एनीमेशन 1 सेकंड तक रहता है, तो मारियो bottom: 30px; left: 445px; स्थिति से आगे बढ़ेगा bottom: 30px; left: 445px; bottom: 30px; left: 445px; bottom: 138px; left: 520px; 0 सेकंड (0% एनीमेशन) पर bottom: 138px; left: 520px; bottom: 138px; left: 520px; पहले 200 एमएस (या 20%) में। और इसी तरह, पहली कीफ्रेम से लेकर आखिरी तक।

कार्रवाई एनीमेशन

डेमो से एनिमेशन को उनके प्रकार के अनुसार तीन श्रेणियों में विभाजित किया जा सकता है:

• चालें , जैसे कि मारियो कूदना या एक प्रश्न के साथ एक बॉक्स से बाहर निकलने वाला सिक्का।
• स्प्राइट प्रबंधन यानी। पात्रों और वस्तुओं की पृष्ठभूमि छवि को नियंत्रित करें।
• किसी भी एनीमेशन को लूप करना जिसे कई मिलीसेकंड या सेकंड के लिए दोहराया जाना चाहिए।

विस्थापन

सभी डेमो एनिमेशन के लगभग 75% के लिए खातों का स्थानांतरण। उदाहरण के लिए, एक चरित्र की चाल (दौड़ना या कूदना), शक्ति-अप की उपस्थिति और एक प्रश्न के साथ बॉक्स को मारना। आंदोलन एनिमेशन के बीच का अंतर animation-timing-function , animation-duration और animation-delay गुणों द्वारा निर्धारित किया गया है।

animation-timing-function प्रॉपर्टी अपनी अवधि के दौरान एनीमेशन की गति को नियंत्रित करने में मदद करती है। जहाँ भी संभव हो, मैंने ease-in या ease-in-out जैसी सुविधाओं का उपयोग किया, क्योंकि अन्यथा मुझे एनीमेशन के प्रत्येक चरण का बहुत विस्तार से वर्णन करना होगा। लेकिन जब यह वांछित प्रभाव को प्राप्त करने में मदद नहीं करता था, तो मैंने animation-timing-function रैखिक बना दिया और कुंजी फ़्रेम का उपयोग किया ताकि मुझे उस परिणाम की आवश्यकता हो।

मोशन एनीमेशन का एक उदाहरण यहाँ देखा जा सकता है ।

स्प्राइट

पात्रों और वस्तुओं की background-position को नियंत्रित करने के लिए, मैंने step-end फ़ंक्शन का उपयोग किया:

 .mario { animation-timing-function: step-end; ... } 

प्रारंभ में, मैंने सोचा था कि तत्वों पर कक्षाओं को जोड़ने और हटाने से स्प्राइट को नियंत्रित करने के लिए मुझे जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी। हालांकि, step-end इंटर्ल्स के साथ प्रयोग करने के बाद, मुझे सही संयोजन मिला।

इसे कार्रवाई में देखने के लिए, एक मशरूम खाने के बाद मारियो के आंदोलन और मारियो के परिवर्तन का एक सरल एनीमेशन देखें ।

हालांकि, इस तरह से एक step-end का उपयोग करना इतना दर्द रहित नहीं है। अपने आश्चर्य के लिए, मुझे वेबकिट में एक गड़बड़ दिखाई दी, जिसने कई मीडिया प्रश्नों के चौराहे पर खुद को प्रकट किया और एनीमेशन को उम्मीद से अलग प्रस्तुत किया। मैं ध्यान देता हूं कि सीएसएस एनिमेशन का ऐसा अनुप्रयोग ब्राउज़र रेंडरिंग इंजन के लिए एक सीमावर्ती मामला है, लेकिन यह वास्तव में क्रोमियम बग था, और मुझे उम्मीद है कि यह भविष्य में तय हो जाएगा।

पाशन

हर बार एनीमेशन को कुछ समय के लिए जारी रखना चाहिए, लूप को animation-iteration-count सेटिंग द्वारा सेट किया गया था:

 //  5  animation-iteration-count: 5; //   animation-iteration-count: infinite; 

डेमो से इसका एक उदाहरण एक आग का गोला है ।

इस प्रकार, पूरे डेमो का निर्माण तीन प्रकार के एनीमेशन से किया गया था। अंतिम चरण आवाज अभिनय था।

आवाज का अभिनय

हालाँकि, मैंने पहले उन सभी ध्वनि फ़ाइलों को डाउनलोड किया था जिनकी मुझे .wav प्रारूप में आवश्यकता थी, मुझे उन्हें HTML5 ऑडियो - .ogg और .mp3 लिए उपलब्ध प्रारूप में परिवर्तित करना था। मैंने इसके लिए स्विच ऑडियो कन्वर्टर (मैक पर) का उपयोग किया, लेकिन कोई भी अन्य सॉफ़्टवेयर बस ठीक काम करेगा।

फ़ाइलों को परिवर्तित करने के बाद, मुझे यह निर्धारित करने की आवश्यकता थी कि मैं उन्हें किस प्रारूप में ब्राउज़र को दे सकता हूं। ऐसा करने के लिए, मुझे JS की कई पंक्तियों का उपयोग करना पड़ा:

 var audio = new Audio(); //    var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') !== ""; var canPlayMP3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') !== ""; 

फिर मैंने एक फ़ंक्शन बनाया, जिसमें प्रत्येक ध्वनि के लिए कुछ डिफ़ॉल्ट पैरामीटर सेट किए, और फ़ाइल नाम के लिए एक उपयुक्त एक्सटेंशन भी जोड़ा।

 //      function createAudio (audioFile, loopSet) { var tempAudio = new Audio(); var audioExt; //,     if (canPlayMP3) { audioExt = '.mp3'; } else if (canPlayOgg) { audioExt = '.ogg'; } tempAudio.setAttribute('src', audioFile + audioExt); //set the source file tempAudio.preload = 'auto'; //   //,     (   ) tempAudio.loop = (loopSet === true ? true : false); return tempAudio; } var audioMarioJump = createAudio("soundboard/smb3_jump"); //  

वह सब कुछ सही समय पर ध्वनियों को चलाने के लिए है, एनीमेशन के साथ सिंक्रनाइज़ किया गया है। webkitAnimationStart और animationend घटनाओं (या WebKit, webkitAnimationStart और webkitAnimationEnd ) को सुनने के लिए, मुझे JS की आवश्यकता थी। इसलिए मैंने एनिमेशन की शुरुआत और अंत के क्षणों पर कब्जा करना सीख लिया, और स्थिति के लिए उपयुक्त ध्वनि खेली।

जब ईवेंट हैंडलर फायर करता है, तो आप animationName प्रॉपर्टी को एक्सेस कर सकते हैं, जिसे हम पहचानकर्ता के रूप में उपयोग कर सकते हैं।

 mario.addEventListener('animationstart', marioEventListener); function marioEventListener(e) { if (e.animationName === 'mario-jump') { audioMarioJump.play(); } } 

यदि आपके पास एक तत्व के लिए कई animationstart इवेंट हैं (उदाहरण के लिए, डेमो में मारियो), तो आप switch निर्माण का उपयोग करके animationName को संभाल सकते हैं।

जब से मैंने इस डेमो को लिखा है, मैंने पाया कि Joe Lambert Keyframe Event JS shim का उपयोग करते हुए Keyframe Event JS shim आप एनीमेशन के प्रत्येक व्यक्तिगत कीफ्रेम पर ध्यान केंद्रित कर सकते हैं, जो आपको और भी अधिक नियंत्रण प्रदान करता है।

खेल का अंत

मुझे इस डेमो के बारे में और अधिक सकारात्मक समीक्षा मिली, जिसकी मैंने कभी कल्पना भी नहीं की थी। किसी भी अन्य हैक (जैसा कि hacks.mozilla.org, लगभग। अनुवादक। ट्रांसलेटर से लिया गया पोस्ट ) के साथ, अभी भी काम करना बाकी है, लेकिन मुझे लगता है कि मैंने अपने अगले प्रोजेक्ट में जो कुछ भी सीखा है उसे डालना अधिक महत्वपूर्ण होगा। मुझे लगता है कि डेमो से पता चला है कि सीएसएस एनिमेशन का उपयोग वास्तव में सरल कोड लिखकर प्रभावशाली प्रभाव पैदा करने के लिए किया जा सकता है।

जटिल सीएसएस एनिमेशन पहले से ही अच्छा प्रदर्शन दिखाने में सक्षम हैं, लेकिन उनकी रचना अभी भी बहुत थका देने वाली है। बेशक, ऐसे उपकरण हैं जो टास्क को सरल बनाते हैं, जैसे कि Adobe Edge Animate और Sencha Animator, लेकिन वे JS में लिपटे CSS एनिमेशन का उत्पादन करते हैं। यह मेरे लिए एक विफलता है, क्योंकि सीएसएस एनिमेशन की शक्ति इस तथ्य में निहित है कि वे अन्य प्रौद्योगिकियों पर निर्भर किए बिना काम कर सकते हैं। मुझे यकीन नहीं है कि उन्हें मैन्युअल रूप से लिखने की आवश्यकता के आसपास कोई रास्ता है, लेकिन अगर कोई अचानक ऐसा कुछ जानता है, तो मुझे टिप्पणियों में इसके बारे में जानना अच्छा लगेगा।

अपनी पिछली टिप्पणी पर लौटते हुए, जिसमें मैंने कैनवास और एसवीजी का उपयोग करते हुए सीएसएस एनिमेशन की तुलना की है, मेरा मानना ​​है कि एनिमेशन के लिए प्रौद्योगिकी का चयन करते समय वे सभी योग्य उम्मीदवार हैं। फिर भी, इस तरह के जटिल एनिमेशन बनाने के लिए जितनी जल्दी समय बाधा पड़ती है, उनके आवेदन के लिए उतने ही उपयुक्त और प्रासंगिक स्थान हमारे दैनिक कार्यों में खुलेंगे।

हां, एनीमेशन समाप्त हो जाता है जहां मारियो अंतरिक्ष में तिरछे उड़ता है। यह एक बग नहीं है, बल्कि एक साधारण दोष है।