🤛🏾 🏦 🤬 Node.js पर ब्राउज़र नेटवर्क शूटर 👵🏼 🧕🏽 🖖🏽

मल्टीप्लेयर गेम का विकास कई कारणों से जटिल है: उनकी मेजबानी महंगी हो सकती है, संरचना स्पष्ट नहीं है, और कार्यान्वयन मुश्किल है। इस ट्यूटोरियल में मैं आखिरी बाधा को दूर करने में आपकी मदद करने की कोशिश करूंगा।

यह लेख उन डेवलपर्स के लिए है जो गेम बना सकते हैं और जावास्क्रिप्ट से परिचित हैं, लेकिन पहले कभी मल्टीप्लेयर ऑनलाइन गेम नहीं लिखा है। इस ट्यूटोरियल को पूरा करने के बाद, आप अपने गेम में बुनियादी नेटवर्क घटकों के कार्यान्वयन में महारत हासिल करेंगे और इसे कुछ और में विकसित करने में सक्षम होंगे! यहाँ हम क्या बनाएंगे:

आप यहाँ समाप्त खेल खेल सकते हैं ! जब आप डब्ल्यू या "अप" कुंजियों को दबाते हैं, तो जहाज कर्सर से संपर्क करता है; जब आप माउस पर क्लिक करते हैं, तो यह गोली मारता है। (यदि कोई ऑनलाइन नहीं है, तो यह जांचने के लिए कि मल्टीप्लेयर कैसे काम करता है, एक कंप्यूटर पर दो ब्राउज़र विंडो खोलें, या उनमें से एक फोन पर)। यदि आप खेल को स्थानीय रूप से चलाना चाहते हैं, तो पूरा स्रोत कोड GitHub पर उपलब्ध है ।

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

आपको स्थानीय रूप से कुछ भी कॉन्फ़िगर करने की आवश्यकता नहीं है, क्योंकि हम इस गेम को पूरी तरह से Glitch.com पर ब्राउज़र में बनाएंगे ! ग्लिच वेब अनुप्रयोगों के निर्माण के लिए एक बढ़िया उपकरण है, जिसमें बैकएंड, डेटाबेस और बहुत कुछ शामिल हैं। यह प्रोटोटाइप, प्रशिक्षण और सहयोग के लिए बहुत अच्छा है, और मुझे इस ट्यूटोरियल में आपको इसकी क्षमताओं से परिचित कराने में बहुत खुशी होगी।

चलिए शुरू करते हैं।

1. तैयारी

मैंने Glitch.com पर परियोजना का प्रारूप पोस्ट किया।

इंटरफ़ेस टिप्स: आप शो बटन (ऊपरी बाएँ) पर क्लिक करके एप्लिकेशन पूर्वावलोकन लॉन्च कर सकते हैं।

बाईं ओर ऊर्ध्वाधर साइडबार में सभी एप्लिकेशन फाइलें हैं। इस एप्लिकेशन को संपादित करने के लिए, आपको इसका "रीमिक्स" बनाना होगा। तो हम इसकी एक प्रति अपने खाते (या "शब्दजाल में" कांटे) में बनाएंगे। रीमिक्स इस बटन पर क्लिक करें।

इस बिंदु पर, आप एक अनाम खाते के तहत आवेदन को संपादित कर रहे हैं। अपने काम को बचाने के लिए, आप (शीर्ष दाएं) लॉग इन कर सकते हैं।

अब, आगे बढ़ने से पहले, आपके लिए उस खेल से परिचित होना महत्वपूर्ण है जिसमें हम एक मल्टीप्लेयर मोड जोड़ देंगे। Index.html पर एक नज़र डालें। इसके तीन महत्वपूर्ण कार्य हैं जिनके बारे में आपको जानना चाहिए: preload (लाइन 99), create (लाइन 115) और GameLoop (लाइन 142), साथ ही प्लेयर ऑब्जेक्ट (लाइन 35)।

यदि आप अभ्यास करके सीखना पसंद करते हैं, तो निम्नलिखित कार्यों को पूरा करके खेल के काम को समझना सुनिश्चित करें:

दुनिया के आकार को बढ़ाएं (पंक्ति 29) - ध्यान दें कि इन-गेम की दुनिया के लिए एक अलग विश्व आकार है और पृष्ठ के कैनवास के लिए एक खिड़की का आकार है ।
"स्पेस" (लाइन 53) की मदद से आगे बढ़ना संभव बनाएं ।
खिलाड़ी का जहाज प्रकार (लाइन 129) बदलें ।
गोले की गति को धीमा कर दें (लाइन 155)।

सॉकेट स्थापित करें

सॉकेट.आईओ एक वेबसॉकेट (यूडीपी जैसे प्रोटोकॉल का उपयोग करने के बजाय, जो क्लासिक मल्टीप्लेयर गेम बनाने के लिए उपयोग किया जाता है) का उपयोग करके ब्राउज़र के अंदर वास्तविक समय संचार का प्रबंधन करने के लिए एक पुस्तकालय है। इसके अलावा, लाइब्रेरी के पास संचालन सुनिश्चित करने के लिए अनावश्यक तरीके हैं, तब भी जब WebSockets समर्थित नहीं हैं। यही है, वह मैसेजिंग प्रोटोकॉल से संबंधित है और एक सुविधाजनक ईवेंट-आधारित मैसेजिंग सिस्टम के उपयोग की अनुमति देता है।

पहली चीज़ जो हमें करने की ज़रूरत है वह है सॉकेट.आईओ मॉड्यूल। ग्लिच में, यह package.json फ़ाइल पर जाकर किया जा सकता है, और फिर या तो निर्भरता में आवश्यक मॉड्यूल में प्रवेश कर सकता है, या ऐड पैकेज पर क्लिक करके "socket.io" दर्ज कर सकता है।

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

अब चलिए server.js पर चलते हैं । यह वह जगह है जहां हमारा सर्वर कोड स्थित है। अब तक, हमारे HTML की सेवा के लिए केवल कुछ बुनियादी बॉयलरप्लेट कोड हैं। सॉकेट सक्षम करने के लिए फ़ाइल के शीर्ष पर एक पंक्ति जोड़ें:

 var io = require('socket.io')(http); //     http

अब हमें क्लाइंट में Socket.io को भी इनेबल करना होगा, तो चलिए index.html पर वापस आते हैं और <head> b <head> अंदर निम्नलिखित पंक्तियों को जोड़ते हैं:

 <!--    Socket.io --> <script src="/socket.io/socket.io.js"></script>

नोट: Socket.io स्वचालित रूप से इस पथ के साथ क्लाइंट लाइब्रेरी को लोड करने की प्रक्रिया करता है, इसलिए यह रेखा तब भी काम करती है, जब आपके फ़ोल्डर्स में कोई /socket.io/ निर्देशिका न हो।

अब Socket.io प्रोजेक्ट में शामिल है और जाने के लिए तैयार है!

2. खिलाड़ियों की मान्यता और स्पॉइंग

हमारा पहला वास्तविक कदम सर्वर पर कनेक्शन स्वीकार करना और क्लाइंट में नए खिलाड़ी बनाना होगा।

सर्वर कनेक्शन स्वीकार करना

इस कोड को server.js के नीचे जोड़ें:

 //  Socket.io    io.on('connection', function(socket){ console.log("New client has connected with id:",socket.id); })

तो हम सॉकेट से पूछते हैं। सभी connection घटनाओं को सुनने के लिए जो स्वचालित रूप से एक ग्राहक को जोड़ता है। लाइब्रेरी प्रत्येक क्लाइंट के लिए एक नया socket ऑब्जेक्ट बनाता है, जहां socket.id इस क्लाइंट के लिए विशिष्ट पहचानकर्ता है।

यह सत्यापित करने के लिए कि यह काम करता है, क्लाइंट ( index.html ) पर वापस लौटें और इस लाइन को कहीं बनाएँ फंक्शन में जोड़ें:

 var socket = io(); //    'connection'

यदि आप गेम शुरू करते हैं और सर्वर लॉग को देखते हैं ( लॉग्स बटन पर क्लिक करें), तो आप देखेंगे कि सर्वर ने इस कनेक्शन घटना को पंजीकृत कर लिया है!

अब, एक नए खिलाड़ी को जोड़ने पर, हम उससे अपेक्षा करते हैं कि वह हमें उसके राज्य के बारे में जानकारी देगा। हमारे मामले में, हमें सही बिंदु पर इसे सही ढंग से बनाने के लिए कम से कम x , y और कोण को जानने की आवश्यकता है।

connection ईवेंट सॉकेट.io द्वारा शुरू की गई एक इनलाइन घटना थी। हम किसी भी स्वतंत्र रूप से निर्धारित घटनाओं को सुन सकते हैं। मैं अपने ईवेंट को new-player नाम दूंगा, और मुझे उम्मीद है कि ग्राहक जैसे ही इसकी स्थिति के बारे में जानकारी के साथ इसे भेजेगा। यह इस तरह दिखेगा:

 //  Socket.io    io.on('connection', function(socket){ console.log("New client has connected with id:",socket.id); socket.on('new-player',function(state_data){ //   new-player    console.log("New player has state:",state_data); }) })

यदि आप इस कोड को चलाते हैं, तो जब तक आप सर्वर लॉग में कुछ भी नहीं देखते हैं, क्योंकि हमने अभी तक क्लाइंट को इस new-player इवेंट को उत्पन्न करने के लिए नहीं कहा है। लेकिन चलो एक पल के लिए दिखावा करते हैं कि हमने पहले ही यह कर लिया है, और सर्वर पर काम करना जारी रखें। नए जुड़ने वाले खिलाड़ी का स्थान प्राप्त करने के बाद क्या होना चाहिए?

हम अन्य सभी जुड़े खिलाड़ियों को संदेश भेज सकते हैं ताकि उन्हें पता चले कि एक नया खिलाड़ी सामने आया है। Socket.io के पास इसके लिए एक सुविधाजनक कार्य है:

 socket.broadcast.emit('create-player',state_data);

जब socket.emit कहा जाता है socket.emit संदेश केवल इस एकल क्लाइंट को दिया जाता है। जब socket.broadcast.emit कहा जाता है socket.broadcast.emit यह सर्वर से जुड़े प्रत्येक क्लाइंट को भेजा जाता है, सिवाय जिसके सॉकेट पर यह फ़ंक्शन कहा जाता था।

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

सर्वर कोड अब इस तरह दिखना चाहिए:

 //  Socket.io    io.on('connection', function(socket){ console.log("New client has connected with id:",socket.id); socket.on('new-player',function(state_data){ //   new-player    console.log("New player has state:",state_data); socket.broadcast.emit('create-player',state_data); }) })

अर्थात्, जब भी कोई खिलाड़ी कनेक्ट होता है, तो हम उससे अपेक्षा करते हैं कि वह हमें उसके स्थान के बारे में जानकारी के साथ एक संदेश भेज सकता है, और हम यह डेटा अन्य सभी खिलाड़ियों को भेजते हैं ताकि वे उसका स्प्रिट बना सकें।

क्लाइंट स्पॉनिंग

अब, इस चक्र को पूरा करने के लिए, हमें क्लाइंट में दो कार्य करने होंगे:

कनेक्शन के बाद हमारे स्थान के डेटा के साथ एक संदेश उत्पन्न करें।
इस बिंदु पर प्लेयर बनाने और सुनने के लिए create-player बनाएं।

क्रिएट फंक्शन में एक प्लेयर बनाने के बाद पहली कार्रवाई करने के लिए (लगभग लाइन 135 पर), हम एक संदेश उत्पन्न कर सकते हैं जिसमें स्थान डेटा है जिसे हमें भेजने की आवश्यकता है:

 socket.emit('new-player',{x:player.sprite.x,y:player.sprite.y,angle:player.sprite.rotation})

हमें भेजे जा रहे डेटा को क्रमबद्ध करने के बारे में चिंता करने की आवश्यकता नहीं है। आप उन्हें किसी भी प्रकार की वस्तु में स्थानांतरित कर सकते हैं, और सॉकेट.आईओ हमारे लिए इसे संसाधित करेगा।

आगे बढ़ने से पहले, कोड का परीक्षण करें । हमें सर्वर लॉग में एक समान संदेश देखना चाहिए:

 New player has state: { x: 728.8180247836519, y: 261.9979387913289, angle: 0 }

अब हम जानते हैं कि हमारा सर्वर एक नए खिलाड़ी के कनेक्शन के बारे में एक सूचना प्राप्त करता है और सही तरीके से उसके स्थान के बारे में डेटा पढ़ता है!

अगला, हम एक नया खिलाड़ी बनाने के लिए अनुरोध सुनना चाहते हैं। हम इस कोड को संदेश उत्पन्न करने के तुरंत बाद रख सकते हैं, इसे इस तरह दिखना चाहिए:

 socket.on('create-player',function(state){ // CreateShip -      ,     CreateShip(1,state.x,state.y,state.angle) })

अब कोड का परीक्षण करें । खेल के साथ दो खिड़कियां खोलें और सुनिश्चित करें कि यह काम करता है।

आपको यह देखना चाहिए कि दो ग्राहक खोलने के बाद, पहले ग्राहक के पास दो जहाज हैं, और दूसरे में केवल एक ही है।

कार्य: क्या आप समझ सकते हैं कि ऐसा क्यों हुआ? या आप इसे कैसे ठीक कर सकते हैं? हमारे द्वारा लिखे गए क्लाइंट / सर्वर तर्क का अनुसरण करें और इसे डीबग करने का प्रयास करें।

मुझे आशा है कि आप इसे अपने दम पर जानने की कोशिश करेंगे! निम्नलिखित ऐसा होता है: जब पहला खिलाड़ी कनेक्ट होता है, तो सर्वर अन्य सभी खिलाड़ियों को एक create-player इवेंट भेजता है, लेकिन ऐसे खिलाड़ी नहीं होते हैं जो अभी तक प्राप्त कर सकते हैं। दूसरे खिलाड़ी को जोड़ने के बाद, सर्वर फिर से अपने संदेश भेजता है, और पहला खिलाड़ी इसे प्राप्त करता है और सही ढंग से स्प्राइट बनाता है, जबकि दूसरा खिलाड़ी पहले खिलाड़ी के संदेश को याद करता है।

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

खेल स्थिति सिंक चेतावनी

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

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

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

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

ऐसी योजना को लागू करने के लिए, मैं निम्नलिखित कार्य करूंगा:

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

आप इस प्रणाली को स्वयं लागू करने का प्रयास कर सकते हैं, क्योंकि ये चरण काफी सरल हैं ( मेरी सुविधा टिप यहां काम आ सकती है)। यहाँ पूर्ण कार्यान्वयन कैसा दिख सकता है:

 //  Socket.io    // 1 -      / var players = {}; io.on('connection', function(socket){ console.log("New client has connected with id:",socket.id); socket.on('new-player',function(state_data){ //   new-player    console.log("New player has state:",state_data); // 2 -      players[socket.id] = state_data; //    io.emit('update-players',players); }) socket.on('disconnect',function(){ // 3-       delete players[socket.id]; //    }) })

ग्राहक पक्ष थोड़ा अधिक जटिल है। एक तरफ, अब हमें केवल update-players इवेंट के बारे में ध्यान रखना चाहिए, लेकिन दूसरी ओर, हमें नए जहाजों को बनाने पर विचार करना चाहिए, यदि सर्वर हमारे द्वारा ज्ञात से अधिक जहाजों को भेजता है, या यदि उनमें से बहुत सारे हैं तो हटा दें।

इस तरह से मैं क्लाइंट में इस घटना को संभालता हूं:

 //     // : -         other_players = {} socket.on('update-players',function(players_data){ var players_found = {}; //        for(var id in players_data){ //      if(other_players[id] == undefined && id != socket.id){ // ,      var data = players_data[id]; var p = CreateShip(1,data.x,data.y,data.angle); other_players[id] = p; console.log("Created new player at (" + data.x + ", " + data.y + ")"); } players_found[id] = true; //     if(id != socket.id){ other_players[id].x = players_data[id].x; //  ,    ,      other_players[id].y = players_data[id].y; other_players[id].rotation = players_data[id].angle; } } //       for(var id in other_players){ if(!players_found[id]){ other_players[id].destroy(); delete other_players[id]; } } })

क्लाइंट की ओर से, मैं दूसरे शब्दकोश में जहाज स्टोर करता हूं, जिसे मैंने केवल स्क्रिप्ट के शीर्ष पर परिभाषित किया है (यह नहीं दिखाया गया है)। चूंकि सर्वर सभी खिलाड़ियों के लिए खिलाड़ी डेटा भेजता है, मुझे एक चेक जोड़ना होगा ताकि क्लाइंट अपने लिए अतिरिक्त स्प्राइट न बनाए। (यदि आपको संरचना के साथ समस्याएं हैं, तो यहां पूर्ण कोड है जो इस समय index.html में होना चाहिए)।

अब कोड का परीक्षण करें । आपको कई ग्राहक बनाने और सही स्थिति में बनाए गए जहाजों की सही संख्या देखने में सक्षम होना चाहिए!

3. जहाज के पदों का सिंक्रनाइज़ेशन

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

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

और यह पर्याप्त होना चाहिए! अब इसे स्वयं लागू करने की कोशिश करने की आपकी बारी है।

यदि आप पूरी तरह से भ्रमित हैं और आपको संकेत की आवश्यकता है, तो तैयार परियोजना को देखें ।

नेटवर्क पर प्रेषित डेटा को कम करने पर ध्यान दें

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

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

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

हालांकि, अपने सर्वर की संरचना का चयन करते समय, आपको खेल के विकास के शुरुआती चरणों में प्रत्येक फ्रेम में प्रेषित संदेशों की संख्या का मूल्यांकन करना चाहिए।

4. शेल सिंक्रनाइज़ेशन

हम लगभग हो चुके हैं! अंतिम गंभीर हिस्सा गोले के एक नेटवर्क पर सिंक्रनाइज़ हो रहा है। हम इसे उसी तरह से लागू कर सकते हैं जैसे कि सिंक्रनाइज़ किए गए खिलाड़ी:

प्रत्येक ग्राहक प्रत्येक फ्रेम में अपने सभी गोले की स्थिति भेजता है।
सर्वर उन्हें प्रत्येक खिलाड़ी पर पुनर्निर्देशित करता है।

लेकिन एक समस्या है।

धोखा सुरक्षा

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

इस समस्या से आंशिक रूप से निपटने के लिए, हम एक अन्य योजना का उपयोग करने का प्रयास करेंगे:

क्लाइंट अपनी स्थिति और दिशा के साथ शॉट शेल के बारे में एक संदेश बनाता है।
सर्वर गोले के आंदोलन को अनुकरण करता है।
सर्वर प्रत्येक क्लाइंट के डेटा को अपडेट करता है, सभी गोले की स्थिति को पार करता है।
सर्वर से प्राप्त स्थितियों में ग्राहक शेल प्रदान करते हैं।

इस प्रकार, ग्राहक प्रक्षेप्य की स्थिति के लिए जिम्मेदार है, लेकिन इसकी गति के लिए नहीं और इसके आगे के आंदोलन के लिए नहीं। क्लाइंट खुद के लिए गोले की स्थिति को बदल सकता है, लेकिन यह नहीं बदलेगा जो अन्य ग्राहक देखते हैं।

ऐसी योजना को लागू करने के लिए, हम निकाल दिए जाने पर संदेश निर्माण जोड़ देंगे। मैं अब स्प्राइट खुद नहीं बनाऊंगा, क्योंकि इसका अस्तित्व और स्थान पूरी तरह से सर्वर द्वारा निर्धारित किया जाएगा। अब index.html में हमारा नया प्रोजेक्टाइल शॉट इस तरह दिखेगा:

 //   if(game.input.activePointer.leftButton.isDown && !this.shot){ var speed_x = Math.cos(this.sprite.rotation + Math.PI/2) * 20; var speed_y = Math.sin(this.sprite.rotation + Math.PI/2) * 20; /*    ,       ,       var bullet = {}; bullet.speed_x = speed_x; bullet.speed_y = speed_y; bullet.sprite = game.add.sprite(this.sprite.x + bullet.speed_x,this.sprite.y + bullet.speed_y,'bullet'); bullet_array.push(bullet); */ this.shot = true; //  ,     socket.emit('shoot-bullet',{x:this.sprite.x,y:this.sprite.y,angle:this.sprite.rotation,speed_x:speed_x,speed_y:speed_y}) }

अब हम क्लाइंट में गोले को अपडेट करने वाले पूरे कोड के टुकड़े पर टिप्पणी कर सकते हैं:

 /*     ,         //   for(var i=0;i<bullet_array.length;i++){ var bullet = bullet_array[i]; bullet.sprite.x += bullet.speed_x; bullet.sprite.y += bullet.speed_y; //  ,       if(bullet.sprite.x < -10 || bullet.sprite.x > WORLD_SIZE.w || bullet.sprite.y < -10 || bullet.sprite.y > WORLD_SIZE.h){ bullet.sprite.destroy(); bullet_array.splice(i,1); i--; } } */

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

 //     socket.on('bullets-update',function(server_bullet_array){ //     ,   for(var i=0;i<server_bullet_array.length;i++){ if(bullet_array[i] == undefined){ bullet_array[i] = game.add.sprite(server_bullet_array[i].x,server_bullet_array[i].y,'bullet'); } else { //      ! bullet_array[i].x = server_bullet_array[i].x; bullet_array[i].y = server_bullet_array[i].y; } } //    ,   for(var i=server_bullet_array.length;i<bullet_array.length;i++){ bullet_array[i].destroy(); bullet_array.splice(i,1); i--; } })

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

अब server.js में हमें गोले को ट्रैक और अनुकरण करना होगा। पहले, हम खिलाड़ियों के लिए एक सरणी के समान ट्रैकिंग गोले के लिए एक सरणी बनाएंगे:

 var bullet_array = []; //

अगला, हम प्रक्षेप्य शॉट घटना सुनते हैं:

 //   shoot-bullet        socket.on('shoot-bullet',function(data){ if(players[socket.id] == undefined) return; var new_bullet = data; data.owner_id = socket.id; //    id  bullet_array.push(new_bullet); });

अब हम प्रति सेकंड 60 बार गोले का अनुकरण करते हैं:

 //   60       function ServerGameLoop(){ for(var i=0;i<bullet_array.length;i++){ var bullet = bullet_array[i]; bullet.x += bullet.speed_x; bullet.y += bullet.speed_y; // ,       if(bullet.x < -10 || bullet.x > 1000 || bullet.y < -10 || bullet.y > 1000){ bullet_array.splice(i,1); i--; } } } setInterval(ServerGameLoop, 16);

और अंतिम चरण इस फ़ंक्शन के अंदर अपडेट इवेंट को भेजने के लिए है (लेकिन निश्चित रूप से लूप के लिए बाहर):

 //  ,    ,    io.emit("bullets-update",bullet_array);

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

5. गोले के साथ टकराव

यह अंतिम बुनियादी यांत्रिकी है जिसे हम लागू करते हैं। मुझे आशा है कि आप पहले से ही अपने कार्यान्वयन की योजना के लिए प्रक्रिया के आदी हैं, पहले ग्राहक कार्यान्वयन को पूरी तरह से पूरा कर रहे हैं, और फिर सर्वर (या इसके विपरीत) पर जा रहे हैं। यह विधि आगे और पीछे लागू होने पर छलांग लगाने की तुलना में बहुत कम त्रुटि वाली है।

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

जांचें कि क्या प्रोजेक्टाइल सर्वर पर किसी भी खिलाड़ी के काफी करीब है।
जब कोई प्रोजेक्टाइल खिलाड़ी को हिट करता है, तो सभी क्लाइंट के लिए एक ईवेंट बनाएं
हिट इवेंट को सुनने के लिए क्लाइंट को सिखाएं और हिट होने पर जहाज को ब्लिंक करें।

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

 player.sprite.alpha = 0;

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

 for(var id in other_players){ if(other_players[id].alpha < 1){ other_players[id].alpha += (1 - other_players[id].alpha) * 0.16; } else { other_players[id].alpha = 1; } }

एकमात्र कठिन हिस्सा यह सत्यापित करने के लिए हो सकता है कि खिलाड़ी अपने स्वयं के गोले नहीं मारता (अन्यथा वह हर बार जब वह गोली मारता है तो नुकसान उठाएगा)।

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

6. मोशन स्मूदी

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

खेल पूरी तरह से कार्यात्मक है, लेकिन हमारा काम वहाँ समाप्त नहीं होता है। ऐसी कुछ समस्याएं हैं जो गेमप्ले को नकारात्मक रूप से प्रभावित कर सकती हैं, और हमें उनसे निपटना चाहिए:

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

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

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

हम इस ट्यूटोरियल में शेल सिस्टम लागू नहीं करेंगे, लेकिन यह जानकर अच्छा लगेगा कि यह विधि मौजूद है।

जहाज की स्थिति का सरल प्रक्षेप करना बहुत सरल है। अपडेट इवेंट में सीधे एक पोज़िशन सेट करने के बजाय, जहाँ हमें पहली बार नया पोजिशन डेटा प्राप्त होता है, हम बस टार्गेट पोजीशन को बचाते हैं:

 //     if(id != socket.id){ other_players[id].target_x = players_data[id].x; //  ,    ,     other_players[id].target_y = players_data[id].y; other_players[id].target_rotation = players_data[id].angle; }

फिर, अपडेट फ़ंक्शन में (क्लाइंट की तरफ भी), हम सभी अन्य खिलाड़ियों के चारों ओर लूप करते हैं और उन्हें अपने लक्ष्य की ओर धकेलते हैं:

 //     ,      for(var id in other_players){ var p = other_players[id]; if(p.target_x != undefined){ px += (p.target_x - px) * 0.16; py += (p.target_y - py) * 0.16; //  ,    /  var angle = p.target_rotation; var dir = (angle - p.rotation) / (Math.PI * 2); dir -= Math.round(dir); dir = dir * Math.PI * 2; p.rotation += dir * 0.16; } }

इस प्रकार, सर्वर हमें प्रति सेकंड 30 बार अपडेट भेजता है, लेकिन हम अभी भी 60 एफपीएस पर खेल सकते हैं और गेम अभी भी सुचारू दिखता है!

निष्कर्ष

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

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

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

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

आप एक अन्य उपयोगी ग्लिच फ़ंक्शन का उपयोग कर सकते हैं, जिसमें ऊपरी बाएं कोने में उन्नत विकल्पों के माध्यम से अपनी खुद की परियोजना को डाउनलोड करने या निर्यात करने की क्षमता शामिल है:

Node.js पर ब्राउज़र नेटवर्क शूटर