🤝 🏥 🕉️ PHDays III CTF: एक इनसाइड लुक (भाग 2) 🤗 🧗🏾 🚣

हम CTF प्रतियोगिताओं की तैयारी के बारे में अपनी कहानी जारी रखते हैं, जो पॉजिटिव हैक डेज़ फोरम के हिस्से के रूप में हुई। आज हम एक इंटरफ़ेस, प्रयोज्यता (प्रयोज्य) बनाने और प्रतियोगिताओं के पाठ्यक्रम के दृश्य विकसित करने के बारे में बात करेंगे।

पहला भाग

उपयोगकर्ता इंटरफ़ेस

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

UI एक वेब एप्लिकेशन था, जो MongoDB और AMQP-RPC के माध्यम से जूरी सिस्टम के साथ संचार करता था। एक आधार के रूप में, हमने बंडल पिरामिड + Nginx को चुना। अधिसूचना प्रणाली फ्लास्क पर लागू की गई थी।

UI आवश्यकताएं इस प्रकार थीं:

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

प्रयोज्य

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

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

वर्तमान खेल की घटनाओं को vk.com- शैली के पॉप-अप संदेशों के रूप में प्रदर्शित किया गया था। इसके अलावा, आप गेम की शुरुआत से इवेंट लॉग देख सकते हैं।

स्कोरबोर्ड इंटरफ़ेस विकास

कार्यों के साथ पृष्ठ का अंतिम संस्करण

विजुआलाइज़र

सीटीएफ विकास के पहले दिनों से, यह तय किया गया था कि गेमप्ले का दृश्य केवल आवश्यक है। सबसे पहले, यह संभव है कि PHD III फोरम के संदर्भ में कई बाहरी लोगों को आकर्षित किया जाए और हैकर प्रतियोगिताओं को एकीकृत किया जाए।

संकल्पना

शुरू करने के लिए, यह समझना आवश्यक था कि दर्शकों को कौन सी घटनाओं को दिखाया जाना चाहिए ताकि वे यह देखने में रुचि रखें कि क्या हो रहा था, और एक ही समय में, ताकि प्रक्रिया यथासंभव जानकारीपूर्ण हो।

घटनाओं को दो श्रेणियों में विभाजित किया गया था:

सेवा पर हमला। यह एक बहुत बड़ी संख्या (प्रति गेम 138,240 घटनाओं तक) में हो सकता है।
अन्य घटनाएँ। शायद ही कभी होता है - कार्य निर्णय (प्रति गेम 250 तक), बॉस को मारना (4 प्रति गेम), एक उपलब्धि प्राप्त करना (प्रति गेम 391 तक)

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

सभी घटनाओं का विश्लेषण करने के बाद, आविष्कारित किंवदंती और गेम मैकेनिक्स के साथ उनकी तुलना करते हुए, हमने एक कामकाजी विज़ुअलाइज़र अवधारणा विकसित की:

घटनाक्रम डी 'इरोमिम दुनिया के नक्शे (शीर्ष दृश्य) पर होते हैं।
प्रत्येक टीम का अपना महल होता है - एक ऐसा स्थान जहाँ टीम के नायक रहते हैं।
पांच खदानें महल के पास स्थित हैं, जहां टीमें संसाधन निकालती हैं।
प्रत्येक टीम का अपना उड़ने वाला प्राणी (ड्रैगन) है, जिसे सभी सक्रिय घटनाओं की कल्पना करने के लिए डिज़ाइन किया गया है।
मानचित्र के केंद्र में 25 घर हैं जो कार्य प्रदर्शित करते हैं।
घरों के अलावा सोने की तीन सामान्य खदानें भी हैं।

विज़ुअलाइज़र से डी'आर्इरिम मैप

घटना दृश्य:

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

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

सीमाओं का विस्तार

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

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

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

इंटरएक्टिव विज़ुअलाइज़र इंटरफ़ेस

विज़ुअलाइज़र में रेटिंग टीम

विज़ुअलाइज़र में टीम प्रोफाइल

आर्किटेक्चर

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

जूरी प्रणाली से सेवा प्राप्त करने वाले कार्यक्रम;
वेब एप्लिकेशन ग्राहकों को गेम इवेंट और गेम स्टेट लौटाता है;
खेल की घटनाओं को देखने वाले ग्राहक ;

विज़ुअलाइज़र वास्तुकला का योजनाबद्ध चित्रण

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

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

अंतिम लिंक विज़ुअलाइज़र का क्लाइंट है, एक एप्लिकेशन जो घटनाओं की एक सूची के लिए सर्वर से पूछताछ करता है और उपरोक्त अवधारणा के अनुसार प्राप्त आंकड़ों को प्रदर्शित करता है।

विकास उपकरण की पसंद

विज़ुअलाइज़र का सर्वर भाग (सेवा और वेब अनुप्रयोग दोनों) C # में .NET प्लेटफ़ॉर्म के लिए लिखा गया था। डेवलपर की वरीयताओं के कारण फंड को अधिक हद तक चुना गया था जो इस कार्य में शामिल थे। सी # काफी शक्तिशाली है और एक ही समय में सरल भाषा, अच्छी तरह से ऐसे अनुप्रयोगों को लागू करने के लिए अनुकूल है, इसलिए विकास जल्दी और बिना किसी समस्या के हो गया। DBMS MS SQL सर्वर का विकल्प C # टूल के साथ सहभागिता की आसानी के कारण भी था।

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

गेम मेकर एक ऐसा वातावरण है जो विशेष रूप से निर्मित मानचित्र संपादक, छवि संपादक और कई अन्य उपयोगी सुविधाओं के साथ गेम डिज़ाइन के लिए सिलवाया गया सी-जैसे जीएमएल प्रोग्रामिंग भाषा का उपयोग करता है। इसके अलावा, विंडोज, ओएस एक्स, लिनक्स (उबंटू), एचटीएमएल 5 (जावास्क्रिप्ट), आईओएस, एंड्रॉइड संस्करण 2.2 और उच्चतर, विंडोज फोन सहित विभिन्न प्लेटफार्मों के मशीन कोड में कंपाइलरों का एक पूरा सेट, जीएमएस के साथ आता है। अन्य इंजनों की तुलना में प्रदर्शन (एंड्रॉइड 2.3.5 के साथ एचटीसी डिजायर पर 25-30 एफपीएस) ने भी हमें प्रसन्न किया। केवल नकारात्मक यह है कि उत्पाद मुफ्त नहीं है, लेकिन लाइसेंस खरीदने में कोई समस्या नहीं थी।

नतीजतन, हर कोई सहमत था कि गेम मेकर हमारे कार्यों के लिए एकदम सही था, और विकास का चरण शुरू हुआ।

गेम मेकर में विज़ुअलाइज़र क्लाइंट डेवलपमेंट: स्टूडियो

डिज़ाइन

PHDays III के शुरू होने से डेढ़ महीने पहले विकास शुरू हुआ। लेकिन यह देखते हुए कि एप्लिकेशन को ऐप स्टोर और Google Play में मान्य किया जाना था, समय सीमा ठीक एक महीने है! दिन और रात, गर्मी और ठंड में काम चल गया। सभी 30 दिनों के दौरान, दो लोगों ने विज़ुअलाइज़र पर अथक परिश्रम किया। चूंकि सर्वर साइड कुछ मायनों में सिर्फ एक संदेश अनुवादक है, इसलिए इसके साथ व्यावहारिक रूप से कोई कठिनाई नहीं थी। हालाँकि, हमने ग्राहकों से बड़ी संख्या में अनुरोधों को गिना, इसलिए, कैशिंग लागू किया गया, और भेजे गए ट्रैफ़िक की मात्रा कम से कम कर दी गई।

क्लाइंट के साथ स्थिति अलग थी, क्योंकि एक असामान्य प्रोग्रामिंग भाषा का उपयोग अपनी स्वयं की एपीआई और अपने स्वयं के कानूनों के साथ किया गया था।

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

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

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

Google Play स्टोर पर विज़ुअलाइज़र पेज

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

निष्कर्ष

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

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

लेखक: slim_d0g blackzert muodov ki11obyte Asperka

PS खेल तैयारी प्रक्रिया (परीक्षण सहित) और प्रतियोगिता की पूरी कथा का विस्तृत विवरण PHDays की आधिकारिक वेबसाइट पर उपलब्ध है ।

PHDays III CTF: एक इनसाइड लुक (भाग 2)