सीएसएस, जेएस और कैनवस के साथ एनिमेटेड स्प्राइट्स

सभी को नमस्कार। कुछ दिन पहले, मैं गलती से अंतरिक्ष रेंजरों 2 में गिर गया: डिस्क जमा में डॉमिनेटर। मैंने इसे स्थापित नहीं किया है, क्योंकि अब मेरे पास इतना समय नहीं है कि मैं इसे ठीक से देख पाऊँ। मैंने यह देखने का फैसला किया कि डिस्क पर क्या है। मैंने फैन आर्ट को देखा और वहां रेंजर संसाधनों को चुनने के लिए एक कार्यक्रम देखा। इसलिए मैंने यह देखने का फैसला किया कि हमारे प्रभुत्व किस चीज से बने हैं। थोड़ा क्लिक करने पर, मुझे GAI प्रारूप में एनीमेशन वाली फाइलें मिलीं। मैं उस एनीमेशन की प्रशंसा करने लगा। मैं उन्हें "gifs" में सहेजना चाहता था, लेकिन उस प्रोग्राम ने उन्हें एनीमेशन को कैसे सहेजने नहीं दिया? आप पीएनजी में वर्तमान फ़्रेम या सभी फ़ाइलों को सहेज सकते हैं। मैंने सभी फ़्रेमों को बचाने का फैसला किया, और उनमें से 150 थे। अभी भी चित्र हैं, और उनके साथ एक ही एनीमेशन क्यों नहीं बनाया गया है।

प्रेत

इस तरह के एनीमेशन से खुद को खुश करने के लिए मैंने CSS + JS की मदद ली। और मुझे 150 छवि फ़ाइलों के साथ क्या करना चाहिए? उनका वजन महत्वपूर्ण नहीं है, हालांकि वे एक मेगाबाइट से अधिक वजन करते हैं। उनके एक साथ लोड और हेरफेर के साथ मुख्य समस्याएं। इसलिए, मैंने उन्हें एक में "गोंद" करने का फैसला किया। केवल एक लोड, और सीएसएस + जेएस के साथ आपको केवल इसे सही ढंग से स्थिति में लाना होगा।
यह "gluing" की विधि का चयन करने के लिए बनी हुई है। मैं एक प्रोग्रामर हूं, और हम सभी आलसी हैं :), इसलिए मैंने ग्राफ़िकल एडिटर में मैनुअल ग्लूइंग को तुरंत छोड़ दिया। पहली चीज़ जो मैंने की थी, हमेशा की तरह, PHP और GD लाइब्रेरी में। लेकिन पारभासी PNGs के साथ काम करने के लिए यह बहुत वांछित है। फिर मैंने सोचा, "गोंद" चित्रों को और क्या कर सकता हूं? और वह इस तथ्य पर ध्यान केंद्रित करता है कि अब हर कोई सुन रहा है कि अब फैशनेबल क्या माना जाता है - एचटीएमएल 5। वह ग्राफिक्स - कैनवस के साथ काम करने के लिए जिम्मेदार है, और मुझे वास्तव में यह "स्वादिष्ट" पसंद है। इसलिए मैंने इसे "कैनवास" पर "गोंद" करने का फैसला किया।
और इसलिए मैं इस टैग को HTML में जोड़ता हूं:

<canvas id="sprite"> </canvas> 

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

 var first = '000'; //     var last = 49; //   var num = 0; // var maskFileName = ['2HULL_PEOPLE_P_A_', '.png'];//   var dir = 'ship'; //,     

अब आप स्प्राइट के आकार को निर्दिष्ट कर सकते हैं जो बाहर निकलना चाहिए, और उसका संदर्भ प्राप्त करना चाहिए:

 var canvas = document.getElementById("sprite"); //   canvas.width = (last + 1) * 75; // ,     canvas.height = 75; var width = 0; //,      var context = canvas.getContext("2d"); //  

एक संख्या से एक स्ट्रिंग (PHP से str_pad का एनालॉग) में अनुवाद की सुविधा के लिए, मैंने एक जंगली नाम के साथ एक कनवर्टर फ़ंक्शन लिखा - zerofikator ():

 function zerofikator(int, length) { //       var prefix = ''; for (var i = num.toString().length; i < length; i++) { prefix += '0'; } return prefix + num; } 

आगे हमारे चित्रों के साथ "कैनवास" पर ड्राइंग के लिए, अर्थात्। स्प्राइट बनाएँ, यहाँ इस तरह के एक सरल कार्य है:

 function draw() { var img = document.createElement('img'); /*          - */ img.onload = function () { //       context.drawImage(img, width, 0); width += 75; //       ,      ,     if (zerofikator(num, first.length) != zerofikator(last, first.length)) { //      num++; //  draw(); //    } } img.src = dir + '/' + maskFileName[0] + zerofikator(num, first.length) + maskFileName[1]; //      } draw(); //   

इस तरह के पेज को लॉन्च करने के बाद, हमें एक चौड़ी फ्रेम-बाय-फ्रेम इमेज दिखाई देगी, जिसे अगर हम बचाते हैं, तो हम इसे स्प्राइट कह सकते हैं। वैसे, बचाया स्प्राइट का वजन 615 KB है, और 150 चित्र 1,189 KB हैं, हम्म, यह एक और प्लस :) है।

मैंने कैनवास पर क्लिक करके रूपांतरण को तुरंत फ़ाइल में जोड़ने का फैसला किया (कुछ ब्राउज़रों के लिए बचत की समस्या हल करता है):

 canvas.onclick = function () { window.location = context.canvas.toDataURL('image/png'); }; 

डेमो

एनीमेशन

खैर, अब, आप एनीमेशन शुरू कर सकते हैं।
HTML में, हम "डिवाइडर" की एक जोड़ी जोड़ते हैं, जिसके साथ हम काम करना जारी रखेंगे:

 <div id="gun"></div> <div id="ship"></div> 

फिर मैंने एक फ़ंक्शन लिखा, जो स्प्राइट्स को उत्तेजित करता है, लेकिन मैंने अलग से सेटिंग करने का फैसला किया ताकि मैं एक बार में कई एनिमेशन के लिए इसका उपयोग कर सकूं:

 var styles = {}; styles.cursor = 'pointer'; //      ,   styles.width = '75px'; //  styles.height = '75px'; var elementId = 'gun'; // id ,     var imgName = 'canvas.png'; //    

और फिर स्वयं कार्य:

 function spriteAnimation(elementId, imgName, styles) { var img = document.createElement('img'); var offset = 0; img.onload = function () { //    var element = document.getElementById(elementId); element.style.cursor = styles.cursor; element.style.width = styles.width; element.style.height = styles.height; element.style.background = "url('" + imgName + "') " + offset + "px 50%"; //     var i = 0; element.onmouseover = function() { //     interval = setInterval(function() { //  if (offset < img.width) { //    i++; //      } else { i = 0; //     } offset = 75 * i; //   element.style.background = "url('" + imgName + "') " + offset + "px 50%"; //   } , 1000/24) //24    } element.onmouseout = function(){ //      clearInterval(interval) //  ( ) } } img.src = imgName; //    } 

अरे हाँ, आपको अभी भी इस फ़ंक्शन को कॉल करने की आवश्यकता है:

 spriteAnimation(elementId, imgName, styles); spriteAnimation('ship', 'ship.png', styles); 

और जगह को देखने के लिए, आप एक पृष्ठभूमि के साथ एक तस्वीर जोड़ सकते हैं और इसे सही ढंग से रख सकते हैं:

 <img src="fon.png" /> <div class="conteiner"><div id="gun"></div></div> 

डेमो

स्रोत कोड

जैसा कि वे कहते हैं - "सिर्फ मनोरंजन के लिए"। और आप अपना समय बारिश की शरद ऋतु की शाम को कैसे व्यतीत करते हैं?