फेजर पर फ्लैपी बर्ड का विकास करें

ध्यान आकर्षित करने के लिए एक तस्वीर

शुभ दिन, हेब्र!

लगभग एक महीने पहले (इस पोस्ट को लिखने के समय) मैंने फ्लैपी बर्ड गेम का अपना क्लोन बनाने के लिए सेट किया। लेकिन सभी इस हाथ तक नहीं पहुंचे। इस कार्रवाई के लिए उत्प्रेरक एक छोटा हैकाथॉन था। "और क्यों नहीं," मैंने सोचा, और इस खेल को लागू करने के बारे में निर्धारित किया है।

यह ध्यान में रखते हुए कि 2 दिनों में विकसित करना आवश्यक था, मैंने "साइकिल" का आविष्कार नहीं किया और एक तैयार गेम इंजन - फेजर लिया।

इस भाग में हम खेल के दृश्य के आरंभ पर विचार करेंगे, संसाधनों का "प्रीलोडर" लिखेंगे और खेल मेनू के लिए आधार तैयार करेंगे।

फेजर क्या है?

फेजर डेस्कटॉप और मोबाइल ब्राउज़र एचटीएमएल 5 गेम बनाने के लिए एक तेज, मुफ्त और मजेदार ओपन सोर्स गेम फ्रेमवर्क है। यह तेजी से 2D कैनवस और WebGL रेंडरिंग के लिए आंतरिक रूप से Pixi.js का उपयोग करता है।

फेजर एक ढांचा है जो हमें बहुत जल्दी गेम बनाने की अनुमति देता है। मैं अतिशयोक्ति नहीं करूंगा, इसकी मदद से गेम बनाना वास्तव में आसान और तेज़ है। हम अभिनेता के द्वारा विचलित नहीं हैं, प्रतिपादन, भौतिकी - हम खेल तर्क पर ध्यान केंद्रित करते हैं।
इसके निश्चित पैमाने Pixi.js. यह सबसे तेज़ इंजनों में से एक है जो WebGL का उपयोग करके रेंडर करता है। और मामले में WebGL का समर्थन नहीं किया गया है - कैनवास पर।
फेजर भी तैयार वर्गों के एक विशाल सेट के साथ प्रसन्नता देता है: स्प्राइटएनीमेशन, टाइलमैप, टाइमर, गेमस्टेट और बहुत कुछ। भौतिक इंजन के घटक शामिल हैं: रिगिबॉडी, भौतिकी आदि।
इन घटकों की उपस्थिति विकास को बहुत सरल बनाती है।

हम फेजर और अन्य निर्भरता को जोड़ते हैं

मैंने कई निर्भरता के साथ खेल को लोड नहीं किया, इसलिए सूची छोटी है: फेजर, वेबफॉन्ट और क्ले। खेल को विकसित करने के लिए सबसे पहले आवश्यक है, Google फोंट और उच्च अंक तालिका के लिए क्ले से फोंट डाउनलोड करने के लिए वेबफॉन्ट।

नीचे दिया गया कोड index.html फ़ाइल में समाहित है।

Index.html में हम सिर्फ निर्भरता में प्लग करते हैं, अधिक कुछ नहीं। जिसमें हमारी स्क्रिप्ट Game.js शामिल है, जिस पर हम बाद में विचार करेंगे। हम HTML की एक भी लाइन नहीं जोड़ते हैं, जैसा कि फेजर शरीर में सीधे दृश्य प्रस्तुत करता है।
यदि आवश्यक हो, तो Phaser आपके द्वारा बनाए गए कंटेनर को भी रेंडर कर सकता है।

हम फोंट कनेक्ट करते हैं

Game.js - GameInitialize () में केवल एक फ़ंक्शन है। इस फ़ंक्शन के बंद होने पर, सभी गणनाएं होती हैं। इससे पहले कि आप इसे कॉल करें, आपको फोंट के लोड होने की प्रतीक्षा करने की आवश्यकता है। अन्यथा, एक उच्च संभावना है कि फोंट को लोड करने का समय नहीं है और वे फेजर के लिए उपलब्ध नहीं होंगे। ऐसा करने के लिए, WebFont का उपयोग करें:

 WebFont.load({ google: { families: ['Press+Start+2P'] }, active: function() { GameInitialize(); } }); 

हमने Google फ़ॉन्ट्स से "प्रेस स्टार्ट 2P" फॉन्ट डाउनलोड करने के लिए "वेब" कहा और जब डाउनलोड पूरा हो जाता है, तो हम गेमइंटरिलाइज़ () फ़ंक्शन कहते हैं, जो सभी आवश्यक गेम ऑब्जेक्ट्स को इनिशियलाइज़ करना जारी रखेगा।

भविष्य में, पोस्ट की सामग्री को विशेष रूप से GameInitialize () फ़ंक्शन के ढांचे के भीतर वर्णित किया जाएगा ।

स्थिरांक घोषित करें, Phaser.Game का एक उदाहरण बनाएं, GameStates जोड़ें

आरंभ करने के लिए, वैरिएबल जोड़ें जिनका उपयोग करते समय वास्तविक मूल्य होंगे। चूंकि कास्ट का उपयोग करना "मान्य" नहीं है, इसलिए हम चर का उपयोग करते हैं:

सभी निर्मित फेजर वस्तुओं को संग्रहीत करने के लिए हमें सहायक चरों की भी आवश्यकता होगी:

हम संक्षेप में बताएंगे कि चर किस प्रकार का है और इसकी आवश्यकता क्यों है।

• पृष्ठभूमि - यहाँ हम रंग # 53BECE के साथ एक आयत संग्रहीत करते हैं।
• बादल वस्तुओं का एक समूह है। उनमें से प्रत्येक एक नियमित स्प्राइट है।
• क्लाउडसिमर एक टाइमर है जो नए बादलों को जन्म देता है।
• पाइप्स - वस्तुओं का एक समूह। बादलों की तरह, प्रत्येक वस्तु एक प्रेत है।
• पाइपस्पाइमर एक टाइमर है जो नए पाइपों को जन्म देता है।
• FreeSpacesInPipes - यह निर्धारित करने के लिए कि एक पक्षी उड़ गया है, हमें किसी तरह इस घटना को पकड़ने की आवश्यकता है। यह चर सिर्फ एक प्रेत के बिना वस्तुओं को संग्रहीत करता है, जो ट्रिगर हैं।
• बर्ड - एक पक्षी को स्टोर करें जिसमें एनीमेशन के लिए रिगिडबॉडी और स्प्राइटपार्ट है।
• शहर - पृष्ठभूमि में चलने वाले शहर के टाइलपॉइंट।
• फ्लैपसाउंड - एक ध्वनि जो माउस (फ्लैप पंख) पर क्लिक करने पर खेली जाती है।
• स्कोरसाउंड - एक पाइप के माध्यम से उड़ने की आवाज़।
• हर्टसाउंड - खेल के अंत की आवाज़, पाइप के साथ टकराव या खेल की दुनिया से परे जाना।
• SoundEnabledIcon, SoundDisabledIcon - शामिल ध्वनि के आइकन को प्रदर्शित करने के साथ दो स्प्राइट, और इसी तरह बंद हो गया।
• TitleText, InstuctionsText, DeveloperText, GraphicText - पाठ तत्व जो हम खेल मेनू में प्रदर्शित करते हैं।
• स्कोरटेक्स्ट - खेल के दौरान प्रदर्शित होने वाला पाठ।
• HighScoreTitleText, HighScoreText, PostScoreText - उच्च अंक तालिका में पाठ।
• लोडिंग टेक्स्ट - गेम लोडिंग टेक्स्ट।
• PostScoreClickArea - एक आयत जो यह निर्धारित करने में मदद करेगी कि कोई उपयोगकर्ता पोस्ट स्कोर बटन पर क्लिक करता है या नहीं।
• isScorePosted - ध्वज, उसी रिकॉर्ड को पुन: पोस्ट करने से बचाने के लिए (यदि उपयोगकर्ता उच्च-स्कोर में पोस्ट स्कोर को डबल-क्लिक करता है)।
• isSoundEnabled - एक ध्वज जिसके द्वारा हम यह निर्धारित करते हैं कि खेल में ध्वनि चालू / बंद है या नहीं।
• लीडरबोर्ड - एक ऑब्जेक्ट जो क्लेयो से प्रतिक्रिया को संग्रहीत करता है।

सभी चर घोषित करने के बाद, हम Phaser.Game को शुरू करना और खेल के लिए आवश्यक GameStates को जोड़ना शुरू कर सकते हैं।

Phaser.Game () निम्नलिखित मापदंडों को स्वीकार करता है:

नया गेम (चौड़ाई, ऊंचाई, रेंडरर, पैरेंट, स्टेट, ट्रांसपेरेंट, एंटीलिया)

हम चौड़ाई , ऊंचाई , रेंडरर , माता-पिता में रुचि रखते हैं। कैनवास के आयाम, रेंडरिंग विधि और खाली कंटेनर को निर्दिष्ट करने के लिए पर्याप्त है ताकि फेजर शरीर में खेल के दृश्य को प्रस्तुत करना शुरू कर दे।

हम पहले घोषित किए गए हमारे स्थिरांक का उपयोग करके फेजर को शुरू करते हैं:

 var Game = new Phaser.Game(WINDOW_WIDTH, WINDOW_HEIGHT, Phaser.CANVAS, SCENE); 

हमने गेम सीन को इनिशियलाइज़ किया है, लेकिन हमारे पास अभी भी गेम स्टेटव नहीं है। इस गलती को सुधारना आवश्यक है।
Game.state Phaser.StateManager को एक पॉइंटर स्टोर करता है। यह हमारे खुद के State'ov जोड़ने की जरूरत है समारोह () समारोह है। उसके हस्ताक्षर:

जोड़ें (कुंजी, राज्य, ऑटोस्टार्ट)

राज्य (इसकी आईडी) की पहचान करने के लिए कुंजी एक स्ट्रिंग है, राज्य एक Phaser.State ऑब्जेक्ट है, ऑटोस्टार्ट को इसके प्रारंभ के तुरंत बाद राज्य शुरू करना है। इस मामले में, हमें ऑटोस्टार्ट की आवश्यकता नहीं है ताकि हम खेल के सही क्षणों में राज्य की कॉल को स्वयं निर्धारित कर सकें।
खेल दृश्य में सभी खेल राज्यों को जोड़ें:

 Game.state.add('Boot', BootGameState, false); Game.state.add('Preloader', PreloaderGameState, false); Game.state.add('MainMenu', MainMenuState, false); Game.state.add('Game', GameState, false); Game.state.add('GameOver', GameOverState, false); 

इन खेल राज्यों में से प्रत्येक पर आगे चर्चा की जाएगी।

गेमप्ले लूप शुरू करने वाला अंतिम चरण BootGameState को शुरू करना है।

 Game.state.start('Boot'); 

मैं पूरा खेल आरंभीकरण कोड देता हूं:

गेम स्टेट्स कैसे बनाएं?

Phaser में Phaser.State () कंस्ट्रक्टर है। आपको एक खेल बनाने की आवश्यकता है राज्य इस निर्माता को कॉल करने के लिए है:

 var BootGameState = new Phaser.State(); 

उसके बाद, हम अपने स्वयं के द्वारा फेजर कार्यों के निष्पादन को ओवरराइड कर सकते हैं। राज्य में, 4 मुख्य लूप हैं: क्रिएट , प्रीलोड , रेंडर , अपडेट ।

• Phaser.State.create को एक सफल राज्य परिवर्तन के बाद कहा जाता है। यहां आप गेम के लॉजिक के इनिशियलाइज़ेशन, वेरिएबल्स में फिलिंग आदि लिख सकते हैं।
• Phaser.State.preload कहा जाता है और संसाधनों को लोड करते समय चलता है। यदि आपको किसी प्रकार के स्प्राइट या ध्वनि को लोड करने की आवश्यकता है - तो इसे यहां करें।
• Phaser.State.render को हर बार एक फ्रेम प्रस्तुत करने के लिए कहा जाता है। यहां हम रेंडरिंग ऑपरेशन करते हैं।
• Phaser.State.update को प्रतिपादन के बाद कहा जाता है। यहां हम गणना करते हैं और वास्तव में, खेल के व्यापार तर्क।

अब हमारे शुरुआती स्टेट पर विचार करें, जो गेम लूप को इनिशियलाइज़ करता है।

बाद के खंडों में, मैं कोष्ठक में उस चर के नाम से इंगित करूंगा जिसमें Phaser.State () संग्रहीत है

उस खिलाड़ी को सूचित करें जिसे डाउनलोड शुरू हो गया है (BootGameState)

उदाहरण Phaser.State बनाएँ। इसके सफल लोडिंग के बाद, शिलालेख "लोड हो रहा है ..." के साथ पाठ जोड़ें और इसे केंद्र में रखें। PreloaderState डाउनलोड करना शुरू करना न भूलें।

 var BootGameState = new Phaser.State(); BootGameState.create = function() { LoadingText = Game.add.text(Game.world.width / 2, Game.world.height / 2, LOADING_TEXT, { font: '32px "Press Start 2P"', fill: '#FFFFFF', stroke: '#000000', strokeThickness: 3, align: 'center' }); LoadingText.anchor.setTo(0.5, 0.5); Game.state.start('Preloader', false, false); }; 

हम संसाधनों का "प्रीलोडर" लिखते हैं (PreloaderGameState)

प्रेत, ध्वनि, एनीमेशन, आदि को फेजर में लोड करने के लिए, आप फेजर.लाडर का उपयोग कर सकते हैं। इसके बाद एक पॉइंटर Game.load में निहित है जब हमने दृश्य को इनिशियलाइज़ किया था। हमारे खेल के लिए तीन तरीके पर्याप्त होंगे:

 Phaser.Loader.spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing) Phaser.Loader.image(key, url, overwrite) Phaser.Loader.audio(key, urls, autoDecode) 

इन विधियों का उपयोग करते हुए, हम एक फ़ंक्शन लिखेंगे जो गेम में संसाधनों को लोड करेगा:

 var loadAssets = function loadAssets() { Game.load.spritesheet('bird', 'img/bird.png', 48, 35); Game.load.spritesheet('clouds', 'img/clouds.png', 64, 34); Game.load.image('town', 'img/town.png'); Game.load.image('pipe', 'img/pipe.png'); Game.load.image('soundOn', 'img/soundOn.png'); Game.load.image('soundOff', 'img/soundOff.png'); Game.load.audio('flap', 'wav/flap.wav'); Game.load.audio('hurt', 'wav/hurt.wav'); Game.load.audio('score', 'wav/score.wav'); }; 

अब PreloaderGameState पर चलते हैं। एक नया Phaser.State () बनाएं।

 var PreloaderGameState = new Phaser.State(); 

हम प्रीलोड विधि को फिर से परिभाषित करते हैं, जिसमें हम loadAssets () फ़ंक्शन कहते हैं:

 PreloaderGameState.preload = function() { loadAssets(); }; 

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

 PreloaderGameState.create = function() { var tween = Game.add.tween(LoadingText).to({ alpha: 0 }, 1000, Phaser.Easing.Linear.None, true); tween.onComplete.add(function() { Game.state.start('MainMenu', false, false); }, this); }; 

पूर्ण स्रोत कोड PreloaderGameState ():

अंत में

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

उपयोगी लिंक

Phaser
फेजर (गिटहब)
फेसर (प्रलेखन)
फेजर। नाम ()
फेजर.लाओडर ()
फसर .स्टेट ()
फेज़र .स्टेटमैनेजर ()
पिक्सी.जेएस (गिटहब)

FlappyBird
FlappyBird (GitHub)
UPD: हाल के फिक्स में, मैंने फुल-स्क्रीन मोड को हटा दिया, क्योंकि प्रदर्शन के बारे में कई शिकायतें हैं।

मैं हैबरहाब समुदाय की राय सुनना चाहता हूं। क्या आप अगली कड़ी में रुचि रखते हैं? दूसरे भाग में, निम्नलिखित पर विचार करें:

• एक खेल मेनू बनाना
• सभी गेम ऑब्जेक्ट को प्रारंभ करें
• अच्छी छोटी चीजें जोड़ें।
• हम गेमप्ले के लिए एक सहज संक्रमण के लिए आधार तैयार करते हैं