🌭 🤚🏿 🧓🏾 हम गेम सर्वर पर एक ब्राउज़र में एक स्व-लिखित ईसीएस को कैसे डिबग करते हैं 🧜🏼 👩‍🚒 📓

मैं उन तंत्रों को साझा करना चाहता हूं जिनका उपयोग हम सर्वर पर गेम लॉजिक के दृश्य डिबगिंग और वास्तविक समय में मैच स्टेट्स को बदलने के तरीकों के लिए करते हैं।

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

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

परियोजना पर सभी प्रकाशित लेखों की वादा की गई सूची:

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

प्रसंस्करण एक काफी मानक तरीका है

private bool HandleHttp(Socket socket) { var buf = new byte[8192]; var bufLen = 0; var recvBuf = new byte[8192]; var bodyStart = -1; while(bodyStart == -1) { var recvLen = socket.Receive(recvBuf); if(recvLen == 0) { return true; } Buffer.BlockCopy(recvBuf, 0, buf, bufLen, recvLen); bufLen += recvLen; bodyStart = FindBodyStart(buf, bufLen); } var headers = Encoding.UTF8.GetString(buf, 0, bodyStart - 2).Replace("\r", "").Split('\n'); var main = headers[0].Split(' '); var reqMethod = ParseRequestMethod(main[0]); if (reqMethod == RequestMethod.Invalid) { SendResponse(400, socket); return true; } // receive POST body var body = string.Empty; if(reqMethod == RequestMethod.Post) { body = ReceiveBody(buf, bufLen, headers, bodyStart, socket); if(body == null) { return true; } } var path = main[1]; if(path == "/") { path = "/index.html"; } // try to serve by a file if(File.Exists(_docRoot + path)) { var content = File.ReadAllBytes(_docRoot + path); if (reqMethod == RequestMethod.Head) { content = null; } SendResponse(200, socket, content, GuessMime(path)); return true; } // try to serve by a handle foreach(var handler in _handlers) { if(handler.Match(reqMethod, path)) { if (handler.Async) { _jobs.Enqueue(() => { RunHandler(socket, path, body, handler); socket.Shutdown(SocketShutdown.Both); socket.Close(); }); return false; } else { RunHandler(socket, path, body, handler); return true; } } } // nothing found :-( var msg = "File not found " + path + "\ndoc root " + _docRoot + "\ncurrent dir " + Directory.GetCurrentDirectory(); SendResponse(404, socket, Encoding.UTF8.GetBytes(msg)); return true; }

फिर हम प्रत्येक अनुरोध के लिए कई विशेष हैंडलर पंजीकृत करते हैं।
उनमें से एक खेल में सभी मैचों को देखने का हैंडलर है। हमारे पास एक विशेष वर्ग है जो सभी मैचों के जीवन समय को नियंत्रित करता है।

त्वरित विकास के लिए, उन्होंने बस इसे एक विधि जोड़ा, जोसन प्रारूप में अपने बंदरगाहों पर मैचों की सूची जारी करता है

 public string ListMatches(string method, string path) { var sb = new StringBuilder(); sb.Append("[\n"); foreach (var match in _matches.Values) { sb.Append("{id:\"" + match.GameId + "\"" + ", www:" + match.Tool.Port + "},\n" ); } sb.Append("]"); return sb.ToString(); }

मैच के लिंक पर क्लिक करके, नियंत्रण मेनू पर जाएं। यहां यह और अधिक दिलचस्प हो जाता है।

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

पहला लिंक मानक मिलान लॉग की ओर जाता है:

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

GameViewer का दूसरा लिंक मैच का वास्तविक दृश्य प्रतिनिधित्व करता है:

जेनरेटर जो डेटा पैक करने के लिए हमारे लिए ECS कोड बनाता है वह भी json में डेटा को दर्शाने के लिए अतिरिक्त कोड बनाता है। यह आपको जसन से मैच संरचना को आसानी से पढ़ने और रेंडर करने के लिए वेबजीएल में तीन.जेएस लाइब्रेरी का उपयोग करने की अनुमति देता है।

डेटा संरचना कुछ इस तरह दिखती है

 { enums: { "HostilityLayer": { 1: "PlayerTeam1", 2: "PlayerTeam2", 3: "NeutralShootable", } }, components: { Transform: { name: 'Transform', fields: { Angle: {type: "float"}, Position: {type: "Vector2"}, }, }, TransformExact: { name: 'TransformExact', fields: { Angle: {type: "float"}, Position: {type: "Vector2"}, } } }, tables: { Transform: { name: 'Transform', component: 'Transform', }, TransformExact: { name: 'TransformExact', component: 'TransformExact', hint: "Copy of Transform for these entities that need full precision when sent over network", } } }

और गतिशील निकायों (हमारे मामले में, खिलाड़ियों) का प्रतिपादन चक्र इस तरह है

 var rulebook = {}; var worldstate = {}; var physics = {}; var update_dynamic_physics; var camera, scene, renderer; var controls; function init3D () { camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.up.set(0,0,1); scene = new THREE.Scene(); scene.add( new THREE.AmbientLight( 0x404040 ) ); var light = new THREE.DirectionalLight( 0xFFFFFF, 1 ); light.position.set(-11, -23, 45); scene.add( light ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); controls = new THREE.OrbitControls( camera, renderer.domElement ); var cam = localStorage.getObject('gv_camera'); if (cam) { camera.matrix.fromArray(cam.matrix); camera.matrix.decompose(camera.position, camera.quaternion, camera.scale); controls.target.set(cam.target.x, cam.target.y, cam.target.z); } else { camera.position.x = 40; camera.position.y = 40; camera.position.z = 50; controls.target.set(0, 0, 0); } window.addEventListener( 'resize', onWindowResize, false ); } init3D(); function handle_recv_dynamic (r) { eval('physics = ' + r + ';'); update_dynamic_physics(); sleep(10) .then(() => ajax("GET", "/physics/dynamic/")) .then(handle_recv_dynamic); } (function init_dynamic_physics () { var colour = 0x4B5440; var material = new THREE.MeshLambertMaterial({color: colour, flatShading: true}); var meshes = {}; update_dynamic_physics = function () { var i, p, mesh; var to_del = {}; for (i in meshes) to_del[i] = true; for (i in physics) { p = physics[i]; mesh = meshes[p.id]; if (!mesh) { mesh = create_shapes(worldstate, 'Dynamic', p, material, layers.dynamic_collider); meshes[p.id] = mesh; } mesh.position.x = p.pos[0]; mesh.position.y = p.pos[1]; delete to_del[p.id]; } for (i in to_del) { mesh = meshes[i]; scene.remove(mesh); delete meshes[i]; } } })();

लगभग हर इकाई जिसमें हमारे भौतिक दुनिया में आंदोलन का तर्क है, एक ट्रांसफ़ॉर्म घटक है। सभी घटकों की सूची देखने के लिए, लिंक पर क्लिक करें WorldState Table Editor।

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

HTML टेबल को संपादित करते समय वास्तविक मैच में डेटा बदलना क्योंकि हम इस तालिका की एक विशेष लिंक खींचते हैं, जिसमें तालिका का नाम, फ़ील्ड और नया डेटा होता है:

 function handle_edit (id, table_name, field_name, value) { var data = table_name + "\n" + field_name + "\n" + id + "\n" + value; ajax("POST", tableset_name + "/edit/", data); }

गेम सर्वर वांछित URL की सदस्यता लेता है, तालिका के लिए अद्वितीय, उत्पन्न कोड के लिए धन्यवाद:

 public static void RegisterEditorHandlers(Action<string, Func<string, string, string>> addHandler, string path, Func<TableSet> ts) { addHandler(path + "/data/", (p, b) => EditorPackJson(ts())); addHandler(path + "/edit/", (p, b) => EditorUpdate(ts(), b)); addHandler(path + "/ins/", (p, b) => EditorInsert(ts(), b)); addHandler(path + "/del/", (p, b) => EditorDelete(ts(), b)); addHandler(path + "/create/", (p, b) => EditorCreateEntity(ts(), b)); }

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

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

*****

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

हम गेम सर्वर पर एक ब्राउज़र में एक स्व-लिखित ईसीएस को कैसे डिबग करते हैं

More articles: