ईआरसी -1155 टोकन का उपयोग करके ब्लॉकचैन वीआर गेम: रिएक्ट 360 या यूनिटी?

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

जवाब तुरंत आया - स्मार्ट कॉन्ट्रैक्ट्स और नवीनतम Ethereum ERC1155 नेटवर्क टोकन मानक, विशेष रूप से गेमिंग / डिजिटल संपत्ति बनाने के लिए डिज़ाइन किया गया। ERC1155 एक टोकन है जो लोकप्रिय ERC20 और ERC721 की सर्वोत्तम विशेषताओं को जोड़ती है (तकनीकी विवरण गितुब भंडार के रीडमी में पाया जा सकता है )। एक क्लासिक स्थिति की कल्पना करें - आपने एक दुर्लभ और महंगी वस्तु या त्वचा को खटखटाया। इसे कैसे बेचा जाए ताकि आप खरीदार द्वारा धोखा न खाएं या आप स्वयं इस मद को दूर किए बिना अन्य लोगों के पैसे को स्वतंत्र रूप से लेने की क्षमता का अभाव है? सही उत्तर स्मार्ट कॉन्ट्रैक्ट है। और ERC1155 टोकन ठीक वही है जो आपको इस तरह की कार्यक्षमता को लागू करने की आवश्यकता है। एक आइटम की अपनी विशेषताएं हो सकती हैं - शक्ति, क्षति, स्थायित्व, संरक्षण, अतिरिक्त क्षति (ERC721 टोकन की विशेषता) और इसके मूल्य (ERC20 टोकन की विशेषता) के रूप में एक खोल में - क्या यह ध्वनि प्रेरणादायक नहीं है? सभी गेम अपनी डिजिटल संपत्ति को स्टोर, ट्रांसफर और बेचने के लिए सुरक्षित और आसान बन सकते हैं। आइए हम जिस खिलौने की कल्पना करते हैं उसके उदाहरण का उपयोग करके इस समस्या को हल करने का प्रयास करें।

हम काफी जल्दी अवधारणा के साथ आए - लोकप्रिय बोर्ड कार्ड गेम "मुंचकिन" का एक एनालॉग, वीआर ब्रह्मांड में स्थानांतरित किया गया, खेल के दौरान खटखटाए गए किसी भी आइटम, कवच और हथियारों के व्यापार के लिए स्मार्ट अनुबंधों के साथ। हमारे इंडी डेवलपर्स के लिए कार्यान्वयन प्रौद्योगिकी का विकल्प आसान नहीं था, लेकिन हम आपको इस अनुभव के बारे में अधिक बताना चाहते हैं।

रिएक्ट 360

चूंकि अधिकांश टीम को रिएक्ट पर व्यापक विकास का अनुभव था, इसलिए कार्य को हल करने के लिए रिएक्ट -३६० को आजमाने की इच्छा थी। उपकरण का वर्णन काफी कार्यात्मक लग रहा था, इसलिए हमने उसकी दिशा में एक विकल्प बनाया।

स्थापना और विवरण

React-360 स्थापित करना अपने CLI को npm के साथ स्थापित करने से शुरू होता है, जो आपको कमांड लाइन से एक प्रोजेक्ट शुरू करने और शुरू करने में जल्दी और आसानी से मदद करता है।

प्रोजेक्ट के आरंभीकरण के बाद, हमें एक तैयार-निर्मित प्रोजेक्ट टेम्प्लेट प्राप्त हुआ जिसमें दो मुख्य फाइलें हैं client.js और index.js, साथ ही static_assets फ़ोल्डर, जहां रेंडरिंग, index.html और अन्य फ़ाइलों के लिए सभी एसेट फाइलें संग्रहीत की जाती हैं।

प्रतिपादन

पहली फ़ाइल (client.js) में रेंडरिंग कोड होता है और मुख्य React360 वर्ग के साथ काम करता है। React360 में दो प्रकार की रेंडरिंग ऑब्जेक्ट्स हैं: renderToLocation, जो एक 3D ऑब्जेक्ट रेंडर करने के लिए ज़िम्मेदार है, और renderToSurface, जो एक 2D ऑब्जेक्ट रेंडर करने के लिए ज़िम्मेदार है। हमने कैमरे के लिए एक नियंत्रक भी परिभाषित किया, जो इसके व्यवहार का वर्णन करता है: हमारे मामले में, कुछ कीबोर्ड बटन दबाकर कैमरे की गति (मुख्य चरित्र के रूप में) का वर्णन किया गया है। फिर हम पूरे प्रोजेक्ट के लिए डिफ़ॉल्ट बैकग्राउंड सेट करते हैं और अंतिम पंक्ति में विंडो ऑब्जेक्ट में React360 लिखा है (जो कि ईमेल के लिए एक वैश्विक ऑब्जेक्ट है)।

इसके बाद, React360 से init पद्धति को index.html फ़ाइल में निम्नानुसार कहा जाता है:

दूसरी फ़ाइल में (index.js), क्लाइंट में रेंडर करने के लिए उनके आगे के उपयोग के उद्देश्य से, घटकों को एप्लिकेशन में पंजीकृत किया जाता है।

तो घटक (वस्तु) का प्रवाह प्रतिपादन इस तरह से निकलता है:

क) एक अलग फ़ाइल में निर्माण;
b) index.js में पंजीकरण;
c) client.js में रेंडरिंग।

स्थिति

अगले क्षण एक 3 डी विमान में एक वस्तु की स्थिति है। प्रतिक्रिया -३६० में, जब स्थिति, जैसा कि प्रतिपादन में है, ३ डी और २ डी वस्तुओं के बीच अंतर हैं। 3 डी वस्तुओं को दो तरीकों से तैनात किया जा सकता है।

1. प्रतिपादन करते समय स्थान।
2. वस्तु में ही रूपांतरण।

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

2 डी ऑब्जेक्ट्स को फ्लेक्स सिस्टम का उपयोग करके तैनात किया जाता है, जैसा कि रिएक्ट नेटिव में है, जो हमारे मामले में काफी असुविधाजनक था:

कैमरे के दाईं ओर स्थित बटन को स्थिति में लाने के लिए, आपको रिएक्ट नेटिव के रूप में एक व्यू बनाना होगा, और स्क्रीन के सबसे ऊपरी बिंदु से उस स्थान तक दूरी तय करनी चाहिए, जहां ऑब्जेक्ट होना चाहिए, और स्क्रीन के शीर्ष बिंदु से क्षेत्र की दूरी के अनुसार ऊंचाई। वस्तु कहां होनी चाहिए। कुछ शैलियों को सेट करना भी आवश्यक था ताकि आंतरिक सामग्री दृश्य के निचले दाएं बिंदु पर स्थित हो। नतीजतन, यह सब बोझिल और असुविधाजनक लगता है, ऐसी वस्तुओं को रखने के लिए एक ही अनुवाद का उपयोग करना आसान है, उन्हें 0 गहराई के साथ 3 डी ऑब्जेक्ट के रूप में प्रस्तुत करना।

वस्तुओं को आयात करें

अगला आइटम React-360 में 3D ऑब्जेक्ट का आयात है। और यहां, पहली नज़र में, सब कुछ सरल और स्पष्ट है। एक मानक मॉडल घटक है जिसमें एक सहारा स्रोत होता है जो .obj फ़ाइलों (ऑब्जेक्ट की फ़ाइल स्वयं) के पथ के JS ऑब्जेक्ट को स्वीकार करता है और .mtl (इस ऑब्जेक्ट की सामग्री फ़ाइल):

लेकिन यहां भी दिलचस्प नुकसान हुए। लब्बोलुआब यह था कि .mtl फ़ाइल में .tga प्रारूप में डिफ़ॉल्ट मानचित्र बनावट है और इसे विकसित करने वाले व्यक्ति की डिस्क पर पथ। हमें न केवल फ़ाइलों को मैन्युअल रूप से बदलना था, बल्कि उन्हें .png में भी बदलना था, क्योंकि .tga प्रारूप फ़ाइलों को ब्राउज़र में प्रदान नहीं किया गया था। .Png प्रारूप ने हमें बनावट को सही ढंग से प्रस्तुत करने की अनुमति दी है।

प्रकाश

चूंकि प्रकाश व्यवस्था को प्रलेखन में बिल्कुल भी वर्णित नहीं किया गया था, इसलिए मुझे लाइट्स के संबंध में प्रतिक्रिया -३६० स्रोत कोड में जाना चाहिए और वहां कुछ खोजना चाहिए, और फिर इस उदाहरण को देखना चाहिए कि इस चिड़ियाघर के साथ क्या और कैसे काम करना है। परीक्षण और त्रुटि से, हमने इसे समझ लिया, इसे एंबिएंटलाइट, स्पॉटलाइट और पॉइंटलाइट मॉडल पर लागू किया। उनकी स्थिति 3D वस्तुओं की तरह ही है, लेकिन एक कोण भी है:

प्रकाश वस्तु पर लागू नहीं होता है, लेकिन हम पीछे नहीं हटते हैं, और प्रतिक्रिया-360 रिपॉजिटरी में विभिन्न मुद्दों पर एक लंबी खोज और घूमने के बाद, हमें प्रॉपर लाइट को सही रखने की आवश्यकता हुई, और उसके बाद ही प्रकाश ने ऑब्जेक्ट पर कार्य करना शुरू किया।

प्रस्ताव

हमने मुख्य कैमरे को मुख्य खिलाड़ी के रूप में लिया है, जिसके साथ हम आंदोलन और क्रियाएं करते हैं। ऐसा करने के लिए, उन्होंने कैमरे के लिए नियंत्रक लिखा, जहां उन्होंने इंटरफ़ेस के मुख्य कार्य को आरंभीकृत किया:

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

निष्कर्ष

हालाँकि React-360 थ्री.जेएस और वेबजीएल के साथ काम करता है, यह इस तरह की समस्याओं को सुलझाने के लिए पूरी तरह से अनुपयुक्त है, इसके अलावा, यह शायद गेम देव के लिए नहीं था। React-360 3D प्रस्तुतियों, वस्तुओं की आभासी यात्राओं, पैनोरमा को देखने आदि के साथ एक उत्कृष्ट काम करता है।

लेकिन भले ही आप इस तकनीकी स्टैक में ऐसी चीजें करने का प्रयास करते हैं, आप खराब प्रलेखन के रूप में कठिनाई का सामना करेंगे, जो आपको एक छोटे और प्रतीत होने वाले सरल कार्य को हल करने में घंटों बिताने के लिए मजबूर करेगा।

     JS,   React,     JSX,       ( ), ,  ,     React,     React Native.   -    . 

एकता

सभी पीड़ा के बाद, हमने अपनी क्षमताओं के भीतर दूसरे उपकरण का उपयोग करने का निर्णय लिया। इस बार विकल्प एकता पर गिर गया, क्योंकि टीम में सी # डेवलपर्स हैं।

स्थापना और विवरण

स्थापना काफी सरल है - आधिकारिक साइट से वितरण किट को डाउनलोड और अनपैक करना। एक "लेकिन" है: एकता अभी तक केवल विंडोज और मैक (संस्करण 10 से) पर काम करती है। इसलिए, हमें उबंटू से मैक में स्थानांतरित करना पड़ा।

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

प्रतिपादन

चूंकि इंजन ही प्रतिपादन कर रहा है, आपको कुछ भी पंजीकृत करने की आवश्यकता नहीं है।

स्थिति

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

वस्तुओं को आयात करें

एक साधारण Drag'n'Drop, शुरू में उचित फ़ोल्डर में एसेट के अंदर, और फिर GUI फ़ील्ड पर एक समान ऑपरेशन। कोई कोड नहीं है।

प्रकाश

प्रकाश व्यवस्था के साथ काम करना पिछले पैराग्राफ की तरह सरल है। प्रोजेक्ट के उपयुक्त टैब में एक नई लाइटिंग का निर्माण होता है। दस्तावेज़ में सिस्टम को पर्याप्त रूप से वर्णित किया गया है।

प्रस्ताव

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

• वस्तु का चयन किया जाता है;
• घटक जोड़ें बटन दबाया जाता है;
• नई स्क्रिप्ट का चयन करता है;
• नाम लिखा है।

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

• प्रारंभ - घटकों को कॉन्फ़िगर करते समय उपयोग किया जाता है;
• अद्यतन - हर फ्रेम पर बुलाया।

प्रारंभ फ़ंक्शन में, हमने कर्सर को स्क्रीन के केंद्र में बंद कर दिया और हमारे घटक को क्लास की संबंधित संपत्ति में दर्ज किया, और शेष गुणों के लिए डिफ़ॉल्ट पैरामीटर भी घोषित किया।

अपडेट फ़ंक्शन में, हमने कर्सर के पीछे ऑब्जेक्ट के रोटेशन के तर्क के साथ-साथ क्लिक द्वारा ऑब्जेक्ट के आंदोलन को लिखा है:

निष्कर्ष

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