🌝 🌆 🙂 स्प्राइट इंजन बनाएं 🚫 🤟🏻 😲

एक बार अपनी पहली पोस्ट में , मैंने गहराई से छँटाई के साथ स्प्राइट एनीमेशन बनाने के बारे में बात करने का वादा किया था ... खैर, वादों को पूरा करने की आवश्यकता है :)

और इसलिए, आज मैं एक सरल स्प्राइट इंजन बनाने के बारे में बात करूंगा, जिसमें गहराई से छंटाई के लिए समर्थन होगा।
आरंभ करने के लिए, आइए स्प्राइट ~~क्लास~~ बनाएं:

कॉपी सोर्स | HTML कॉपी करें

समारोह स्प्राइट (_img, _frames) {
यह .img = _img;
यह .frames = _frames;
this .frameWidth = _img.width / _frames;
}

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

अब आपको इन चित्रों को डाउनलोड करने और स्प्राइट बनाने की आवश्यकता है:

कॉपी सोर्स | HTML कॉपी करें

var लोड = 0 ;
var allImgs = 3 ;
फ़ंक्शन इमगोनोड () {
भरी हुई ++;
अगर (लोड == allImgs) {
बाद में ();
}
}
var img1 = नई छवि ();
img1.src = 'img1.png' ;
img1.onload = imgonload;
var img2 = नई छवि ();
img2.src = 'img2.png' ;
img2.onload = imgonload;
var img3 = नई छवि ();
img3.src = 'img3.png' ;
img3.onload = imgonload;
var spr1, spr2, spr3;
कार्य के बाद () {
spr1 = नया स्प्राइट (img1, 3 );
spr2 = नया स्प्राइट (img2, 3 );
spr3 = नया स्प्राइट (img3, 3 );
}

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

कॉपी सोर्स | HTML कॉपी करें

समारोह स्प्राइटबाइन (_layers) {
यह .layers = _layers;
this .renderList = []; // प्रतिपादन के लिए कतार सरणी
यह .ctx;
यह .startRender = फ़ंक्शन (_ctx) {
यह .ctx = _ctx;
यह .renderList.length = 0 ;
के लिए ( var i = 0 ; मैं <.layers; i ++) {
यह .renderList [i] = [];
}
}
यह .Srprite = function (_s, _x, _y, _frame, _layer) {
// गणना करें कि कौन सा टुकड़ा खींचना और जोड़ना है
// यह प्रतिपादन के लिए एक कतार है
अगर (_frame <= _s.frames) {
यह .renderList [_layer- 1 ] .push ({
img: _s.img,
x: _x, y: _y,
xonimg: _frame * _s.frameWidth,
योनिमग: 0 ,
imgwidth: _s.frameWidth,
imgheight: _s.img.height
});
}
}
यह .endender = function () {
// यहाँ हम वास्तव में आकर्षित करते हैं
के लिए ( var i = 0 ; मैं <.layers; i ++) {
के लिए ( var j = 0 ; j < यह .renderList [i] .length; j ++) {
var e = यह .renderList [i] [j];
यह .ctx.drawImage (e.img, e.xonimg, e.yonimg, e.imgwidth, e.imgheight, ex, eye, e.imgwidth, e.imgightight);
}
}
}
}

रेंडरलिस्ट के बारे में सवाल उठ सकते हैं, जो अनिवार्य रूप से एक "सरणी का सरणी" (दो आयामी टोबिश) है। पहला सरणी परत को संग्रहीत करता है, दूसरा - प्रतिपादन के लिए मापदंडों के साथ ऑब्जेक्ट।
अब मैं SpriteEngin'a के निर्माण, हमारे स्प्राइट्स के प्रतिपादन और नियमित रूप से बढ़ते हुए वैरिएबल फ्रेम को जोड़ूंगा, जो एनीमेशन के वर्तमान फ्रेम के लिए जिम्मेदार है:

कॉपी सोर्स | HTML कॉपी करें

...
var फ्रेम = 0 ;
सेटइंटरवल ( फ़ंक्शन () {
अगर (फ्रेम < 2 ) {
फ्रेम ++;
} {
फ्रेम = 0 ;
}
}, 500 );
var ctx = document.getElementById ( 'c' ) .getContext ( '2d' );
var se = new SpriteEngine ( 3 );
...
कार्य के बाद () {
...
सेटइंटरवल ( फ़ंक्शन () {
ctx.fillStyle = '# 007F46' ;
ctx.fillRect ( 0 , 0 , 640 , 480 );
se.startRender (ctx);
se.drawSprite (spr1, 100 , 100 , फ्रेम, 3 );
se.drawSprite (spr2, 116 , 116 , फ्रेम, 2 );
se.drawSprite (spr3, 132 , 132 , फ्रेम, 1 );
se.endRender ();
}, 25 );
}

हम सहेजते हैं, कीड़े और वॉइला को पकड़ते हैं :) यह ध्यान दिया जाना चाहिए कि परतों की संख्या 1 से शुरू होती है, और परत की संख्या जितनी बड़ी होती है, उतना ही "यह" हमसे है। हम SpriteEngine बनाते समय परतों की अधिकतम संख्या को स्थानांतरित करते हैं।

स्रोत - tyk
पुनश्च: अगर किसी को कहीं बाढ़ आती है - मैं आभारी रहूंगा :)

स्प्राइट इंजन बनाएं

More articles: