वेबकैम गेम्स: मैंने डायनासोर से भागने वाला गेम कैसे बनाया

मैं ऐसा रनिंग गेम बनाना चाहता था जिसमें कोई बटन दबाने को दौड़ना न माना जाए। खिलाड़ी रुके तो किरदार भी रुके। वह फिर से रफ़्तार पकड़े तो भागना आसान लगे। और अगर वह कैमरे के सामने बस हाथ हिला रहा हो, तो गेम को फ़र्क़ पता चल जाए।

यही आइडिया Dino Survival बना, एक ब्राउज़र गेम जिसमें आप टी-रेक्स से बचने के लिए एक ही जगह दौड़ते हैं। एक वाक्य में कहूँ तो आसान लगता है। पर इसे बनाने में एक कहीं मुश्किल सवाल हल करना पड़ा: वेबकैम चलते हुए शरीर को ऐसा कंट्रोलर कैसे बनाए जो ईमानदार लगे?

वेबकैम गेम्स को अलग तरह का कंट्रोलर क्यों चाहिए

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

शरीर कहीं ज़्यादा बिखरा हुआ है। लोगों की लंबाई, कमरे की जगह, कैमरे का कोण और दौड़ने का ढंग अलग-अलग होते हैं। घुटने फ़्रेम से नीचे ग़ायब हो सकते हैं। कपड़े कोई जोड़ ढक सकते हैं। कम रोशनी में खड़े रहने पर भी कोई लैंडमार्क काँपता दिख सकता है।

इसलिए मैं एक पोज़ को सीधे एक रफ़्तार से नहीं जोड़ सकता था। मुझे ऐसी पाइपलाइन चाहिए थी जो समय के साथ हरकत देखे, शोर को छाँटे और फिर भी इतनी जल्दी जवाब दे कि खिलाड़ी को जुड़ाव महसूस हो:

1. ब्राउज़र से कैमरे की अनुमति माँगना।
2. हर वीडियो फ़्रेम में शरीर के लैंडमार्क का अंदाज़ा लगाना।
3. बारी-बारी चलते पैरों और पूरे शरीर की हरकत को नापना।
4. हाल के क़दम प्रति मिनट को एक टिकाऊ गेम रफ़्तार में बदलना।
5. उस रफ़्तार से दौड़ने वाले को चलाना और डायनासोर से दूरी बदलना।

कैमरे की अनुमति ब्राउज़र MediaDevices.getUserMedia() से संभालता है। Dino Survival सिर्फ़ वीडियो माँगता है और सामने वाला कैमरा हो तो वही चुनता है। लाइव फ़्रेम फिर पोज़ मॉडल ब्राउज़र के अंदर ही प्रोसेस करता है।

पोज़ लैंडमार्क मिल जाने का मतलब दौड़ना पहचानना नहीं है

Dino Survival वीडियो मोड में MediaPipe Pose Landmarker इस्तेमाल करता है। मॉडल 33 बॉडी लैंडमार्क दे सकता है, पर ज़्यादा डेटा से गेम का कंट्रोलर अपने आप बेहतर नहीं हो जाता।

कैडेंस के लिए मैं एक छोटे समूह पर ध्यान देता हूँ: कंधे, कूल्हे, घुटने और टखने। कंधे और कूल्हे धड़ की मोटी-सी धुरी देते हैं। घुटने और टखने बताते हैं कि पैर उस धुरी के हिसाब से कैसे चल रहे हैं।

यह सापेक्ष नाप मायने रखती है। मैं सिर्फ़ यह नापता कि स्क्रीन पर घुटना कितना ऊँचा दिखा, तो तिरछा रखा फ़ोन या बीच से हटकर खड़ा खिलाड़ी नतीजा बिगाड़ देता। पैरों की हरकत को खिलाड़ी की अपनी धड़ वाली धुरी पर रखकर नापने से डिटेक्टर इस पर कम टिका रहता है कि कैमरा कहाँ लगा है।

गेम यह भी जाँचता है कि दोनों कूल्हे और दोनों घुटने दिख रहे हैं या नहीं। न दिखें तो अधूरे डेटा से चुपचाप कोई रफ़्तार गढ़ने के बजाय वह खिलाड़ी से पीछे हटने को कहता है। मोशन कंट्रोल गेम में सच बोलने वाला फ़ीडबैक इस दिखावे से बेहतर है कि इनपुट भरोसेमंद है।

बारी-बारी चलते पैरों से कैडेंस निकालना

एक जगह दौड़ने से एक दोहराता पैटर्न बनता है। एक घुटना उठता है, चोटी पर पहुँचता है और गिरता है। फिर दूसरा पैर वही करता है। डिटेक्टर घुटने और टखने की हरकत पर नज़र रखता है और इन्हीं बारी-बारी की चोटियों को ढूँढता है।

हर पैर के लिए मैं अनुकूल सीमाएँ रखता हूँ, क्योंकि कोई एक तय नंबर हर शरीर और हर कैमरे पर फ़िट नहीं बैठता। ज़्यादा लंबा खिलाड़ी दूर खड़े छोटे खिलाड़ी से स्क्रीन पर कहीं बड़ी हरकत बना सकता है। डिटेक्टर एक काम की स्थानीय रेंज सीख लेता है, और एक पक्की ऊपरी हद यह रोकती है कि यह ढलना हद से ज़्यादा ढीला न हो जाए।

एक सही चोटी के बाद वही पैर 130 मिलीसेकंड की छोटी रोक में चला जाता है। इससे घुटना उठने की चोटी के आसपास लैंडमार्क की थरथराहट दो-तीन काल्पनिक क़दम नहीं बन पाती। सही क़दम तीन सेकंड की सरकती विंडो में जाते हैं, जो नंबर को स्मूद करने के लिए काफ़ी लंबी है और मेहनत में असली बदलाव पकड़ने के लिए काफ़ी छोटी।

क़रीब 1.1 सेकंड तक कोई क़दम न आए तो कैडेंस झट से आराम पर लौट आता है। लंबे और धीमे घटते असर के बजाय मुझे यह सीधा रीसेट पसंद है। खिलाड़ी रुके तो गेम भी रुकना चाहिए।

हाथ हिलाने से फ़र्राटे को कैसे रोका

शुरुआती मोशन सिस्टम अक्सर फ़्रेम की हर हलचल को इनाम दे देते हैं। इससे सीधा शॉर्टकट निकल आता है: पैर टिकाए रखो और हाथ हिलाते रहो। कैमरा हिलने पर भी वह कसरत जैसा दिख जाता है।

Dino Survival कूल्हों पर टिकी दूसरी जाँच जोड़ता है। वह थोड़ी देर की विंडो में शरीर का असली ऊपर-नीचे उछलना ढूँढता है। कैडेंस तभी गिना जाता है जब बारी-बारी चलते पैरों का पैटर्न और यह बड़ी हरकत वाला सिग्नल दोनों मेल खाएँ।

यह किसी के दौड़ने के फ़ॉर्म को नंबर देने की कोशिश नहीं है। वह बस सबूत माँगता है कि निचला शरीर काम कर रहा है। अकेली बाँहों की हरकत से दरवाज़ा नहीं खुलता, और पोज़ अंदाज़े की छोटी-मोटी गड़बड़ी दौड़ने वाले को आगे नहीं बढ़ाती।

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

क़दम प्रति मिनट से डायनासोर के पीछा तक

कैडेंस डिटेक्टर क़दम प्रति मिनट देता है, पर गेम को लैब वाली माप नहीं चाहिए। उसे साफ़ और खेलने लायक़ सिग्नल चाहिए। इसलिए मैं नतीजे को मेहनत के तीन आसान दर्जों में बाँटता हूँ: क़रीब 70 क़दम प्रति मिनट पर जॉग, 120 पर दौड़ और 160 पर फ़र्राटा।

ये दर्जे एक सामान्य की हुई रफ़्तार बन जाते हैं। सर्वाइवल इंजन इसी रफ़्तार से खिलाड़ी को 50 यूनिट के बचाव लक्ष्य की ओर बढ़ाता है। उधर डायनासोर की अपनी रफ़्तार है, जो दौड़ के दौरान बढ़ती जाती है।

फ़ासला इन दोनों रफ़्तारों के फ़र्क़ से बदलता है। डायनासोर से तेज़ दौड़े तो जगह बनती है। ढील दी तो वह नज़दीक आने लगता है। जीप तक पहुँच गए तो बच निकले। फ़ासला शून्य हो गया तो पीछा ख़त्म।

इसी वजह से यह किसी आम डायनासोर रनिंग गेम से अलग लगता है। यहाँ डायनासोर दाँतों वाला टाइमर भर नहीं है। वह आपकी मौजूदा मेहनत की नज़र आने वाली व्याख्या है।

दुनिया तभी चलती है जब आप चलते हैं

रास्ता जंगल के फ़्रेमों की एक कड़ी से बना है। मैं इन फ़्रेमों को घड़ी के समय से नहीं, तय की गई कुल दूरी से चलाता हूँ। खिलाड़ी दौड़ना बंद करे तो माहौल जम जाता है। फिर से शुरू करे तो रास्ता दौड़ने वाले के नीचे सरकने लगता है।

डायनासोर का दिखता आकार और उसकी जगह फ़ासले से जुड़े हैं। जैसे-जैसे वह क़रीब आता है, स्क्रीन का ज़्यादा हिस्सा घेरता है। धूल, स्पीड लाइनें और रफ़्तार का डिस्प्ले भी यही बात कहते हैं। कई छोटे संकेत एक ही सवाल का जवाब देते हैं: क्या मैं बच रहा हूँ?

रेंडर लूप requestAnimationFrame() पर चलता है, जो ब्राउज़र से अगली रीपेंट से पहले एनिमेशन का काम करवाता है। मैं कॉलबैक के टाइमस्टैंप से बीता समय निकालता हूँ, ताकि हरकत समय पर टिकी रहे और यह मानकर न चली जाए कि हर डिवाइस पर प्रति सेकंड उतने ही फ़्रेम बनते हैं।

मैंने दौड़ने वाले को हर फ़्रेम में लाइव इंसान को काटकर सीन में बिठाने के बजाय पहले से बनाया हुआ रनर इस्तेमाल किया है। इससे मोबाइल डिवाइस पर विज़ुअल प्रोसेसिंग कम होती है और किरदार हर बार एक जैसा दिखता है। वेबकैम कंट्रोलर है, अंतिम आर्टवर्क नहीं।

कैलिब्रेशन गेम के डिज़ाइन का हिस्सा क्यों है

कैमरा सेटअप कोई तकनीकी स्क्रीन नहीं जिसे मैं खिलाड़ी से छिपा सकूँ। यही पहला लेवल है।

Dino Survival फ़्रेमिंग की गाइड दिखाता है और तब तक रुकता है जब तक ज़रूरी लैंडमार्क दिखने न लगें। कब पीछे हटना है यह समझाता है और पीछा शुरू होने से पहले छोटी उलटी गिनती देता है। यहीं वह क़रार बन जाता है: निचला शरीर फ़्रेम में रखिए, एक जगह दौड़िए, और गेम आपके साथ चलेगा।

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

Dino Survival बनाकर मैंने क्या सीखा

सबसे मुश्किल टी-रेक्स बनाना नहीं था। सबसे मुश्किल था तय करना कि क़दम किसे गिना जाए।

भरोसेमंद बॉडी कंट्रोलर के लिए कई मामूली जाँचें साथ काम करती हैं। लैंडमार्क बताते हैं कि शरीर कहाँ है। घुटने और टखने की बारी-बारी चोटियाँ कैडेंस सुझाती हैं। कूल्हों की हरकत पक्का करती है कि खिलाड़ी सचमुच दौड़ रहा है। सरकती विंडो नतीजे को स्मूद करती है। और जल्दी वाला आराम रीसेट रुकने को ईमानदार रखता है। फिर गेम इंजन उस सिग्नल को ऐसे फ़ासले में बदल देता है जो बिना किसी निर्देश-पुस्तिका के समझ आ जाए।

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

डिज़ाइन और रिसर्च वाली बात के लिए पढ़िए कि मुझे क्यों लगता है कि Dino Survival सही क़िस्म का एक्सरसाइज़ गेम है।

आप Dino Survival अपने ब्राउज़र में मुफ़्त खेल सकते हैं। डाउनलोड नहीं करना। यही वेबकैम पाइपलाइन ऊपरी शरीर की हरकत कैसे संभालती है, यह जानना हो तो पढ़िए कि मैंने Monster Punch को ऑनलाइन बॉक्सिंग गेम कैसे बनाया। तुरंत खुल जाने वाले और गेम्स के लिए मेरी बिना डाउनलोड वाले फ्री गेम्स की गाइड देखिए।