खेल विकास के लिए फेजर के साथ शुरुआत करना

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

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

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

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

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

बनाएँ खेल और प्रारंभिक खेल तत्वों के सभी initializes। उन कार्यों में से प्रत्येक एक बार खेल शुरू होने पर चलाया जाता है।

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

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

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

127.0 0.1, लोकलहोस्ट या लूपबैक एड्रेस क्या है?

आपने अपने कंप्यूटर पर "लोकलहोस्ट" देखा है, लेकिन यह क्या है? 127.0.0.1 पते का क्या मतलब है? क्या आपको हैक किया गया है?

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

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

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

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

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

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

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

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

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

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

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

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

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

एक अद्यतन फ़ंक्शन जोड़ना

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

दृश्य: {
प्रीलोड: प्रीलोड,
बनाएँ: बनाएँ,
अद्यतन: अद्यतन
}

अगला, बनाएँ फ़ंक्शन के नीचे एक अपडेट फ़ंक्शन जोड़ें:

फ़ंक्शन अपडेट () {
}

कुंजी इनपुट हो रही है

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

var गेमपाइ;
var keyInputs;

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

फंक्शन क्रिएट () {
gamePhew = this.physics.add.sprite (270, 450, 'gamePibl');
keyInputs = this.input.keyboard.createCursorKeys ();
}

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

फ़ंक्शन अपडेट () {
अगर (keyInputs.left.isDown) {
gamePhew.x = gamePhew.x - 2;
}
अगर (keyInputs.right.isDown) {
gamePhew.x = gamePhew.x + 2;
}
अगर (keyInputs.up.isDown) {
gamePhew.y = gamePhew.y - 2;
}
अगर (keyInputs.down.isDown) {
gamePhew.y = gamePhew.y + 2;
}
}

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

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

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

फ़ंक्शन प्रीलोड () {
this.load.image ('gamePhew', 'img / gamePhew.png');
this.load.image ('बाधा 1', 'img / बाधा 1.png');
this.load.image ('बाधा 2', 'img / बाधा 2.png');
}

फिर प्रत्येक बाधा स्प्राइट को गेमपीस की तरह बनाने के कार्य में आरंभीकृत करना होगा।

फंक्शन क्रिएट () {
gamePhew = this.physics.add.sprite (270, 450, 'gamePibl');
keyInputs = this.input.keyboard.createCursorKeys ();
रोड़ा 1 = यह। शब्दशः .dd.sprite (200, 0, 'बाधा 1');
बाधा 2 = this.physics.add.sprite (0, 200, 'बाधा 2');
}

बाधाएँ खड़ी करना

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

रोड़ा 1।
अगर (बाधा १।
बाधा १.य = ०;
बाधा १.x = फेजर। मठ। (0, 600) के बीच;
}
बाधा 2.x = बाधा 2.x + 4;
अगर (बाधा २.x> ६००) {
बाधा 2.x = 0;
बाधा २.य = फशर। मठ। (0, 600) के बीच;
}

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

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

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

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

यह।
gamePhew.destroy ();
बाधा .estroy ();
बाधा 2 .estroy ();
});
यह।
gamePhew.destroy ();
बाधा .estroy ();
बाधा 2 .estroy ();
});

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

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

खेल के विकास को फेजर के साथ आज़माएं

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

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

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

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

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

लेखक के बारे में