🚠 🚁 👨🏽‍🏭 मैंने Recycle कैसे बनाया! वी.आर. ⚡️ 🚰 🍿

पिछले लेख में, हमने अभ्यास में ढांचे की बुनियादी अवधारणाओं को आज़माने के लिए ए-फ्रेम में एक मूल दृश्य बनाने की कोशिश की। इस लेख में, मैं A- फ्रेम - रीसायकल पर एक गेम बनाने में अपने अनुभव को साझा करना चाहूंगा! वी.आर.। परियोजना भंडार निम्नलिखित लिंक पर उपलब्ध है।

पुनर्चक्रण?

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

फ्रेमवर्क चयन

खेल पर काम की शुरुआत के समय, मुझे केवल 2 अधिक या कम गंभीर रूपरेखाओं के बारे में पता था: रिएक्ट 360, ए-फ्रेम। जाहिर है, ए-फ्रेम खेल बनाने के लिए सबसे उपयुक्त था। हां, अब मुझे पता है कि अभी भी एक PlayCanvas गेम इंजन है जो VR का समर्थन करता है, लेकिन यह बहुत देर हो चुकी है। इसके अलावा, यह पता चला है कि ए-फ्रेम गेम बनाने के लिए भी खराब नहीं है।

कहाँ से शुरू करें?

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

संरचना

ए-ब्लास्ट संरचना केवल एक प्रविष्टि बिंदु का प्रतिनिधित्व करती है - index.html फ़ाइल, जिसमें सभी परिसंपत्तियों, बुनियादी खेल संस्थाओं, नियंत्रणों और सामान्य रूप से सब कुछ के साथ एक दृश्य होता है।

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

राउटर और पैटर्न

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

<a-scene router> ... <!-- Routes --> <a-route id="start-screen" template="start-screen"></a-route> <a-route id="game-field" template="game-field"></a-route> <a-route id="game-over" template="game-over"></a-route> <a-route id="how-to-play" template="how-to-play"></a-route> <!-- End Routes --> ... <!-- Templates --> <a-template name="controls"></a-template> <!-- End Templates --> ... </a-scene>

हम दृश्य में राउटर घटक जोड़ रहे हैं।
एप्लिकेशन के प्रत्येक भाग (दृश्य के फ्रेम) के लिए एक मार्ग-मार्ग जोड़ें। होम स्क्रीन के लिए एक मार्ग, दूसरा खेल मैदान के लिए, आदि।
सीधे टेम्प्लेट के माध्यम से टेम्प्लेट करें
यदि आवश्यक हो, तो हम मार्गों को बदलते हैं
```
 this.el.systems.router.changeRoute('game-field'); 
```
नोट : यह उदाहरण दृश्य कोड को संदर्भित करता है, इसलिए हम राउटर सिस्टम को सीधे कॉल कर सकते हैं।
हम कुछ इस तरह से टेम्प्लेट सेट और कनेक्ट करते हैं:
```
 AFRAME.registerTemplate('game-field', ` <a-sub-assets> <a-asset-item id="glass" src="/assets/models/glass_bottle.gltf"></a-asset-item> ... <audio id="fail" src="/assets/sounds/fail.wav" preload></audio> </a-sub-assets> <a-template name="button" options="text: EXIT; position: 0 1 4; rotation: 0 180 0; event: stop-game"></a-template> <a-entity id="indicator" indicator visible="false" position="0 1 -2" text="align: center; width: 4; color: #00A105; value: -1" ></a-entity> <a-entity game-field-manager></a-entity> `); 
```
नोट: एक उप-उप-संपत्ति आपको संपत्ति के साथ-साथ परिसंपत्तियों को लोड करने की अनुमति देती है, लेकिन केवल इस अंतर के साथ कि डिफ़ॉल्ट रूप से एक चेक है और यदि परिसंपत्ति पहले से ही जोड़ा गया है, तो मार्ग बदलने पर इसे फिर से नहीं जोड़ा जाएगा।

नोट 2: आम तौर पर आप टेम्पलेट का उपयोग केवल ES6 टेम्पलेट स्ट्रिंग के साथ कर सकते हैं। अन्यथा, यह "स्ट्रिंग" + वर + "स्ट्रिंग" में बदल सकता है, ठंडा नहीं। उदाहरण के लिए, केविन को टेम्पलेट इंजन के लिए समर्थन प्राप्त है। लेकिन इसे जटिल क्यों, सही है?

इस प्रकार, आप एक सुविधाजनक एप्लिकेशन संरचना बना सकते हैं जिसमें निम्नलिखित शामिल होंगे: घटक, सिस्टम, टेम्प्लेट, स्टेट्स, लिबास । ज्यादा कुछ नहीं और सब कुछ अलमारियों पर है।

वस्तुओं में हेरफेर

सबसे पहला काम जो हल किया जाना था वह वस्तुओं का हेरफेर था। मुझे ग्रैब - थ्रो जैसे फंक्शनल की जरूरत थी। शुरू में, मैंने विचार करना शुरू किया कि खरोंच से इस तरह के एक घटक कैसे बनाया जाए। विशुद्ध रूप से एक समतल स्तर पर, ऐसा प्रतिबिंब अनुमेय है: हमारे पास एक नियंत्रक है (डेस्कटॉप के मामले में यह एक कर्सर है), इसकी एक स्थिति है। हमारे पास कुछ वस्तुएं भी हैं, उदाहरण के लिए क्यूब्स, उनके पास एक स्थिति भी है। नियंत्रक की स्थिति को बदलकर, हमें वस्तु की स्थिति को बदलना होगा। क्या यह सरल है? तो, वास्तव में, हाँ, लेकिन यह काम नहीं किया। मैं आपको इसे समझाने के लिए बहुत लंबी सूची में से कुछ बिंदुओं का उल्लेख करूंगा:

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

यह अच्छा है कि अच्छे श्री विल् मर्फी और उनके दोस्तों ने एक फ्रेम-सुपर-हैंड किया । संक्षेप में, इस पुस्तकालय में सभी आवश्यक घटक हैं:

होवर करने योग्य । मार्गदर्शन। ऑब्जेक्ट के टकराव क्षेत्र पर नियंत्रक या कर्सर को इंगित करें (आमतौर पर पूरी वस्तु)
Grabbable : कैप्चर करें। उपयुक्त बटन का उपयोग करके किसी ऑब्जेक्ट को पकड़ो और खींचें
स्ट्रेचेबल : दोनों हाथों से पकड़ें और स्ट्रेच करें
घसीटने योग्य \ dropable : आवश्यक रूप से इस घटना को निर्धारित करने के लिए "आइटम को एक विशिष्ट स्थान पर फेंक दिया गया था"

आप ऊपर बताई गई रिपॉजिटरी में सुपर-हैंड्स को सेट करने और कनेक्ट करने के बारे में सब कुछ पा सकते हैं। मैं बस कुछ बारीकियों पर ध्यान आकर्षित करना चाहता हूं:

दाएं और बाएं हाथ के लिए अलग-अलग मिश्रण बनाएं। समर्थित उपकरणों के प्रकार से अलग घटकों। उदाहरण के लिए, दाहिना हाथ, ऑक्यूलस-टच, विवे-कंट्रोल, विंडोज-मोशन-कंट्रोल के अलावा, ऑक्यूलस-गो-कंट्रोल और गियर-वीआर-कंट्रोल भी हो सकता है। बाएं हाथ को बीपी मोबाइल हेलमेट के लिए छिपाया जाना चाहिए। प्रत्येक नियंत्रक में मिक्सिन हैंड और सुपर-हैंड दोनों घटक होने चाहिए। एक उदाहरण ;
यदि आपने ऑब्जेक्ट निर्दिष्ट किया है: पुनर्नवीनीकरण के लिए .clsname, इसे प्रत्येक तत्व में जोड़ना न भूलें जो नियंत्रक का उपयोग करके लिया जा सकता है, अन्यथा सुपर-हैंड के लिए एक भी घटना विफल नहीं होगी। बेशक, अगर कोलाइडरइवेंट: रेकास्टर-चौराहा ;
माउस परियोजनाओं के साथ खींचकर 2d 3 डी दुनिया में समन्वय करता है, इसलिए डेस्कटॉप के लिए कर्सर का उपयोग करना बेहतर होता है।

भौतिकी जोड़ें

भौतिक विज्ञान को फ्रेम में जोड़ना वास्तव में बहुत सरल है। इसके लिए एक विशेष प्रणाली है। यह दृश्य और वॉइला में जोड़ा जाता है, भौतिकी पहले से ही आपकी जेब में है।

 <a-scene physics="debug: false"> <a-box dynamic-body position="0 1 -2"></a-box> <a-box id="floor" static-body></a-box> </a-scene>

मार्क : डिबग: यह सच है कि ज्यामिति से बंधे भौतिक शरीरों को देखने की क्षमता है। यह सुविधाजनक है जब आपको किसी ऑब्जेक्ट को "आउटलाइन" करने की आवश्यकता होती है।

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

मुझे यह सुनिश्चित करने की ज़रूरत थी कि बटन को कूड़ेदान में दबाकर एक निश्चित बल सेट किया गया था (जितना अधिक आप दबाए गए बटन को दबाएंगे, उतना ही अधिक बल)। जैसा कि यह निकला, यह कार्य इतना सरल नहीं है जितना पहली नज़र में लगता है। अच्छा, इतना जटिल क्या है? - आप कहते हैं, हम applyImpluse और voila करते हैं। वास्तव में नहीं ... यह शरीर के केंद्र पर लागू वेक्टर के साथ एक वस्तु के रोटेशन को सेट करता है। इस पद्धति का उपयोग करके, हम केवल एक यूल का अनुकरण कर सकते हैं। हालाँकि, यदि आप विमान के सही कोण के साथ एक वेक्टर सेट करते हैं, तो आपको एक धक्का के समान कुछ मिल सकता है। लेकिन यह वह नहीं है जिसकी मुझे जरूरत थी।

जैसा कि यह निकला, मुझे इस पैरामीटर को सेट करते समय गति की आवश्यकता थी, ऑब्जेक्ट किसी दिए गए दिशा में अपने आंदोलन को शुरू करता है। यह दिशा वेक्टर द्वारा निर्दिष्ट की गई है। और यहीं से मस्ती शुरू होती है। इस वेक्टर को कैसे खोजें? मुझे दो विकल्प मिले:

नियंत्रक (या डेस्कटॉप के लिए कैमरा) का चतुष्कोण प्राप्त करें, जो अंतरिक्ष में इसके अभिविन्यास का वर्णन करता है। एक वेक्टर V1 = <1,1,1> बनाएं, इसे फेंकने वाले बल से गुणा करें और इन सभी के लिए अभिविन्यास लागू करें।
```
 const velocityVector = new THREE.Vector3(1,1,1); velocityVector.multiplyScalar(this.force); velocityVector.applyQuaternion(controllerQuaternion); this.grabbed.body.velocity.set(velocityVector.x, velocityVector.y, velocityVector.z); 
```
नियंत्रक (कर्सर) की स्थिति और फेंकी जा रही वस्तु की स्थिति का पता लगाएं। दो बिंदुओं के लिए दिशा वेक्टर की गणना करें। वेक्टर को सामान्य करें। और इसे बल से गुणा करें।
```
 const directionX = (trashPosition.x - zeroPosition.x); const directionZ = (trashPosition.z - zeroPosition.z); const vectorsLength = Math.sqrt(Math.pow(directionX, 2) + Math.pow(directionZ, 2)); const x = (directionX / vectorsLength) * this.force; const y = this.force; const z = (directionZ / vectorsLength) * this.force; this.grabbed.body.velocity.set(x , y, z ); 
```

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

मॉडल के बारे में कुछ शब्द

शुरुआत से ही, मैंने एक लो-पॉली स्टाइल गेम बनाने का फैसला किया। हालाँकि WebGL आज अपेक्षाकृत जटिल दृश्यों को प्रस्तुत करने में सक्षम है, लेकिन इसका प्रदर्शन अभी भी उन्नत पुस्तकालयों जैसे कि DirectX, Vulkan, Mantle, आदि से अवर है। यह उपयोगकर्ता के डिवाइस के प्रदर्शन पर भी निर्भर करता है। चूंकि मैं अधिक किफायती बीपी मोबाइल हेलमेट (ओकुलस गो, गियर वीआर) पर ध्यान केंद्रित करना चाहता हूं, इसलिए मुझे लगता है कि लो-पॉली वीआर एप्लिकेशन या गेम बनाने के लिए कुछ समाधानों में से एक है। हालांकि, ज़ाहिर है, यह सब मात्रा पर निर्भर करता है।

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

थ्री-जेएस निर्यातक पुराना है। GLTF निर्यातक खोजने और आपूर्ति करने की आवश्यकता है। GLTF वेब के लिए बनाया गया एक विशेष प्रारूप है। और हाँ, यह JSON है।
GLTF साइकिल रेंडरर का समर्थन नहीं करता है, इसलिए आपको ब्लेंडर रेंडरर का उपयोग करना होगा। और इसका मतलब है कि कोई शांत समुद्री मील, रंग परिवर्तन, धातु पर प्रकाश डाला जाएगा (अलग तरीके से किया जा सकता है)।
आपको केवल चयनित आइटम को निर्यात करने की आवश्यकता है। आपको अतिरिक्त कैमरों और रोशनी की आवश्यकता नहीं है? फ़ाइल> निर्यात> gltf 2.0। बाएं मेनू में, निर्यात GLTF 2.0> केवल चयनित निर्यात करें।
हम ब्लेंडर में <0, 0, 0> स्थिति से निर्यात करना शुरू करते हैं। एक ही स्थान पर स्केल करना बेहतर है, ताकि बाद में आप स्केल-इन घटक का उपयोग फ्रेम में न करें।
यदि आप रीसायकल में खुली जगह खींचते हैं! वीआर, आपको केवल उन वस्तुओं को जोड़ना होगा जहां खिलाड़ी सैद्धांतिक रूप से देख सकता है। घरों के पीछे, रीसायकल में! वहाँ कुछ पेड़ हैं और केवल उसी जगह पर जहाँ उपयोगकर्ता उन्हें देख सकता है। दृश्य को ओवरलोड करना आवश्यक नहीं है।
यदि आपको मॉडल सामग्री को बदलने की आवश्यकता है, तो आपको लोड होने तक प्रतीक्षा करने की आवश्यकता है, स्वयं मॉडल प्राप्त करें, इसमें से सभी नोड्स खींचें (GLTF में न केवल मेश के बारे में जानकारी शामिल है)
```
 e.detail.model.traverse((node) => { if (node.isMesh) { node.material.color = new THREE.Color(someColor); } }); 
```

निष्कर्ष में

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

मैंने Recycle कैसे बनाया! वी.आर.