ஒவ்வொருவருக்கும் அந்த ஒரு ஃபோல்டர் இருக்கும். பாதியிலேயே நிறுத்தப்பட்ட பயிற்சிகள் (tutorials), கைவிடப்பட்ட பக்கத் திட்டங்கள் (side projects), மற்றும் வாக்குறுதிகளை விட குறைவான விஷயங்களை மட்டுமே வழங்கும் README கோப்புகளால் நிரப்பப்பட்ட ஒரு ஃபோல்டர். அது நல்ல எண்ணங்களின் மயானம், அதிலிருந்து வெளியேறுவதற்கு ஒரே வழி, உண்மையில் வேலை செய்யும் ஏதோ ஒன்றை — எதுவாக இருந்தாலும் — வெளியிடுவதுதான்.
முடித்தெடுக்க வேண்டும் என்ற அந்தத் தாகம்தான் LIAR உருவாக்கத்திற்குக் காரணமாக அமைந்தது. இது ஒரு பிரவுசர் கேம், மிகவும் சிறியது மற்றும் சவாலானது, ஒரு 28KB HTML கோப்பிற்குள்ளேயே இது அடங்கிவிடும். எந்த Framework-களும் இல்லை. படக் கோப்புகள் (image files) இல்லை. ஒலித் தொகுப்புகள் (sound assets) இல்லை. வெறும் HTML5 Canvas, Web Audio API மற்றும் ஒரு குறும்புத்தனமான குணம் மட்டுமே உள்ளன.
அந்தத் தலைகீழ் பயிற்சி (The Anti-Tutorial)
பெரும்பாலான கற்றல் திட்டங்கள் (learning projects) அவை அளவுக்கு அதிகமாக விரிவடைவதால் மடிகின்றன. நீங்கள் ஒரு canvas tutorial-இல் தொடங்குவீர்கள், ஒரு movement script-ஐச் சேர்ப்பீர்கள், பிறகு ஒரு tile editor தேவை என்று முடிவு செய்வீர்கள், பிறகு ஒரு entity component system, பிறகு பதினொரு வினாடிகள் கம்பைல் (compile) ஆக எடுத்துக்கொள்ளும் ஒரு Webpack config. ஆறு வாரங்களுக்குப் பிறகு உங்களிடம் ஒரு build pipeline இருக்கும், ஆனால் கேம் இருக்காது.
LIAR அந்தத் தப்பிலிருந்து தப்பிக்கிறது. இது ஒரு எதிர்வினை விளையாட்டு (reaction game). ஒரு பட்டன் உங்களை TAP, HOLD, அல்லது DON''T செய்யச் சொல்லும். டைமர் முடிவதற்கு முன் நீங்கள் செயல்பட வேண்டும். ஆரம்பச் சுற்றுகள் நம்பிக்கையை உருவாக்குகின்றன. உரை TAP என்று சொல்லும்போது, நீங்கள் TAP செய்கிறீர்கள். உரை HOLD என்று சொல்லும்போது, உங்கள் விரலை அழுத்திப் பிடிக்கிறீர்கள். இது எளிமையானது, தாளத்துடன் கூடியது, கிட்டத்தட்ட தியானம் செய்வது போன்றது.
பிறகு ஆறாவது சுற்று வருகிறது.
துரோகத்தின் நுட்பங்கள் (The Mechanics of Betrayal)
ஆறாவது சுற்றைச் சுற்றி, கேம் பொய் சொல்லத் தொடங்குகிறது. திரையில் ஒரு கட்டளை மின்னுகிறது — ஒருவேளை ஆக்ரோஷமான, சிவப்பு நிறத்தில், நடுங்கும் TAP — மற்றும் வார்ம்-அப் (warm-up) பயிற்சியின் போது நீங்கள் வளர்த்தெடுத்த ஒவ்வொரு எதிர்வினையும் பட்டனை அழுத்த உங்களைச் சொல்லும். நீங்கள் அப்படிச் செய்தால், நீங்கள் தோற்றுவிடுவீர்கள். அந்தச் சிவப்பு நிற அதிர்வு ஒரு பிழை (glitch) அல்ல. அது ஒரு அறிகுறி. ஒரு நேர்மையான பொய்யன் உங்களுக்கு ஒரு குறிப்பைக் கொடுப்பான், இந்த கேம் உங்களுக்கு அதைத் துல்லியமாக வழங்குகிறது: ஏமாற்றுவதற்கான ஒரு காட்சி இலக்கணம் (visual grammar of deception).
இந்தத் தந்திரம் வேலை செய்கிறது, ஏனெனில் அதன் அடிப்படை நேர்மையானது. நிறமும் இயக்கமும் அர்த்தத்தைக் கொண்டுள்ளன என்பதை ஆரம்பச் சுற்றுகள் உங்களுக்குக் கற்பிக்கின்றன. வண்ணத் தொகுப்பு (palette) திடீரென மாறும்போது மற்றும் உரை நடுங்கும்போது, கேம் ஏமாற்றவில்லை. அது ஒரு சமிக்ஞையை (signal) வழங்குகிறது. உங்களிடம் தகவல் இருந்தது. நீங்கள் அதை வாசித்தீர்கள் அல்லது வாசிக்கவில்லை.
நீங்கள் தோற்கும்போது, கேம் உங்களை அவமானப்படுத்துகிறது. அந்தத் தாக்கம் திட்டமிடப்பட்டது. லீடர்போர்டு (leaderboard) மற்றும் தொடர்ச்சியான முன்னேற்றம் இல்லாத ஒரு மைக்ரோ-கேமில், அவமானமே மீண்டும் மீண்டும் விளையாடுவதற்கான ஊக்கமாகும். இது பின்னூட்டச் சுழற்சியை (feedback loop) மூடுகிறது. லேக் (lag) காரணமாகவோ அல்லது ஹிட்பாக்ஸ் (hitbox) சரியாக இல்லாததாலோ நீங்கள் தோற்கவில்லை. ஒரு நடுங்கும் சிவப்பு வார்த்தையை நீங்கள் நம்பியதால் நீங்கள் தோற்கிறீர்கள், அந்தத் தவறை நீங்கள் உணர்ந்து உட்கார வேண்டும் என்பதை கேம் உறுதி செய்கிறது.
28KB என்பது உண்மையில் எதைக் குறிக்கிறது
ஒரு 28KB HTML கோப்பிற்குள் உருவாக்குவதைத் தேர்ந்தெடுப்பது வெறும் புதுமை மட்டுமல்ல. இது கடினமான முடிவுகளை எடுக்கத் தூண்டும் ஒரு வடிவமைப்புத் தடையாகும் (design constraint). மறைந்து கொள்ள மெகாபைட் அளவிலான ஸ்பிரைட் ஷீட்கள் (sprite sheets) இல்லை. தூண்டப்பட ஆடியோ கோப்புகள் இல்லை. கண்ணுக்குத் தெரியும் அனைத்தும் HTML5 Canvas-இல் ஒவ்வொரு பிரேமாகவும் (frame-by-frame) வரையப்படுகின்றன. கேட்கக்கூடிய அனைத்தும் Web Audio oscillators-லிருந்து வருகின்றன.
நீங்கள் Web Audio API-யுடன் நேரடியாகப் பணியாற்றியதில்லை என்றால், அது என்னவென்று இங்கே காணலாம். ஒரு முன்கூட்டியே பதிவு செய்யப்பட்ட WAV அல்லது MP3-ஐப் பதிவிறக்குவதற்குப் பதிலாக, குறியீடு (code) ஒரு AudioContext-ஐ உருவாக்குகிறது, ஒரு oscillator node-ஐ இணைக்கிறது, ஒரு அலைவடிவத்தைத் (waveform) தேர்ந்தெடுக்கிறது — sine, square, sawtooth — மற்றும் ஒரு அதிர்வெண்ணை (frequency) அமைக்கிறது. சரியான உள்ளீட்டிற்கு ஒரு சிறிய பீப் சத்தம், தோல்விக்கு ஒரு கடுமையான பஸ் (buzz) சத்தம். அந்த ஒலிகள் பிரவுசரால் நிகழ்நேரத்தில் (real time) கணக்கிடப்படுகின்றன. அவை கோப்பு அளவில் எதையும் செலவழிக்காது மற்றும் எந்த வெளிப்புற நெட்வொர்க் கோரிக்கைகளையும் (network requests) சேர்க்காது.
இதே தர்க்கம் காட்சிகளுக்கும் பொருந்தும். Canvas உங்களுக்கு ஒரு உடனடித் தூரிகை பரப்பை (immediate-mode drawing surface) வழங்குகிறது. நீங்கள் செவ்வகத்தைத் துடைக்கிறீர்கள். உரையை நிரப்புகிறீர்கள். அதிர்வு விளைவிற்காக ஒரு transform அல்லது shadow blur-ஐ அமைக்கிறீர்கள். அங்கு virtual DOM diffing இல்லை, React reconciliation இல்லை, பிழைத்திருத்தம் (debug) செய்ய வேண்டிய dependency array இல்லை. பிரவுசர் குறியீட்டை இயக்குகிறது, பிக்சல்கள் (pixels) தோன்றுகின்றன. இவ்வளவு கவனம் செலுத்தப்பட்ட ஒரு கேமிற்கு, அந்த நேரடித் தன்மை ஒரு வசதியாகும், வரம்பல்ல.
பேலோடை (payload) 28KB-இல் வைத்திருப்பது, ஒரு மொபைல் பிரவுசரில், நிலையற்ற இணைப்பிலும் கூட கேம் கிட்டத்தட்ட உடனடியாகத் தொடங்குவதையும் குறிக்கிறது. இதை ஹோஸ்ட் (host) செய்ய மிகக் குறைந்த செலவே ஆகும். முழுமையான பயன்பாடு (application) பெரும்பாலான இணையதள ஃபேவிகான்களை விட (favicons) சிறியது. நீங்கள் ஒரு பகிரப்பட்ட இணைப்பு மூலம் விநியோகிக்கும்போது அல்லது ஒரு மன்றத்தில் (forum) இணைக்கும்போது இது முக்கியமானது. நிறுவுவதில் எந்தத் தடையும் இல்லை. நீங்கள் URL-ஐப் பார்வையிட்டால், அந்தப் பொய் தயாராக இருக்கும்.
நியாயமான ஏமாற்றுதல் (Fair Deception)
பொய் சொல்லும் நுட்பத்தில் உண்மையான நேரத்தைச் செலவிடுவது, கேம் வடிவமைப்பு பற்றிய ஒரு நுட்பமான உண்மையை வெளிப்படுத்துகிறது. நியாயமற்றது என்பது அது புரியக்கூடியதாக இருக்கும்போது மட்டுமே வேடிக்கையாக இருக்கும். எச்சரிக்கையின்றி வீரரைக் கொல்லும் ஒரு ரேண்டம் (random) பொறி மோசமான வடிவமைப்பு. அதிர்வுறும், நிறம் மாறும் மற்றும் ஏற்கனவே உருவாக்கப்பட்ட காட்சித் தாளத்தை உடைக்கும் ஒரு பொறி, ஒரு பதுங்கியிருந்து தாக்கும் தாக்குதலாகத் தோற்றமளிக்கும் புதிராகும்.
அந்தச் சிவப்பு நிற நடுங்கும் உரை பல நோக்கங்களுக்குப் பயன்படுகிறது. இது முதல் ஐந்து சுற்றுகளில் வீரர்கள் வளர்த்தெடுத்த வழக்கமான எதிர்வினையைத் தடுத்து நிறுத்துகிறது. இது ஒரு உணர்ச்சிகரமான தருணத்தை அறிமுகப்படுத்துகிறது — சந்தேகம், தயக்கம், பீதி — இது முன்னதாக ஒரு எதிர்வினைத் தேர்வாக (reflex test) இருந்தது. மேலும் மிக முக்கியமாக, இது தோல்வி உங்கள் பொறுப்பாக உணரச் செய்கிறது. நீங்கள் அந்தச் சிவப்பு கட்டளையைத் தட்டும்போது மற்றும் அவமானம் தோன்றும்போது, தவறு உங்களுடையது என்று உங்களுக்குத் தெரியும். கேம் உங்களுக்கு ஒரு அறிகுறியைக் கொடுத்தது. அதை வாசிக்க நீங்கள் தவறிவிட்டீர்கள்.
இது ஒரு மோசமான அடிக்கும் நேர்மையான சண்டைக்குமான வித்தியாசம். LIAR உங்கள் முகத்தில் அடிக்க விரும்புகிறது, ஆனால் அது அந்தத் தாக்குதலுக்கு முன்னரே தனது முழு பலத்தையும் வெளிப்படுத்துகிறது.
மெருகேற்றுவதை விட வெளியிடுவதே முக்கியம்
இந்த விளையாட்டு இன்னும் முழுமையடையாத நிலையில் உள்ளது. ஆசிரியரே அதை உங்களிடம் கூறுவார். இது அவருடைய முதல் முழுமையடைந்த விளையாட்டு, மேலும் வேலையை முடிப்பதற்கு எளிமை ஒரு விலையாக அமைந்தது. டெவலப்பர்கள் பெரும்பாலும் பயன்பாட்டிற்கு வராத அமைப்புகளைப் பற்றி வலைப்பதிவு செய்யும் ஒரு சூழலில், அந்த நேர்மை புத்துணர்ச்சி அளிக்கிறது. LIAR ஒரு நேரடி URL-இல் உள்ளது. நீங்கள் அதை இப்போதே விளையாடலாம். ஒரு monorepo-வை அவிழ்க்க வேண்டிய அவசியம் இன்றி, ஒரே ஒரு கோப்பில் அதன் மூலக் குறியீட்டை (source) நீங்கள் பார்க்கலாம்.
இதை முயற்சி செய்யத் துணிச்சல் உள்ளவர்களிடமிருந்து டெவலப்பர் இரண்டு விஷயங்களை அறிய விரும்புகிறார். முதலாவதாக, நீங்கள் எவ்வளவு காலம் உயிர்வாழ்கிறீர்கள்? இரண்டாவதாக, ஆறாவது சுற்றில் முதல் பொய் வரும்போது, அது நேர்மையாகத் தோன்றுகிறதா அல்லது மோசமானதாகத் தோன்றுகிறதா? இவைதான் கேட்க வேண்டிய சரியான கேள்விகள். அவர்கள் அந்தப் பொய்யை ஒரு பிழையாக (bug) கருதாமல், சரிசெய்யப்பட வேண்டிய ஒரு பொறிமுறையாக (mechanic) கருதுகிறார்கள்.
இதில் ஆர்வம் இருந்தால், Canvas drawing loop, Web Audio oscillators-ன் பின்னணியில் உள்ள தர்க்கம் (logic) மற்றும் பொய் சொல்லும் பொறிமுறை குறியீட்டில் (code) எவ்வாறு கட்டமைக்கப்பட்டுள்ளது என்பது குறித்த விரிவான வழிகாட்டியை எழுத அவர்கள் முன்வந்துள்ளனர். ஒரே ஒரு HTML கோப்பிற்குள் ஒரு முழு விளையாட்டைப் பார்ப்பது மிகவும் அரிதானது என்பதால், அந்த வழிகாட்டி பயிற்சிகளிலேயே சிக்கிக்கொண்டிருப்பவர்களுக்கு (tutorial purgatory) உண்மையிலேயே பயனுள்ளதாக இருக்கும்.
உண்மையான பாடம்
ஒரு விளையாட்டை உருவாக்க உங்களுக்கு ஒரு game engine தேவையில்லை. சொத்துக்களுக்கு (assets) ஒரு content delivery network-ஓ, இருபது பக்கங்கள் கொண்ட வடிவமைப்பு ஆவணமோ (design document), அல்லது ஒரு framework பராமரிப்பாளரின் அனுமதியோ தேவையில்லை. உங்களுக்கு ஒரு எல்லை தேவை — இங்கே, 28KB மற்றும் ஒரு தனி கோப்பு — மேலும் வேலையை முடிப்பதற்கான ஒரு காரணமும் தேவை. கட்டுப்பாடுகள் தெளிவைத் தருகின்றன. அதன் அடிப்படையிலான பொறிமுறை (mechanic) உறுதியாக இருக்கும்போது, ஆயிரம் இறக்குமதி செய்யப்பட்ட sprites-களை விட நடுங்கும் ஒரு சிவப்பு நிறச் சொல் அதிக நினைவில் நிற்கும்.
நீங்களே LIAR விளையாடிப் பார்க்க https://playliar.netlify.app/ என்ற முகவரிக்குச் செல்லவும்.
டெவலப்பரின் அசல் விளக்கம் மற்றும் மூலக் குறிப்புகளை (source context) 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 என்ற முகவரியில் படிக்கலாம்.