हर किसी के पास वह फोल्डर होता है। वह फोल्डर जो आधे-अधूरे ट्यूटोरियल, छोड़े हुए साइड प्रोजेक्ट्स और ऐसे README फाइलों से भरा होता है जो किए जाने वाले वादों से कहीं ज़्यादा बड़े दावे करते हैं। यह नेक इरादों का कब्रिस्तान है, और इससे बाहर निकलने का एकमात्र तरीका कुछ ऐसा बनाना है — कुछ भी — जो वास्तव में काम करे।
काम पूरा करने की वही बेचैनी LIAR के निर्माण का कारण बनी, एक ऐसा ब्राउज़र गेम जो इतना छोटा और इतना कठोर है कि वह एक सिंगल 28KB HTML फ़ाइल के भीतर समा जाता है। कोई फ्रेमवर्क नहीं। कोई इमेज फ़ाइलें नहीं। कोई साउंड एसेट्स नहीं। बस रॉ HTML5 Canvas, Web Audio API, और एक तीखा अंदाज़।
द एंटी-ट्यूटोरियल
ज़्यादातर लर्निंग प्रोजेक्ट्स इसलिए दम तोड़ देते हैं क्योंकि वे बहुत बड़े हो जाते हैं। आप एक canvas ट्यूटोरियल से शुरू करते हैं, फिर एक मूवमेंट स्क्रिप्ट जोड़ते हैं, फिर तय करते हैं कि आपको एक tile editor चाहिए, फिर एक entity component system, और फिर एक Webpack config जिसे कंपाइल होने में ग्यारह सेकंड लगते हैं। छह हफ्ते बाद आपके पास एक build pipeline तो होती है, लेकिन गेम नहीं।
LIAR उस जाल से बचता है। यह एक रिएक्शन गेम है। एक बटन आपको TAP, HOLD, या DON'T करने को कहता है। टाइमर खत्म होने से पहले आपको कार्य करना होता है। शुरुआती राउंड्स भरोसा कायम करते हैं। टेक्स्ट कहता है TAP, तो आप टैप करते हैं। टेक्स्ट कहता है HOLD, तो आप अपनी उंगली दबाकर रखते हैं। यह सरल, लयबद्ध और लगभग ध्यानपूर्ण है।
फिर छठा राउंड आता है।
धोखे के मैकेनिक्स
छठे राउंड के आसपास, गेम झूठ बोलना शुरू कर देता है। स्क्रीन पर एक कमांड चमकता है — शायद एक हिंसक, लाल, हिलता हुआ TAP — और वॉर्म-अप के दौरान आपने जो भी रिफ्लेक्स बनाए थे, वे आपको बटन दबाने के लिए चिल्लाते हैं। अगर आप ऐसा करते हैं, तो आप हार जाते हैं। वह लाल कंपन कोई ग्लिच नहीं है। यह एक संकेत (tell) है। एक ईमानदार झूठा आपको एक सुराग देता है, और यह गेम आपको बिल्कुल वही देता है: धोखे की एक विजुअल ग्रामर।
यह ट्रिक इसलिए काम करती है क्योंकि इसकी बुनियाद ईमानदार है। शुरुआती राउंड्स आपको सिखाते हैं कि रंग और गति का एक अर्थ होता है। जब पैलेट अचानक बदल जाता है और टेक्स्ट कांपने लगता है, तो गेम चीटिंग नहीं कर रहा होता। वह संकेत दे रहा होता है। जानकारी आपके पास थी। या तो आपने उसे पढ़ा या नहीं।
जब आप असफल होते हैं, तो गेम आपका अपमान करता है। वह चुभन जानबूझकर दी जाती है। बिना लीडरबोर्ड और बिना किसी निरंतर प्रगति (persistent progression) वाले एक माइक्रो-गेम में, अपमान ही बार-बार खेलने की प्रेरणा (replayability) है। यह फीडबैक लूप को पूरा करता है। आप लैग के कारण या किसी हिटबॉक्स के सही न होने के कारण नहीं हारते। आप इसलिए हारते हैं क्योंकि आपने एक कांपते हुए लाल शब्द पर भरोसा किया, और गेम यह सुनिश्चित करता है कि आप उस गलती को महसूस करें।
28KB का वास्तव में क्या अर्थ है
एक सिंगल 28KB HTML फ़ाइल के भीतर निर्माण करने का निर्णय केवल एक नवीनता नहीं है। यह एक डिज़ाइन बाधा (constraint) है जो कठिन निर्णय लेने के लिए मजबूर करती है। छिपने के लिए आपके पास मेगाबाइट्स की स्प्राइट शीट्स नहीं हैं। ट्रिगर करने के लिए कोई ऑडियो फ़ाइलें नहीं हैं। जो कुछ भी दिखाई देता है, उसे HTML5 Canvas पर फ्रेम-दर-फ्रेम बनाया जाता है। जो कुछ भी सुनाई देता है, वह Web Audio oscillators से आता है।
यदि आपने सीधे Web Audio API के साथ काम नहीं किया है, तो इसमें यह शामिल है। पहले से रिकॉर्ड किए गए WAV या MP3 को लोड करने के बजाय, कोड एक AudioContext बनाता है, एक oscillator node जोड़ता है, एक वेवफॉर्म — sine, square, sawtooth — चुनता है और एक फ्रीक्वेंसी सेट करता है। सही इनपुट के लिए एक छोटी बीप, विफलता के लिए एक कर्कश बज़। वे टोन ब्राउज़र द्वारा रियल टाइम में कंप्यूट की जाती हैं। उनका फ़ाइल साइज़ में कोई खर्च नहीं होता और वे कोई बाहरी नेटवर्क रिक्वेस्ट भी नहीं जोड़ती हैं।
यही तर्क विजुअल्स पर भी लागू होता है। Canvas आपको एक immediate-mode drawing surface देता है। आप रेक्टेंगल को साफ़ करते हैं। आप टेक्स्ट भरते हैं। आप शेक इफेक्ट के लिए ट्रांसफॉर्म या शैडो ब्लर सेट करते हैं। यहाँ कोई virtual DOM diffing नहीं है, कोई React reconciliation नहीं है, और डिबग करने के लिए कोई dependency array नहीं है। ब्राउज़र कोड चलाता है, और पिक्सेल दिखाई देने लगते हैं। इस तरह के केंद्रित गेम के लिए, वह सीधापन एक विशेषता है, कोई सीमा नहीं।
पेयलोड को 28KB पर रखने का मतलब यह भी है कि गेम मोबाइल ब्राउज़र पर लगभग तुरंत लोड हो जाता है, यहाँ तक कि खराब कनेक्शन पर भी। इसे होस्ट करने में लगभग कुछ भी खर्च नहीं होता। पूरा एप्लिकेशन अधिकांश वेबसाइट favicons से भी छोटा है। यदि आप इसे किसी साझा लिंक के माध्यम से वितरित कर रहे हैं या किसी फ़ोरम पर एम्बेड कर रहे हैं, तो यह मायने रखता है। इसमें इंस्टॉलेशन का कोई झंझट नहीं है। आप URL पर जाते हैं, और झूठ तैयार है।
निष्पक्ष धोखा
झूठ बोलने वाले मैकेनिक पर वास्तविक समय बिताने से गेम डिज़ाइन के बारे में एक सूक्ष्म सत्य का पता चलता है। अन्याय केवल तभी मज़ेदार होता है जब वह समझने योग्य हो। बिना चेतावनी के खिलाड़ी को मार देने वाला एक रैंडम ट्रैप खराब डिज़ाइन है। एक ट्रैप जो कंपन करता है, रंग बदलता है, और स्थापित विजुअल रिदम को तोड़ता है, वह एक घात (ambush) के रूप में तैयार किया गया पहेली है।
लाल कांपता हुआ टेक्स्ट कई उद्देश्यों को पूरा करता है। यह उन आदतन प्रतिक्रियाओं को ओवरराइड करता है जो खिलाड़ियों ने पहले पांच राउंड में विकसित की थीं। यह पहले जो रिफ्लेक्स टेस्ट था, उसमें एक भावनात्मक मोड़ — संदेह, हिचकिचाहट, घबराहट — पेश करता है। और सबसे महत्वपूर्ण बात यह है कि यह विफलता को 'अपनी गलती' जैसा महसूस कराता है। जब आप उस लाल कमांड को टैप करते हैं और अपमान दिखाई देता है, तो आप जानते हैं कि गलती आपकी है। गेम ने आपको एक संकेत दिया था। आप उसे पढ़ने में विफल रहे।
यह एक अनुचित प्रहार और एक निष्पक्ष लड़ाई के बीच का अंतर है। LIAR आपके चेहरे पर मुक्का मारना चाहता है, लेकिन यह पहले अपने पूरे ज़ोर के साथ वार करता है।
निखारने से ज़्यादा रिलीज़ करने पर ज़ोर
यह गेम अभी कच्चा है। लेखक खुद आपसे यह कहेंगे। यह उनका पहला पूरा किया गया गेम है, और इसे पूरा करने की कीमत सादगी थी। उस इकोसिस्टम में यह ईमानदारी ताज़गी भरी है जहाँ डेवलपर्स अक्सर उन सिस्टम्स के बारे में ब्लॉग लिखते हैं जो कभी प्रोडक्शन तक नहीं पहुँच पाते। LIAR एक लाइव URL पर मौजूद है। आप इसे अभी खेल सकते हैं। आप बिना किसी मोनोरेपो को सुलझाए एक ही फ़ाइल में इसका सोर्स देख सकते हैं।
डेवलपर उन लोगों से दो चीज़ें जानना चाहता है जो इसे आज़माने की हिम्मत रखते हैं। पहला, आप कितनी देर तक जीवित रहते हैं? दूसरा, जब छठे राउंड में पहला झूठ सामने आता है, तो क्या वह निष्पक्ष लगता है, या अनुचित? ये पूछने के लिए सही सवाल हैं। वे झूठ को एक बग के रूप में नहीं, बल्कि एक ऐसे मैकेनिक के रूप में देखते हैं जिसे ट्यूनिंग की ज़रूरत है।
यदि रुचि है, तो उन्होंने Canvas drawing loop, Web Audio oscillators के पीछे के लॉजिक, और कोड में झूठ बोलने वाला मैकेनिक ठीक कैसे संरचित है, इस पर एक विस्तृत गाइड लिखने की पेशकश की है। यह देखते हुए कि एक ही HTML फ़ाइल के अंदर पूरा गेम देखना कितना दुर्लभ है, वह गाइड ट्यूटोरियल के चक्रव्यूह में फंसे किसी भी व्यक्ति के लिए वास्तव में उपयोगी होगी।
असली सीख
गेम बनाने के लिए आपको गेम इंजन की ज़रूरत नहीं है। आपको एसेट्स के लिए content delivery network, या बीस पन्नों का डिज़ाइन डॉक्यूमेंट, या किसी फ्रेमवर्क मेंटेनर की अनुमति की आवश्यकता नहीं है। आपको एक सीमा की आवश्यकता है — यहाँ, 28KB और एक सिंगल फ़ाइल — और इसे पूरा करने का एक कारण चाहिए। सीमाएँ स्पष्टता लाती हैं। जब बुनियादी मैकेनिक मज़बूत हो, तो एक कांपता हुआ लाल शब्द हज़ारों इम्पोर्टेड स्प्राइट्स की तुलना में अधिक यादगार होता है।
खुद LIAR को यहाँ खेलें: https://playliar.netlify.app/.
आप मूल डेवलपर ब्रेकडाउन और सोर्स संदर्भ यहाँ पढ़ सकते हैं: https://dev.to/shabbir_sesaifee_8fdc587/i-built-a-game-that-lies-to-you-in-a-single-28kb-html-file-no-framework-no-assets-4hnh.