गेम डेवलपमेंट के लिए फेजर के साथ शुरुआत करना

फेजर 2डी वीडियो गेम बनाने के लिए एक ढांचा है। यह गेम को प्रदर्शित करने के लिए HTML5 कैनवास और गेम को चलाने के लिए जावास्क्रिप्ट का उपयोग करता है। वेनिला जावास्क्रिप्ट पर फेजर का उपयोग करने का लाभ यह है कि इसमें एक व्यापक पुस्तकालय है जो वीडियो गेम के अधिकांश भौतिकी को पूरा करता है जिससे आप गेम को डिजाइन करने पर ध्यान केंद्रित कर सकते हैं।

फेजर विकास के समय को कम करता है और वर्कफ़्लो को आसान बनाता है। आइए जानें कि फेजर के साथ एक बुनियादी गेम कैसे बनाया जाता है।

---

---

फेजर के साथ क्यों विकसित करें?

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

प्रीलोड में, गेम की संपत्तियां अपलोड की जाती हैं और गेम के लिए उपलब्ध कराई जाती हैं।

गेम और सभी शुरुआती गेम एलिमेंट्स को इनिशियलाइज़ करें। उन कार्यों में से प्रत्येक खेल शुरू होने पर एक बार चलाया जाता है।

दूसरी ओर, अपडेट पूरे गेम में एक लूप में चलता है। यह वर्कहॉर्स है जो गेम के तत्वों को इंटरएक्टिव बनाने के लिए अपडेट करता है।

फेजर के साथ गेम विकसित करने के लिए अपना सिस्टम सेट करें

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

---

---

नीचे दिया गया कोड आपको जगाएगा और चलाएगा। यह एक बुनियादी खेल वातावरण स्थापित करता है।







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}




चलाने के लिए, गेम को आपके लोकलहोस्ट पर 'img' फ़ोल्डर में सहेजी गई 'gamePiece' नामक PNG छवि की आवश्यकता होगी। सरलता के लिए, यह उदाहरण 60xgame de60px नारंगी वर्ग का उपयोग करता है। आपका खेल कुछ इस तरह दिखना चाहिए:

---

---

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

सेटअप कोड की व्याख्या

अब तक, खेल कुछ भी नहीं करता है। लेकिन हम पहले ही बहुत सारी जमीन को कवर कर चुके हैं! आइए कोड को अधिक गहराई से देखें।

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

मैं अपने ईमेल से दस्तावेज़ कहाँ प्रिंट कर सकता हूँ?

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

आखिरकार, दृश्य प्रोग्राम को चलाने के लिए कहता है प्रीलोड खेल शुरू होने से पहले कार्य करें और सर्जन करना खेल शुरू करने के लिए कार्य। यह सारी जानकारी गेम ऑब्जेक्ट को दी जाती है जिसे कहा जाता है खेल .

सम्बंधित: प्रोग्रामिंग और कोडिंग के लिए 6 सर्वश्रेष्ठ लैपटॉप

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

गेमपीस इमेज को क्रिएट फंक्शन में गेम में जोड़ा गया था। लाइन 29 का कहना है कि हम अपने गेम क्षेत्र के ऊपरी बाएं कोने से 270px बाईं ओर और 450px नीचे छवि गेमपीस को जोड़ रहे हैं।

हमारा गेम पीस मूव बनाना

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

एक अद्यतन समारोह जोड़ना

कॉन्फ़िगरेशन में नया दृश्य:

scene: {
preload: preload,
create: create,
update: update
}

इसके बाद, क्रिएट फंक्शन के नीचे एक अपडेट फंक्शन जोड़ें:

छोटे व्यवसाय के लिए सर्वश्रेष्ठ वाणिज्यिक प्रिंटर

function update(){
}

प्रमुख इनपुट प्राप्त करना

खिलाड़ी को तीर कुंजियों के साथ खेल के टुकड़े को नियंत्रित करने देने के लिए, हमें यह ट्रैक करने के लिए एक चर जोड़ना होगा कि खिलाड़ी किस कुंजी को दबा रहा है। नीचे keyInputs नामक एक चर घोषित करें जहां हमने gamePieces घोषित किया है। इसे घोषित करने से सभी फ़ंक्शन नए चर का उपयोग कर सकेंगे।

var gamePiece;
var keyInputs;

जब क्रिएट फंक्शन में गेम बनाया जाता है तो keyInput वैरिएबल को इनिशियलाइज़ किया जाना चाहिए।

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

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

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

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

खेल में बाधाओं को जोड़ना

यह कोड उदाहरण दो बाधा स्प्राइट का उपयोग करता है जिसे बाधा 1 और बाधा 2 कहा जाता है। बाधा 1 एक नीला वर्ग है और बाधा 2 हरा है। प्रत्येक छवि को गेमपीस स्प्राइट की तरह ही पहले से लोड करने की आवश्यकता होगी।

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

फिर प्रत्येक बाधा स्प्राइट को गेमपीस की तरह ही क्रिएट फंक्शन में इनिशियलाइज़ करना होगा।

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

बाधाओं को दूर करना

इस बार टुकड़ों को स्थानांतरित करने के लिए, हम खिलाड़ी इनपुट का उपयोग नहीं करना चाहते हैं। इसके बजाय, चलो एक टुकड़ा ऊपर से नीचे की ओर चलते हैं और दूसरे को बाएं से दाएं चलते हैं। ऐसा करने के लिए, अद्यतन फ़ंक्शन में निम्न कोड जोड़ें:

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

उपरोक्त कोड स्क्रीन के नीचे बाधा 1 और खेल क्षेत्र में बाधा 2 को प्रत्येक फ्रेम में 4px नीचे ले जाएगा। एक बार जब एक वर्ग स्क्रीन से बाहर हो जाता है, तो इसे एक नए यादृच्छिक स्थान पर विपरीत दिशा में वापस ले जाया जाता है। यह सुनिश्चित करेगा कि खिलाड़ी के लिए हमेशा एक नई बाधा हो।

टकराव का पता लगाना

लेकिन हम अभी तक पूरी तरह से नहीं हुए हैं। आपने देखा होगा कि हमारा खिलाड़ी बाधाओं से होकर गुजर सकता है। जब खिलाड़ी किसी बाधा से टकराता है और खेल समाप्त करता है तो हमें खेल का पता लगाने की आवश्यकता होती है।

फेजर भौतिकी पुस्तकालय में एक कोलाइडर डिटेक्टर है। हमें बस इसे क्रिएट फंक्शन में इनिशियलाइज़ करना है।

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

कोलाइडर विधि के लिए तीन मापदंडों की आवश्यकता होती है। पहले दो पैरामीटर पहचानते हैं कि कौन सी वस्तुएं टकरा रही हैं। तो ऊपर, हमारे पास दो कोलाइडर स्थापित हैं। पहला पता लगाता है कि गेमपीस बाधा 1 से टकराता है और दूसरा कोलाइडर गेमपीस और बाधा 2 के बीच टकराव की तलाश में है।

तीसरा पैरामीटर कोलाइडर को बताता है कि टक्कर का पता चलने के बाद उसे क्या करना चाहिए। इस उदाहरण में, एक फ़ंक्शन है। यदि कोई टक्कर होती है, तो सभी खेल तत्व नष्ट हो जाते हैं; यह खेल को रोकता है। अब खिलाड़ी गेमओवर करेगा यदि वे किसी बाधा से टकराते हैं।

गेम डेवलपमेंट को फेज़र के साथ आज़माएं

ऐसे कई अलग-अलग तरीके हैं जिनसे इस खेल को बेहतर बनाया जा सकता है और इसे और अधिक जटिल बनाया जा सकता है। हमने केवल एक खिलाड़ी बनाया है, लेकिन एक दूसरे बजाने योग्य चरित्र को 'awsd' नियंत्रणों से जोड़ा और नियंत्रित किया जा सकता है। इसी तरह, आप अधिक बाधाओं को जोड़ने और उनके आंदोलन की गति को बदलने के साथ प्रयोग कर सकते हैं।

लैपटॉप वाईफाई से कनेक्ट होता है लेकिन इंटरनेट से नहीं

यह परिचय आपको आरंभ कर देगा, लेकिन अभी बहुत कुछ सीखना बाकी है। फेजर के बारे में सबसे अच्छी बात यह है कि आपके लिए बहुत सारा खेल भौतिकी किया जाता है। यह 2डी गेम डिजाइन करना आरंभ करने का एक बहुत ही आसान तरीका है। इस कोड का निर्माण जारी रखें और अपने खेल को परिष्कृत करें।

यदि आप किसी त्रुटि का सामना करते हैं, तो आपका ब्राउज़र डीबगर समस्या का पता लगाने का एक शानदार तरीका है।

साझा करना साझा करना कलरव ईमेल वेबसाइट की समस्याओं के निवारण के लिए Chrome DevTools का उपयोग कैसे करें

अपनी वेबसाइटों को बेहतर बनाने के लिए क्रोम ब्राउज़र के अंतर्निहित विकास टूल का उपयोग करना सीखें।

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• जावास्क्रिप्ट
• एचटीएमएल 5
• खेल का विकास

लेखक के बारे में जेनिफर सीटन(21 लेख प्रकाशित)

जे. सीटन एक विज्ञान लेखक हैं जो जटिल विषयों को तोड़ने में माहिर हैं। उन्होंने सास्काचेवान विश्वविद्यालय से पीएचडी की है; उनका शोध ऑनलाइन छात्रों की व्यस्तता बढ़ाने के लिए खेल-आधारित शिक्षा के उपयोग पर केंद्रित था। जब वह काम नहीं कर रही होती है, तो आप उसे उसके पढ़ने, वीडियो गेम खेलने या बागवानी करते हुए पाएंगे।

जेनिफ़र सीटन . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें