20 मिनट में HTML5 गेम लिखना, या फेजर फ्रेमवर्क के लिए एक परिचय

यह लेख स्टाइलिश, ट्रेंडी और युवा HTML5 अनुप्रयोगों के विकास के लिए समर्पित है जो नए फेजर ढांचे का उपयोग कर रहे हैं। यह लाइब्रेरी को स्थापित करने और क्लासिक पोंग गेम बनाने की प्रक्रिया का वर्णन करता है।

परिचय

Phaser PIXI.js लाइब्रेरी पर आधारित मोबाइल और डेस्कटॉप HTML5 गेम विकसित करने के लिए एक इंजन है। यह कैनवस और वेबजीएल, एनिमेटेड स्प्राइट्स, कण, ऑडियो, विभिन्न इनपुट विधियों और ऑब्जेक्ट भौतिकी में प्रतिपादन का समर्थन करता है। स्रोत देखने और मुफ्त संशोधन के लिए दोनों उपलब्ध हैं। यह रिचर्ड डेवी द्वारा बनाया गया था, जो फ्लिक्सल ढांचे का उपयोग करके प्रोग्रामर के समुदाय में उनकी सक्रिय भागीदारी के लिए जाना जाता है। रिचर्ड यह नहीं छिपाता है कि वह फ्लिक्सल से प्रेरित था, इसलिए फेजर की कुछ चीजें अनुभवी फ्लैशर्स से परिचित होंगी। नए इंजन का पहला संस्करण इस वर्ष 13 सितंबर को जारी किया गया था, अब न केवल पुस्तकालय सक्रिय रूप से विकसित हो रहा है, बल्कि दस्तावेज़ीकरण भी लिखा जा रहा है, इसलिए फिलहाल इसे हल्के ढंग से लगाने के लिए कई सबक नहीं हैं। मेरी विनम्र राय में, जिसे सही किया जाना चाहिए, और अभी।

लाइब्रेरी और स्थानीय वेब सर्वर स्थापित करें

तो चलो शुरू करते हैं। एप्लिकेशन चलाने और परीक्षण करने के लिए, हमें एक स्थानीय वेब सर्वर स्थापित करना होगा। लाइब्रेरी किट से सभी उदाहरण PHP का उपयोग करते हैं, इसलिए, सर्वर को भी एक उपयुक्त की आवश्यकता होती है। मैंने MacOS के लिए MAMP का उपयोग किया है, विंडोज के लिए, घरेलू डेनवर या कोई अन्य एनालॉग उपयुक्त है।

वेब सर्वर स्थापित करने के बाद, आपको GitHub से नवीनतम संस्करण डाउनलोड करने की आवश्यकता है: https://github.com/photonstorm/phaser । फिलहाल (13 अक्टूबर 2013) मैं देव शाखा को डाउनलोड करने की सलाह देता हूं, क्योंकि इस संस्करण में मुख्य एक की तुलना में बहुत उपयोगी परिवर्तन शामिल हैं, जिसमें बड़ी मात्रा में प्रलेखन भी शामिल है। जो लोग GitHub का उपयोग नहीं करते हैं, उनके लिए संग्रह का एक सीधा लिंक उपलब्ध है: https://github.com/photonstorm/phaser/archive/dev.zip ।

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



अपना पसंदीदा ब्राउज़र लॉन्च करें और कॉपी की गई फ़ाइलों के साथ URL खोलें (मेरे मामले में, http: // localhost: 8888 / hellophaser )। यदि सब कुछ ठीक है, तो आपको एक प्यारा घूर्णन लोगो दिखाई देगा, जैसे नीचे स्क्रीनशॉट में:

खेल का विकास

आवश्यक फाइलें तैयार करना

अब आप हमारे पहले गेम को विकसित करना शुरू कर सकते हैं। अपने वेब सर्वर पर इसके लिए एक फेजर-पोंग फोल्डर बनाएं और बिल्ड फोल्डर से फेजर.जेएस फाइल को वहां मौजूद सोर्स सोर्स से कॉपी करें। इसमें एक संपत्ति फ़ोल्डर भी बनाएं, जहां हम गेम से संबंधित सभी संसाधनों को संग्रहीत करेंगे, और index.html फ़ाइल (वास्तव में, यह वह जगह है जहां हमारा गेम यहां होगा)।

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




नतीजतन, फेजर-पोंग फ़ोल्डर की सामग्री इस तरह होगी:



और संपत्ति फ़ोल्डर में तीन चित्र होंगे:

खेल का मुख्य उद्देश्य बनाना, संसाधनों को लोड करना

अंत में, सभी प्रारंभिक चरण पूरा हो चुके हैं, और वास्तविक विकास शुरू होता है। Index.html खोलें और निम्न कोड पेस्ट करें:

<script src="phaser.js"></script> <script type="text/javascript"> var game = new Phaser.Game(480, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('bet', 'assets/bet.png'); game.load.image('ball', 'assets/ball.png'); game.load.image('background', 'assets/starfield.jpg'); } function create() { game.add.tileSprite(0, 0, 480, 640, 'background'); } function update () { } </script> 

अपने ब्राउज़र में नए गेम का पता खोलें (मेरे पास यह http: // localhost: 8888 / phaser-pong / ) है और आप इसकी विंडो को एक चित्रित पृष्ठभूमि के साथ देखेंगे


लिखित कोड में क्या होता है? सबसे पहले हम पुस्तकालय आयात करते हैं। तब हम अपने Game का एक ऑब्जेक्ट बनाते हैं, जो हमारे एप्लिकेशन का रिज़ॉल्यूशन सेट करता है, इस मामले में, 480 की चौड़ाई और 640 पिक्सल की ऊँचाई। Phaser.AUTO अर्थ है कि रेंडर का प्रकार स्वचालित रूप से चुना जाएगा। आप वैकल्पिक रूप से कैनवास या WebGL सेट कर सकते हैं। चौथा पैरामीटर खेल के लिए मूल डोम ऑब्जेक्ट सेट करता है, हम इसे निर्दिष्ट नहीं करते हैं।
पांचवां पैरामीटर खेल के मुख्य कार्यों को सूचीबद्ध करता है। preload() में लोडिंग संसाधनों के लिए कोड होता है, create() - गेम का इनिशियलाइज़ेशन, और update() - कमांड्स जो एप्लिकेशन अपडेट होने पर निष्पादित होते हैं। एक डेस्कटॉप कंप्यूटर पर, update() को प्रति सेकंड लगभग 60 बार कहा जाता है। इस फ़ंक्शन में मुख्य गेम लॉजिक होगा।

create() फ़ंक्शन में, हम अपने गेम की पृष्ठभूमि के साथ एक स्थिर स्प्राइट जोड़ते हैं। स्प्राइट पहले चार tileSprite मापदंडों में निर्दिष्ट स्थान को भरता है।

खेल की वस्तु

अब हम सबसे दिलचस्प पास करेंगे - हम अपने खेल को तर्क से भर देंगे। game चर घोषित करने और preload() फ़ंक्शन से पहले, preload() खिलाड़ी और कंप्यूटर रैकेट, एक गेंद के साथ वस्तुओं की घोषणा करते हैं, और उनकी गति का भी संकेत देते हैं:

  var playerBet; var computerBet; var ball; var computerBetSpeed = 190; var ballSpeed = 300; 

रैकेट बनाने के लिए हम createBet(x, y) फ़ंक्शन लिखते हैं:

 function createBet(x, y) { var bet = game.add.sprite(x, y, 'bet'); bet.anchor.setTo(0.5, 0.5); bet.body.collideWorldBounds = true; bet.body.bounce.setTo(1, 1); bet.body.immovable = true; return bet; } 

विधि निर्दिष्ट निर्देशांक के साथ एक स्प्राइट बनाता है और इसे गेम में जोड़ता है। anchor क्षेत्र स्प्राइट की उत्पत्ति के लिए जिम्मेदार है, इसे रैकेट छवि के केंद्र में सेट करें। body में भौतिकी के साथ काम करने के लिए तत्व होते हैं। यहां हम रैकेट की गति को खेल की जगह से बाहर तक सीमित करते हैं, "उछाल" की ताकत निर्धारित करते हैं और संकेत देते हैं कि जब यह वस्तुओं से टकराता है, तो रैकेट पक्ष में नहीं जाएगा।

पृष्ठभूमि बनाने के तुरंत बाद, इस फ़ंक्शन में दो कॉल जोड़ें () । बैकग्राउंड इमेज के बाद रैकेट को गेम में जोड़ा जाएगा, इसलिए हम उन्हें स्क्रीन पर देखेंगे:

  playerBet = createBet(game.world.centerX, 600); computerBet = createBet(game.world.centerX, 20); 

इसी तरह, createBet() फ़ंक्शन को create() में कॉल करने के तुरंत बाद निम्नलिखित कोड जोड़कर एक गेंद create()

  ball = game.add.sprite(game.world.centerX, game.world.centerY, 'ball'); ball.anchor.setTo(0.5, 0.5); ball.body.collideWorldBounds = true; ball.body.bounce.setTo(1, 1); 

नतीजतन, हम देखेंगे कि हमारे खेल में दो रैकेट और एक गेंद दिखाई दी, जबकि अभी भी स्थिर है:

तर्क

चित्र बहुत सुंदर निकला, लेकिन मुझे लगता है कि यह थोड़ा पुनर्जीवित करने लायक है।
गेंद की स्थिति और इसे चलाने वाले एक फ़ंक्शन के लिए जिम्मेदार एक चर जोड़ें:

  var ballReleased = false; function releaseBall() { if (!ballReleased) { ball.body.velocity.x = ballSpeed; ball.body.velocity.y = -ballSpeed; ballReleased = true; } } 

फ़ंक्शन यह जांचता है कि गेंद पहले से ही नहीं चल रही है, और इस मामले में वेग क्षेत्र का उपयोग करके गति निर्धारित करता है।
हम माउस बटन के क्लिक पर फंक्शन कॉल को हैंग इन लाइन () बनाकर लिखते हैं:

  game.input.onDown.add(releaseBall, this); 

अब माउस के साथ क्लिक करने से गेंद शुरू होती है, और यह खेल की सीमाओं को उछाल देती है। update() फ़ंक्शन को संपादित करके आंदोलन और रैकेट जोड़ें:

 function update () { //   playerBet.x = game.input.x; var playerBetHalfWidth = playerBet.width / 2; if (playerBet.x < playerBetHalfWidth) { playerBet.x = playerBetHalfWidth; } else if (playerBet.x > game.width - playerBetHalfWidth) { playerBet.x = game.width - playerBetHalfWidth; } //    if(computerBet.x - ball.x < -15) { computerBet.body.velocity.x = computerBetSpeed; } else if(computerBet.x - ball.x > 15) { computerBet.body.velocity.x = -computerBetSpeed; } else { computerBet.body.velocity.x = 0; } } 

खिलाड़ी का रैकेट माउस पॉइंटर का अनुसरण करता है, कंप्यूटर रैकेट बॉल का अनुसरण करता है। खिलाड़ी के रैकेट के लिए, हमने x समन्वय के अधिकतम और न्यूनतम मूल्य पर प्रतिबंध भी जोड़ा है ताकि यह खेल के मैदान से बाहर कूदने की कोशिश न करे।

खेल का पूरा सार रैकेट के साथ गेंद को हिट करना है, इसलिए आपको रैकेट के साथ गेंद के टकराव के लिए एक चेक का आयोजन करने की आवश्यकता है। सौभाग्य से, फेजर में पहले से ही समान कार्यक्षमता है, इसलिए हमें इसका उपयोग करने की आवश्यकता है।
update() के अंत में निम्नलिखित तीन पंक्तियाँ जोड़ें update() :

  //       game.physics.collide(ball, playerBet, ballHitsBet, null, this); game.physics.collide(ball, computerBet, ballHitsBet, null, this); 

collide विधि दो वस्तुओं (पहले दो मापदंडों) की टक्कर की जांच करती है और तीसरे में निर्दिष्ट फ़ंक्शन को कॉलिंग स्प्राइट्स पर कोई कार्रवाई करने के लिए बुलाती है। यह फ़ंक्शन इस तरह दिखता है:

  function ballHitsBet (_ball, _bet) { var diff = 0; if (_ball.x < _bet.x) { //       diff = _bet.x - _ball.x; _ball.body.velocity.x = (-10 * diff); } else if (_ball.x > _bet.x) { //       diff = _ball.x -_bet.x; _ball.body.velocity.x = (10 * diff); } else { //     ,       _ball.body.velocity.x = 2 + Math.random() * 8; } } 

एक टक्कर में, गेंद मूवमेंट के किस हिस्से पर निर्भर करती है, इसके मूवमेंट की दिशा बदल जाती है।

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

  function checkGoal() { if (ball.y < 15) { setBall(); } else if (ball.y > 625) { setBall(); } } function setBall() { if (ballReleased) { ball.x = game.world.centerX; ball.y = game.world.centerY; ball.body.velocity.x = 0; ball.body.velocity.y = 0; ballReleased = false; } } 

checkGoal() को लगातार कहा जाता है, इसलिए इसे update() के अंत में कॉपी update() :

  //,    -  checkGoal(); 

वह सब है! हम ब्राउज़र खोलते हैं, हमारे खेल के शानदार और आधुनिक गेमप्ले का आनंद लेते हैं, जीवन का आनंद लेते हैं और नए सिरे से प्रोग्रामिंग कौशल प्राप्त करते हैं।

निष्कर्ष

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

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

उपयोगी लिंक:
1. फेजर से अंग्रेजी-भाषा का परिचय
2. इंजन फोरम
3. रिचर्ड डेवी द्वारा ट्विटर

अपडेट: एक दोस्त की सलाह पर hell0w0rd ने github पर एक उदाहरण दिया और एक पेज बनाया ताकि आप गेम को आज़मा सकें:
https://github.com/nononononono/phaser-pong
http://nononononono.imtqy.com/phaser-pong/

10/20/2013 से अपडेट: fessnecro ने रैकेट और नए स्तरों के साथ एक गेंद की टक्कर में कणों को जोड़ा, जिसके लिए वह धन्यवाद देता है। ये बदलाव मुख्य ब्रांड में हैं। आलेख में वर्णित मूल संस्करण gh- पृष्ठों की शाखा में है।