10K के अलावा भाग लेने का हमारा अनुभव या 10 में 40 KB कोड को कैसे निचोड़ना है

इतना समय पहले नहीं है जब वे पहले से ही 10K के अलावा प्रतियोगिता के बारे में लिखते थे - 10K तक की कुल मात्रा के साथ सर्वश्रेष्ठ वेब अनुप्रयोग के लिए एक प्रतियोगिता, केवल ग्राहक तकनीकों का उपयोग करके बनाई गई: (HTML, CSS, जावास्क्रिप्ट, SVG, आदि)।







मैं इस प्रतियोगिता के लिए हमारे काम पर आपका ध्यान आकर्षित करना चाहता हूं, जो Private_face और मैंने शाम को दो सप्ताह के लिए किया था: "Fontanero" ( स्पेनिश प्लम्बर) नामक कालकोठरी-क्रॉलर की शैली में एक साहसिक खेल।

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

10,230 बाइट्स के कुल वजन के साथ तीन फाइलों में यह सब विविधता। यदि आपको कभी मेजेनाइन पर 1.44MB डिस्क मिलती है, तो आप इस तरह के 144 खेल रिकॉर्ड कर सकते हैं।

हम आवेदन (साहसिक), शैली (नेटहॉक की शैली में कालकोठरी क्रॉलर) और सेटिंग (प्लम्बर पाइप को ठीक करने के लिए नीचे जाता है और नरक में जाता है) की प्रकृति पर फैसला करने के बाद, यह पता लगाने का समय है कि क्या हम यह महसूस कर सकते हैं कि हम क्या योजना बनाते हैं और उसी समय 10K के भीतर रखें।

ज़िप

कोड (मानचित्र जनरेटर और गेम फ़ील्ड टेम्पलेट) के पहले ड्राफ्ट ने दिखाया कि गेम के एक तिहाई के लिए भी 10K पर्याप्त नहीं है। यह आवश्यक था कि या तो सब कुछ छोड़ दिया जाए या किसी तरह उपलब्ध स्थान को बढ़ाया जाए।



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



प्रौद्योगिकी का अध्ययन करने के बाद, हमने पैलेट पिंग से कैनवस के माध्यम से मनमाने कोड को लोड करने की क्षमता की जांच की, वर्णों को एक रंग घटकों में एन्कोडिंग। IE 9 पूर्वावलोकन (जो अब कैनवास का भी समर्थन करता है) सहित सभी आवश्यक ब्राउज़रों में परीक्षण सफलतापूर्वक पूरा कर लिया गया था। यह एक सफलता थी। आठ-बिट पैलेट 256 रंगों को स्टोर कर सकता है, लेकिन ऑबफ्यूज़र के बाद कोड 32-94, और \ n (10) के साथ केवल वर्ण हैं। 256 के बजाय 64 मानों में उन्हें एन्कोड करना, महत्वपूर्ण बचत भी लाया (अजीब, लेकिन पींग को नहीं पता कि पैलेट को कैसे संपीड़ित करना है)।



इस प्रकार, हमारे भविष्य के एप्लिकेशन की संरचना स्पष्ट हो गई: एक HTML लोडर पेज जो स्क्रिप्ट के साथ PNG से जावास्क्रिप्ट को पुनर्स्थापित करता है, जिसमें सभी गेम तर्क शामिल हैं, और गतिशील रूप से सभी आवश्यक HTML और CSS भी बनाता है। परियोजना के अंतिम संस्करण में, लोडर ने 850 बाइट्स पर कब्जा कर लिया, यहां तक ​​कि अलर्ट ("कोई कैनवास") सहित; (आप एक सफेद स्क्रीन के सामने पुराने ब्राउज़रों के उपयोगकर्ताओं को नहीं छोड़ सकते)।

कहानियो

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



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



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



हालांकि, उन्नत मोड में gcc का उपयोग करते समय, अभी भी अनुकूलन के लिए जगह है। सबसे पहले, जीसीसी मानक के साथ खेतों का नाम बदलने से डरता है, उनकी राय में, नाम: left, right, top, bottom, name, type, width, height



आदि, इसलिए, हमने ऐसे नामों का नाम बदलकर जीसीसी चलाने से पहले अपना कोड प्रीप्रोसेस किया है। दूसरे, ओब्यूशन के बाद, कोड में कई बार दोहराए जाने वाले शब्द "फ़ंक्शन" और "यह" होते हैं। पैसे बचाने के लिए, हमने उनके @ और 'अक्षर बदल दिए। उसी समय, लोडर रिवर्स रिप्लेसमेंट द्वारा थोड़ा बढ़ गया: replace(/@/g, 'function').replace(/\`/g. 'this')



और इस तरह के प्रोसेसिंग के बाद कोड बहुत राक्षसी लग रहा था:

;`.g=n;`.K=`.v=o;`.F=@(d){var c=`.e;



।

लेकिन यह इसके लायक था: सामान्य तौर पर, प्रत्येक प्रतिस्थापन के साथ, 50 का एक बाइट प्राप्त किया गया था।



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



जब हमने खेल की उपस्थिति निर्धारित की, तो हमारे विचारों ने निजी_विभाजन को विचलन दिया । मैंने एक क्लासिक 2D दृश्य सुझाया:





Vova-2 ने इस तरह एक आइसोमेट्री पर जोर दिया:





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

जुनून isometric

निजी_ प्रस्ताव :

आइसोमेट्री का कार्यान्वयन निम्नानुसार होना चाहिए था: उन पर आरोपित बनावट वाले आयताकार ब्लॉकों को सीएसएस परिवर्तनों को तिरछा और स्केल द्वारा एक आइसोमेट्रिक प्रक्षेपण में स्थानांतरित किया गया था, जिसके बाद वे बिल्कुल सही जगह पर तैनात थे।



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

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



कुछ समय बाद, प्रोटोटाइप तैयार हो गया। रेंडर काफी कॉम्पैक्ट निकला (सभी ड्राइंग सीएसएस में प्रस्तुत किया गया था, जावास्क्रिप्ट केवल तैनात ब्लॉक)

और एक बहुत अच्छी तस्वीर तैयार की (हालाँकि यह फ़ायरफ़ॉक्स 3.6 में काफी धीमी हो गई):





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

सामान्य तौर पर, आइसोमेट्री को छोड़ना पड़ा।

मूल बातें वापस

3 डी संस्करण की विफलता के बाद, हमने एक साधारण टाइल संस्करण पर लौटने का फैसला किया।



सभी टाइलों को सामान्य GIMP में खींचा गया और 4-बिट (16 रंगों) पैलेट के साथ PNG स्प्राइट में मिलाया गया, जिसके बाद बाद में pbrcrush द्वारा -brute स्विच के साथ पिन किया गया।



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



2D में संक्रमण के लिए एक अच्छा पक्ष था: आइसोमेट्रिक संस्करण की तुलना में रेंडरिंग कोड की कुल मात्रा काफी कम हो गई थी, और हमने अंततः गेम की प्रक्रिया में एक पाइप मरम्मत मिनी-गेम को जोड़ने के लिए मुक्त स्थान का उपयोग किया।

उपसंहार

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



कथा के बाहर कई अन्य कार्य हैं जिन्हें हमें इस परियोजना पर काम के दौरान हल करना था। जैसे, उदाहरण के लिए, कनेक्शन की जांच के साथ एक स्तर उत्पन्न करने के लिए एक कॉम्पैक्ट एल्गोरिथ्म, चलती राक्षसों के लिए एक अल्ट्रा-कॉम्पैक्ट एल्गोरिथ्म जो गलियारों के साथ चल सकता था और बहुत गूंगा नहीं लगेगा।



और इस विषय के अंत में, मैं एक बार फिर उन अनुकूलन की एक छोटी सूची दूंगा, जिन्होंने हमें 10K में लगभग 40K कोड की अनुमति दी।

सीएसएस अनुकूलन:

1. एक स्ट्रिंग में YUI कंप्रेसर द्वारा सीएसएस पैकिंग, स्रोत .js फ़ाइल में परिणाम जोड़ने।
2. प्रत्येक नियम ब्लॉक के अंत में वैकल्पिक अर्धविराम हटाएँ।
3. जेएस (यानी, एक संग्रह ब्लॉक में सीएसएस + जेएस पैकेजिंग) के लिए परिणामी स्टाइलशीट डालें।

जेएस अनुकूलन:

1. आक्षेप से पहले: फ़ील्ड को बाएँ, दाएँ, नाम, प्रकार, आदि नामों से प्रतिस्थापित करना दूसरों के लिए (चूंकि जीसीसी उन्हें उन्नत मोड में भी नाम नहीं देता है)।
2. उन्नत मोड में GCC कोड का विरोध करना।
3. आक्षेप के बाद: फ़ंक्शन और इस कीवर्ड को एकल-अक्षर संक्षिप्तीकरण ('@' और '' ') के साथ बदलना।
4. प्रोटॉन कंटेनर एनसेप्सुलेशन पीएनजी पैकेजिंग।

छवि अनुकूलन:

1. सभी छवियों को एक स्प्राइट में संग्रहीत किया गया था।
2. पैलेट में रंगों की संख्या 16 तक सीमित थी।
3. किसी भी परिवर्तन के बाद, फ़ाइल को सबसे अच्छा संपीड़न सुनिश्चित करने के लिए -brute विकल्प के साथ pngcrush द्वारा पिन किया गया था।

छोटा अपडेट: आज, लोकप्रिय मांग के अनुसार, हमने ओपेरा में मिनी-गेम का प्रदर्शन तय किया, हालांकि यह प्रतियोगिता की आवश्यकताओं में नहीं है। 10K के अलावा रास्ते पर पैच।



आपका ध्यान देने के लिए बहुत-बहुत धन्यवाद, यदि आप प्रतियोगिता के पृष्ठ पर हमारे खेल को रेट करते हैं तो हमें बहुत खुशी होगी।

PS पर क्लिक करें, जारी रखा।

PPS प्रतियोगिता समाप्त हो गई है, आप सभी को धन्यवाद!