ब्राउज़र गेम विकसित करने के लिए प्रौद्योगिकी का चयन

कार्य विवरण

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

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

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

ब्राउज़र प्लेटफ़ॉर्म की सूची जिसका हमें समर्थन करना चाहिए:

• एक्सप्लोरर 9+
• फ़ायरफ़ॉक्स 3.6+
• ओपेरा
• क्रोम
• सफारी
• आईओएस मोबाइलसफरी
• WebKit पर Android ब्राउज़र

साथ ही, डिजाइनर के साथ बातचीत की एक सुविधाजनक प्रक्रिया बनाना आवश्यक है।

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

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

खोज शुरू होती है

प्रारंभ में, एसवीजी को एक उच्च-स्तरीय ग्राफिक भाषा के रूप में परीक्षण किया गया था । इसके निम्नलिखित फायदे हैं:

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

इस तरह के लाभों की एक सूची के साथ, किसी को लगता है कि तकनीक एकदम सही है। हालाँकि, परीक्षण के दौरान, निम्नलिखित नुकसान दिखाई दिए:

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

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

• कैनवास एक साधारण मानक है, और परिणामस्वरूप आधुनिक ब्राउज़रों पर सार्वभौमिक रूप से समर्थित है।
• प्रसंस्करण अमूर्तता का एक अतिरिक्त स्तर प्रदान करता है, जो संभव बनाता है, उदाहरण के लिए, एसवीजी आयात करने के लिए।
• कैनवास कैनवास पर पिक्सेल नियंत्रण द्वारा पिक्सेल देता है।

कैनवस / प्रोसेसिंग में पहले परीक्षण दृश्य के कार्यान्वयन से पता चला है कि कई मूल एसवीजी फ़ंक्शन गायब हैं, और उन्हें हाथ से समाप्त करना पड़ा। उदाहरण के लिए:

• वस्तु का प्रक्षेपवक्र
• माउस क्रियाओं के लिए वस्तुओं की प्रतिक्रिया
• मॉर्फिंग रूप, एल्गोरिदम को लागू करना कठिन होने के कारण, स्प्राइट एनीमेशन के समकक्ष स्थानांतरित किया गया था, और स्टेप-बाय-स्टेप एनीमेशन खुद इनस्केप एडिटर में लागू किया गया था।

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

डेमो को ऑप्टिमाइज़ करने का प्रयास किया गया (बैकग्राउंड का फ्रेम-बाय-फ्रेम रिवर्डिंग रद्द कर दिया गया, स्क्रीन पर ऑब्जेक्ट्स की संख्या कम हो गई, ऑब्जेक्ट्स की बनावट रद्द कर दी गई)। लेकिन परिणाम फिर भी असंतोषजनक रहा।

निर्णय

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

इन उपकरणों पर, देशी ग्राफिक्स त्वरण का उपयोग करके केवल तेज ग्राफिक्स संभव हैं। और MobileSafari में, यह सिर्फ HTML ऑब्जेक्ट मॉडल (DOM) है।

यह इस सोच के कारण था कि इस तथ्य के कारण कि तालिका के ब्लैक जैक डेमो को फिर से तैयार किया गया था , इस बार HTML और CSS3 का उपयोग कर। साउंड भी जोड़ा गया था और कुछ पारदर्शिता प्रभाव ... और यह काम किया! संक्रमण के तुरंत बाद, MobileSafari पर सुधार में सुधार हुआ।
अतिरिक्त पढ़ने और विशिष्ट अनुकूलन के बाद , गति को और भी अधिक बढ़ा दिया गया था। यह पता चला है कि iOS 4.x में MobileSafari केवल आंशिक रूप से त्वरित है, और आपको इस ब्राउज़र से सब कुछ निचोड़ने के लिए DOM तक पहुंचने की विधि को सावधानीपूर्वक चुनने की आवश्यकता है।

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

इस तकनीक की पसंद, सामान्य प्लेटफ़ॉर्म डिनॉमिनेटर द्वारा तय की गई, जिसने हमें डिज़ाइनर के स्रोत कोड से ग्राफिक्स के प्रसंस्करण और संयोजन की हमारी प्रक्रिया को एक ही प्रारूप में डिबग कर दिया। लेकिन उस समय के बारे में अधिक ..

स्रोत कोड लिंक

इस पाठ में सभी कोड उदाहरण लेखक के जीथब खाते से डाउनलोड और देखे जा सकते हैं:

• प्रारंभिक एसवीजी डेमो
• प्रारंभिक कैनवास / प्रसंस्करण डेमो
• ब्लैकजैक वॉलपेपर, प्रोसेसिंग (टेबल। Html) और CSS3 (टेबल 2.html) का डेमो