थ्री। जे एस पर 3 डी गेम, एन.डब्ल्यू.जेएस

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


गेम कोड पूरी तरह से शुद्ध जावास्क्रिप्ट में लिखा गया है। 3D ग्राफिक्स प्रदर्शित करने के लिए, तीन .js लाइब्रेरी को स्क्रिप्ट और WebGL के बीच एक लिंक के रूप में उपयोग किया जाता है। हालाँकि, पुराने ब्राउज़र संस्करण में ऐसा ही था। मेरे लिए इस परियोजना में सबसे महत्वपूर्ण बात थी, खेल के समानांतर, अपनी खुद की लाइब्रेरी जोड़ने के लिए, दृश्य वस्तुओं, उनके एनीमेशन और कई अन्य विशेषताओं के साथ सुविधाजनक काम के लिए उपकरणों के साथ तीन.जेएस के पूरक के लिए डिज़ाइन किया गया। मैंने तब इसे लंबे समय तक छोड़ दिया। यह उसके वापस आने का समय है।


मेरी लाइब्रेरी में दृश्य से वस्तुओं को जोड़ने और हटाने के लिए सुविधाजनक उपकरण हैं, वस्तुओं के अलग-अलग हिस्सों (मेष) के गुणों को बदलते हुए, 3 डी ऑब्जेक्ट्स के फ्रेम दर-स्वतंत्र एनीमेशन, रात में तारों वाली आकाश बनावट के साथ एक आकाश shader, और बहुत कुछ। मैं उनमें से कुछ के बारे में बात करूंगा। आकाश के बारे में, मैंने एक एकल फ़ंक्शन के साथ इसके निर्माण को लागू किया जो कई इनपुट मापदंडों को लेता है, शेडर को इनिशियलाइज़ करता है, क्लाउड टेक्सचर को लोड करता है (यदि आवश्यक हो) और एक दिए गए पुनरावृत्ति के साथ आकाश को अपडेट करना शुरू करता है।

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

इसलिए, चूंकि हम आकाश के बारे में बात कर रहे हैं, हम इसके साथ शुरू करेंगे।

आकाश

दृश्य में दृढ़ता जोड़ना इस प्रकार है।

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

//  (AmbLight)   apscene.AmbLight=new THREE.AmbientLight(0xFFFFFF); apscene.scene.add(apscene.AmbLight); //  (AmbLightBk)   (      ) apscene.AmbLightBk=new THREE.AmbientLight(0xFFFFFF); apscene.sceneb.add(apscene.AmbLightBk); // (, )   var SFog=new THREE.FogExp2(0xaaaaaa, 0.0007); apscene.scene.fog=SFog; // (, )   var SFogBk=new THREE.FogExp2(0xa2a2aC, 0.0006); apscene.sceneb.fog=SFogBk; //  apscene.hemiLight=new THREE.HemisphereLight(0xFFFFFF, 0x999999, 1); apscene.scene.add(apscene.hemiLight); //        .       .        three.js   ,   ,     ,  ,   ... apscene.dirLight=new THREE.DirectionalLight(...) apscene.dirLightBk=new THREE.DirectionalLight(...) 

उसके बाद, आप पहले से ही मेरे कार्यों में से एक के माध्यम से शेड्स, टेक्सचर (लाठी और ... अच्छी तरह से, ठीक है) के साथ आकाश के एनीमेशन को चला सकते हैं:

 m3d.graph.skydom.initWorld( //  ,  ,         {saveStart:false}, { //ltamb (light ambient,    ) -       ltamb:{a1:-2, a2:8, k1:0.2, k2:0.75, obj:[ {obj:apscene.AmbLight.color, key:['r','g','b']} ]}, //a1  a2 -      (altitude,      ),     ,   obj,     (k1..k2),   k1  k2 -         // ,    ltamb :     -2  8 (    ),    (apscene.AmbLight.color),    r, g  b,    0.2  0.75     ( ,    ,    0xFFFFFF). //key -    ,        three.js //        (apscene.AmbLightBk.color).    (  altitude)  -4  12          0.3 ... 0.99    .  -4 , ,    0.3  ,   12   0.99   ltambb:{a1:-4, a2:12, k1:0.3, k2:0.99, obj:[ {obj:apscene.AmbLightBk.color, key:['r','g','b']} ]}, //      : ltdir:{a1:-2, a2:8, k1:0.0, k2:1, obj:[ {obj:apscene.dirLight, key:['intensity']}, {obj:apscene.dirLightBk, key:['intensity']} ]}, //       (apscene.dirLightBk)   ,    ,       . // ,      three.js    - inensity ( , apscene.dirLight.intensity).  ,  ,       three.js    . //  .   ,     ( 0.15  )     12  8 (, ,    8  12), : lthem:{a1:8, a2:12, k1:0.15, k2:0.3, obj:[ {obj:apscene.hemiLight, key:['intensity']} ]}, //         .       . //    ()   : ltambfog:{a1:-2, a2:8, k1:0.4, k2:1, obj:[ {obj:apscene.scene.fog.color, key:['r','g','b']} ]}, //  : ltambbfog:{a1:-2, a2:12, k1:0.25, k2:1, obj:[ {obj:apscene.sceneb.fog.color, key:['r','g','b']} ]}, //     .  ,         ,  . ltambfogd:{a1:8, a2:12, k1:0.2, k2:0.35, obj:[ {obj:apscene.scene.fog, key:['density']} ]}, //  ltambbfogd:{a1:6, a2:12, k1:0.2, k2:0.28, obj:[ {obj:apscene.sceneb.fog, key:['density']} ]}, //  ,      ( ,   ),   ,     ,   , -«»     ,      skyplane1..6: planeAmb:{a1:-5, a2:12, k1:0.5, k2:1.0, obj:[ {obj:apscene.user.skyplane1.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane2.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane3.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane4.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane5.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane6.material.color, key:['r','g','b']} ]} //,     ,     ,  . }; 

नतीजतन, सूर्य की ऊंचाई में एक चिकनी परिवर्तन के साथ दृश्य पर एक गतिशील आकाश दिखाई देता है और, तदनुसार, दिन के समय में परिवर्तन होता है।

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

यह कैसे दिखता है, आप डेमो दृश्य से वीडियो देख सकते हैं:


यह एक अलग खेल है। यह सिर्फ इतना है कि क्षितिज को विभिन्न वस्तुओं से नहीं जोड़ा जाता है, और इसलिए इस स्क्रिप्ट का काम सबसे स्पष्ट रूप से दिखाई देता है। लेकिन जिस खेल के बारे में कहानी पर चर्चा की जा रही है, ठीक उसी दृष्टिकोण का उपयोग किया जाता है। यहां समय बीतने की उच्च गति केवल प्रदर्शन के उद्देश्य के लिए निर्धारित की जाती है, और इसलिए समय प्रवाह, निश्चित रूप से, अधिक धीरे-धीरे, पुनरावृत्ति के एक ही चरण के साथ दृढ़ता से अद्यतन होता है। इस डेमो में, वैसे, एक जल shader शामिल है, चर मापदंडों के साथ भी, सूरज की ऊंचाई पर निर्भर करता है ... लेकिन मैंने अभी तक इसे अंतिम रूप नहीं दिया है।

उत्पादकता

यह सब लोहे पर बहुत कम मांग है। Chrome ब्राउज़र में कार्य करना, यह LGA775 (और 4 गीगा रैम के साथ) के तहत Xeon E5440 को 20% और GT730 ग्राफिक्स कार्ड के मूल को 45% से लोड करता है। लेकिन यह विशुद्ध रूप से पानी के एनीमेशन के कारण है। अगर हम एक ऐसे खेल के बारे में बात करते हैं जहाँ पानी नहीं है, लेकिन एक शहर है, यह एक:


फिर उस समय कार शहर में घूमती है - प्रतिशत 45%, वीडियो कार्ड 50%। सिद्धांत रूप में, कुछ एफपीएस ड्राडाउन (लगभग 30 फ्रेम प्रति सेकंड तक) के साथ, यह पेंटियम 4 3 जीएचजेड (1 जीबी रैम) और इंटेल एटम 1.3 जीएच (2 जीबी रैम) पर एक टैबलेट पर भी काफी अच्छी तरह से काम करता है।

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

स्थल

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

और यह लोकड: {} ऑब्जेक्ट, विशेष रूप से, व्यक्तिगत 3 डी मॉडल के लिए पथ शामिल हैं जिन्हें लोड करने की आवश्यकता है। शून्य पथ सामान्य पथ है, और फिर प्रत्येक वस्तु के लिए सापेक्ष पथ, जैसे:

 ['path/myObj', scale, y, x,z, r*Math.PI, 1, '', '', '', 1, ['','','',''], 'scene'] 

यह समझा जाता है कि सभी मॉडलों को 3D संपादक से json प्रारूप में निर्यात किया जाता है, अर्थात उनके पास पथ / myObj.json जैसे पथ होते हैं। इसके बाद स्केल होता है (चूंकि संपादक को उस पैमाने के साथ सहेजा जा सकता है जो खेल के लिए उपयुक्त नहीं है), ऊंचाई में वस्तु की स्थिति (y), कुल्हाड़ियों (x) और (z) के साथ, फिर मॉडल (y) में मॉडल के रोटेशन कोण ®, वैकल्पिक मापदंडों के एक नंबर और दृश्य का नाम जहां मॉडल लोड करना है - मुख्य दृश्य (दृश्य) या पृष्ठभूमि (दृश्य) पर।

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

 landobj: [ ['gamePath/'], [ ['landscape/ground', 9.455, 0, 0,0, 0*Math.PI, 1, '', '', '', 1, ['','','',''], 'scene'], ['landscape/plants', 9.455, 0, 0,0, 0*Math.PI,1, '', '', '', 1, ['','','',''], 'scene'], ['landscape/buildings/house01', 2, 0, -420,420, -0.75*Math.PI, 1, '', '', '', 1, ['','','',''], 'scene'], ... ] ], 

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

उदाहरण के लिए, खेल का पूर्ण विन्यास इस तरह दिख सकता है:

 locd:{ // name: 'SeaBattle', type: 'game', menulabel: '', //    x:-420, y:70, z:-420, rot: -0.5, //    intsdistance: 200, // ambLtColor: 0xFFFFFF, ambLtColorBk: 0xFFFFFF, lightD: [0xDDDDDD,0.3,1000, 200000,0.3,-0.0003, -190,200000,-140,0,0,0, 200,-200,200,-200], lightDBk: [0xFFFFFF,0.3,10000, 40000,0.3,-0.0035, -190,1200,-140,0,0,0, 50000,-50000,50000,-50000], lightH: [0xFFFFFF,0x999999,1, 0,500,0], //      lightsP: [], //     lightsPDynamicAr: [ [0xffffff, 4, [0, -2000, 0], [50, 1.5] ] //[[distance], [decay]] ], //         (x,y,z) userPointLights: [ [0, -2000, 0] ], //   lightsS: [ [0xffffbb, 1.0, [0, 250, 180], [0, 0, 180], 0.5, 600,600,600, -0.0005] ], //  shadowMapCullFace:0, shadowsMode: 'all', //all,list,flag //  imagePaths: [ 'game/img/', 'interface.png', 'interface2.png' ], // 3D  landobj: [ ['game/models/'], [ ['landscape/land',1, 0, 0,0, 0.0*Math.PI,1,'','','',1,['','','',''],'scene'], ['landscape/sbp',1, 0, 0,180, 1.0*Math.PI,1,'','','',1,['','','',''],'scene'], ['landscape/sbu',1, 0, 0,1120, 1.0*Math.PI,1,'','','',1,['','','',''],'scene'] ] ], //        staffobj: [ ['game/models2/'], [ ] ], //  progobj: [ [ ] ] }, 

हां, इन सभी उप-श्रेणियों को सहयोगी सरणियों में फिर से बनाना बेहतर है, अन्यथा उनमें मापदंडों का क्रम स्पष्ट नहीं है ...

3 डी मॉडल

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

ग्राफिक्स एडिटर (ब्लेंडर, मैक्स, आदि) में ऐसा करने के लिए, आप तुरंत एक निश्चित नियम के अनुसार मेषों के नाम (ऑब्जेक्ट नाम फ़ील्ड में) निर्दिष्ट कर सकते हैं। एक अंडरस्कोर (_) होना चाहिए। सशर्त नियंत्रण वर्णों को बाईं ओर जाना चाहिए, उदाहरण के लिए: डी - ड्यूलसाइड (मेष दो तरफा है, अन्यथा - एक तरफा), सी (कास्ट शैडो) - एक छाया डाली, आर (छाया प्राप्त करें) - छाया लेता है। उदाहरण के लिए, घर में पाइप की जाली का नाम cr_tube हो सकता है। कई अन्य पत्रों का भी उपयोग किया जाता है। उदाहरण के लिए, "l" एक कोलाइडर है, अर्थात, घर की दीवार, जिसका नाम crl_wall01 है, खिलाड़ी को स्वयं से गुजरने की अनुमति नहीं देगा, और यह भी डाली जाएगी और एक छाया ले जाएगा। एक छत या एक दरवाज़े के हैंडल जैसे कोलाइडर बनाने की आवश्यकता नहीं है, और जिससे प्रदर्शन में गिरावट आती है। जैसा कि आप पहले ही समझ चुके हैं, जब एक मॉडल को लोड करते समय, मेरा पुस्तकालय मेषों के नामों को पार्स करता है और उन्हें दृश्य पर संबंधित गुण देता है। लेकिन इसके लिए 3 डी संपादक से मॉडल को निर्यात करने से पहले सभी मेषों को सही ढंग से नाम देना आवश्यक है। यह प्रदर्शन को महत्वपूर्ण रूप से बचाएगा।

किसी वस्तु के अंदर जाल के लिए सभी नियंत्रण झंडे:

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

l_ ... एक ठोस वस्तु है। किसी भी जाल को एक कोलाइडर संपत्ति देता है।

i_ ... - चौराहों। जाल को चौराहों की सूची में जोड़ा जाएगा, जिसका उपयोग, उदाहरण के लिए, उस पर क्लिक करने के लिए किया जा सकता है, अर्थात्, खेल को अन्तरक्रियाशीलता देने के लिए।

j_ ... चौराहे भी। ऊपर के रूप में ही, एक नया संस्करण - खेल में चौराहों को खोजने के लिए एक बेहतर एल्गोरिदम और कम संसाधन खपत के साथ।

e_ ... - घरों के द्वार (प्रवेश / निकास) के लिए चौराहे। अन्य वस्तु जाल पर चौराहे को छोड़कर। इसका उपयोग तब किया जाता है जब घरों में कुछ क्षणों के लिए आवश्यक हो, केवल अन्य सभी इंटरैक्टिव तत्वों को छोड़कर, केवल दरवाजों को इंटरैक्टिव बनाने के लिए। कल्पना के साथ, आप इस और अन्य उपयोगों के एक टन के साथ आ सकते हैं।

c_ ... - छाया डाली। मेष एक छाया डालता है।

r_ ... - छाया प्राप्त करते हैं। एक जाली सभी अन्य जाल से छाया को स्वीकार करती है जो उन्हें डाली जाती है।

d_ ... - द्विपक्षीय (दो तरफा)। दोनों किनारों पर दिखाई देता है, बनावट दोनों पक्षों पर आरोपित है।

t_ ... - पारदर्शी (पारदर्शी), अगर पूरी वस्तु को तीन.js में अल्फ़ाज़ेट पर सेट किया जाता है।

u_ ... - पारदर्शी (पारदर्शी), एक निश्चित घनत्व (0.4) के साथ, यदि पूरी वस्तु तीन.js में अल्फास्टेस्ट निर्दिष्ट नहीं करती है।

g_ ... - ग्लास। निश्चित पारदर्शिता निर्धारित है (0.2)।

h_ ... - अदृश्य (छिपा हुआ)। ऑब्जेक्ट के कुछ हिस्सों (मेश) के लिए जिसे ऑब्जेक्ट को दृश्य में जोड़ते समय छिपाया जाना चाहिए। छिपे की सूची में दर्ज किया गया।

v_ ... दृश्यमान। "एच" के साथ चिह्नित किए गए सभी ऑब्जेक्ट पहले से ही दिखाई दे रहे हैं, लेकिन ध्वज "वी" के साथ वे आगे छिपने या अन्य जोड़तोड़ के लिए दिखाई देने वाली एक अलग सूची में दर्ज किए गए हैं।

नतीजतन, मेष का नाम कुछ इस तरह से हो सकता है: crltj_box1 (कलाकारों, एक छाया, कोलाइडर, पारदर्शी, इंटरैक्टिव) को स्वीकार करता है। और उसी मॉडल के हिस्से के रूप में एक और जाल: cr_box2 (केवल कास्ट और छाया लेता है), स्वाभाविक रूप से, किसी भी क्रम में नियंत्रण वर्ण सेट किए जा सकते हैं। इस प्रकार, संपादक से आप खेल में ऑब्जेक्ट के भागों के भविष्य के प्रदर्शन को नियंत्रित कर सकते हैं, या बल्कि, उनके गुणों में से कुछ, बचत, एक ही समय में, कंप्यूटिंग शक्ति।

खेल का सार

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

एनीमेशन

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

उदाहरण के लिए। हमें वस्तु स्थिति (१०; १०; ५०) से बिंदु तक अंतरिक्ष (१००; ०००; ६०) में स्थानांतरित करने की आवश्यकता है। हमने उनके प्रारंभिक और अंतिम मूल्यों को इंगित करके 3 पैरामीटर निर्धारित किए हैं। X निर्देशांक 10 से 100 तक, y - 10 से 300 तक और z - 50 से 60 तक भिन्न होगा। और यह सब 4 सेकंड में कहना चाहिए।

 m3d.lib.anim.add( 'moveobj', 1, 4000, 'and', {userpar1:111, obj:my3DObject}, [ {lim1:10, lim2:100, sstart:10, sfin:100, t:0}, {lim1:10, lim2:300, sstart:10, sfin:300, t:0}, {lim1:50, lim2:60, sstart:50, sfin:60, t:0} ], function(){ myPeriodicFun(this); }, function(){ myFinishFun(this); } ); m3d.lib.anim.play(); 

5 मापदंडों की पहली पंक्ति: मूवमेंट - एनीमेशन का नाम (कोई भी), 1 - स्ट्रीम नंबर (आप एक असीमित संख्या में धाराओं के समानांतर वस्तुओं को चेतन कर सकते हैं), 4000 - 4 सेकंड का एनीमेशन समय, और - जबकि एक अप्रयुक्त पैरामीटर, जो भविष्य में संक्रमण तर्क के लिए जिम्मेदार होगा। एक ही धारा के भीतर एनिमेशन के बीच, userpar किसी भी साहचर्य सरणी है जिसे एक पैरामीटर के रूप में हैंडलर को पारित किया जाएगा, उदाहरण के लिए, गणना की गई त्रिज्या, साइन, कोज़ाइन और आमतौर पर इस एनीमेशन के लिए गणना किए गए किसी भी मान के साथ, ताकि गणना न की जा सके। प्रत्येक पुनरावृत्ति के समय के बारे में। या एक 3 डी ऑब्जेक्ट के संदर्भ में, जो वास्तव में, चेतन करेगा।

अगला परिवर्तनशील मापदंडों के साथ एक सरणी है। हम पाते हैं कि पहला पैरामीटर x निर्देशांक में परिवर्तन है, दूसरा y है, तीसरा z है। हम प्रत्येक में lim1 और lim2 के लिए लिखते हैं, क्या और किस आकार से यह बदल जाएगा। Sstart और sfin में हम समान मान निर्दिष्ट करते हैं। यहां आप एक शुरुआत निर्दिष्ट कर सकते हैं, उदाहरण के लिए, कुछ अन्य मूल्य से, फिर पैरामीटर इसे "एक सर्कल में" स्क्रॉल करेगा, lim2 को दरकिनार करके और lim1 के साथ एक नई "क्रांति" शुरू करेगा। ठीक है, उदाहरण के लिए, यह आवश्यक है यदि हमारा एनीमेशन कुछ मूल्यों (lim1 और lim2) के बीच पाला जाता है, लेकिन हमें इसे शुरुआत से नहीं (यानी, lim1 से नहीं), लेकिन कुछ मध्यवर्ती मूल्य से शुरू करने की आवश्यकता है।

t: 0 बस सेट करता है कि इस पैरामीटर के लिए एनीमेशन कुल समय (4000) के अनुसार 1 बार किया जाता है, जैसे कि इसे बढ़ाया गया है। यदि हम एक और संख्या निर्धारित करते हैं, मुख्य समय से कम है, तो इस पैरामीटर को लूप किया जाएगा और मुख्य एनीमेशन (4000) के समय तक दोहराया जाएगा। यह सुविधाजनक है, उदाहरण के लिए, ऑब्जेक्ट के रोटेशन को सेट करने के लिए जब कोण को बार-बार 360 डिग्री लाइन को पार करना होगा और 0 पर रीसेट करना होगा।

अगला 2 कॉलबैक आते हैं - एक जिसे प्रत्येक पुनरावृत्ति के साथ निष्पादित किया जाएगा और एक जिसे पूरे एनीमेशन (निकास बिंदु) के पूरा होने पर एक बार निष्पादित किया जाएगा।

पहला कॉलबैक myPeriodicFun (यह), उदाहरण के लिए, इस तरह हो सकता है:

 myPeriodicFun:function(self) { var state=self.par[0].state, state_old=self.par[0].state_old; var state2=self.par[1].state, state_old2=self.par[1].state_old; var state3=self.par[2].state, state_old3=self.par[2].state_old; if ((state!=state_old)||(state2!=state_old2)||(state3!=state_old3)) { var obj=self.userpar.obj; obj.position.x=state; obj.position.y=state2; obj.position.z=state3; ap.cameraFollowObj(obj); }; }, 

यही है, आंदोलन के प्रत्येक पुनरावृत्ति पर, इस फ़ंक्शन में एक पैरामीटर (स्व) दिया जाता है जिसमें सभी दिए गए एनीमेशन मापदंडों के लिए गणना की गई मध्यवर्ती मान होते हैं: self.par [0] .state, self.par [1] .state, self.par [2]। .state। यह वर्तमान समय में हमारा x, y और z है। उदाहरण के लिए, यदि एनीमेशन 4 सेकंड तक रहता है, तो 2 सेकंड के बाद x (100-10) / 2 = 45 के बराबर होगा। और सभी निर्देशांक के लिए। तदनुसार, myPeriodicFun में हम बस इन निर्देशांक में अपनी वस्तु प्रदर्शित करते हैं। , : , -.

f ((state!=state_old)..., , ( state_old ), , , , , - , , . state state_old , , , , . 1 , , .

सामान्य तौर पर, एनीमेशन को एक निश्चित समय में किसी भी संख्या में मापदंडों के एक साधारण परिवर्तन के रूप में समझा जाता है, जो कि उनके मध्यवर्ती मानों को कॉलबैक फ़ंक्शन में वितरित करता है। उदाहरण के लिए, आप एक और 4th पैरामीटर जोड़ सकते हैं, जो ऑब्जेक्ट के रोटेशन के कोण के लिए जिम्मेदार होगा। और आप आम तौर पर कई वस्तुओं के मापदंडों को एक एनीमेशन में रट सकते हैं यदि वे किसी तरह समान रूप से चलते हैं। आप विभिन्न धाराओं में एनिमेशन डाल सकते हैं, फिर उन्हें समानांतर में संसाधित किया जाएगा। आप (m3d.lib.anim.add ()) एक एकल धागे को एनिमेशन के पूरे अनुक्रम में जोड़ सकते हैं, और उन्हें एक के बाद एक निष्पादित किया जाएगा। इसके अलावा, प्रत्येक थ्रेड का अपना स्वतंत्र अनुक्रम होगा। मुख्य बात यह है कि सिस्टम में पर्याप्त शक्ति है और सब कुछ स्लाइड शो में नहीं बदल जाता है।

पुनश्च। यहां धाराओं को सभी समानांतर एनिमेशन के प्रत्येक पुनरावृत्ति और उनके सभी मापदंडों के मध्यवर्ती मूल्यों में से प्रत्येक के लिए गणना पर अनुक्रमिक गणना द्वारा महसूस किया जाता है। यही है, जावास्क्रिप्ट में कोई वास्तविक मल्टीथ्रेडिंग नहीं है।

स्क्रीन इंजन पर 2 निर्देशांक बदलने और प्राप्त मध्यवर्ती मूल्यों के आधार पर कॉलबैक फ़ंक्शंस में इन तत्वों को प्रदर्शित करने के लिए उन्हें सेट करके "इंटरफ़ेस" तत्वों का उपयोग एक ही "इंजन" का भी किया जा सकता है। जो, वास्तव में, मेरे खेल में किया जाता है।

गतिशील छाया

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

. three.js , (shadowCameraLeft, shadowCameraRight, shadowCameraTop, shadowCameraBottom). , , . , — , . , . , .

मेरी लाइब्रेरी में, जब 3D दुनिया को इनिशियलाइज़ किया जाता है, तो एक कंट्र ऑब्जेक्ट बनाया जाता है, जिसमें किसी भी समय कैमरे के निर्देशांक होते हैं। इसके अलावा, आप उपयोगकर्ता पैरामीटर contr.cameraForShadowStep सेट कर सकते हैं, जिसमें कैमरा स्थिति का चरण होता है जिस पर छाया कैमरा की स्थिति बदल जाती है।

यदि कहें, तो छाया कैमरे के समानांतर चतुर्भुज का आयाम 700x700x700 है, तो contr.cameraForShadowStep उदाहरण के लिए, 20 पर सेट किया जा सकता है। और जब खिलाड़ी किसी भी अक्ष पर 20 चलता है, तो प्रारंभिक स्थिति फिर से याद की जाएगी और खिलाड़ी के चारों ओर छाया अपडेट की जाएगी। 3 डी दुनिया का पैमाना कोई भी हो सकता है, यह उस पैमाने पर निर्भर करता है जिस पर 3 डी एडिटर में सभी मॉडल बनाए गए थे। और यह संभावना है कि 700x700x700 और 20 के बजाय, आपको 7000x7000x7000 और 200 का उपयोग करना होगा। लेकिन यह किसी भी तरह से सार को नहीं बदलता है।

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

प्वाइंट लाइट सिस्टम

मंच पर प्रकाश के एक दर्जन से अधिक बिंदु स्रोतों की उपस्थिति गतिशील छाया के रूप में एफपीएस में मजबूत है। और यहां तक ​​कि पुराने "गांजा" को खेलना असंभव बना देता है। इसके अलावा, यह मायने नहीं रखता कि ये स्रोत खिलाड़ी के देखने के क्षेत्र में हैं (दुनिया के प्रतिपादन की सीमा निर्धारित की जा सकती है) या काफी दूरी पर। यदि वे बेवकूफी से मंच पर मौजूद हैं, तो सब कुछ धीरे-धीरे काम करता है। इसलिए, मैंने गेम के सेटिंग्स मेनू में प्रदान किया है, जिसे 3 डी दुनिया को लोड करने से पहले कहा जा सकता है, ऐसे स्रोतों की संख्या के लिए विकल्प (2, 4 या 8) जिन्हें "लाइट ऑफ लालटेन" कहा जाता है।


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

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

यह गति में कैसा दिखता है (Xeon E5440, GeForce GT730):

वितरण का निर्माण

( ), bat-, Google Closure Compiler *.js . nwjc.exe nw.js — js (*.bin). :

java -jar D:\webservers\Closure\compiler.jar --js D:\webservers\proj\m3d\www\game\bus\bus.js --js_output_file D:\webservers\proj\nwProjects\bus\game\bus\bus.js

cd D:\«Program Files»\Web2Exe\down\nwjs-sdk-v0.35.5-win-ia32

D:\«Program Files»\Web2Exe\down\nwjs-sdk-v0.35.5-win-ia32\nwjc.exe D:\webservers\proj\nwProjects\bus\game\bus\bus.js D:\webservers\proj\nwProjects\bus\game\bus\bus.bin

del D:\webservers\proj\nwProjects\bus\game\bus\bus.js

अगला, मैं विंडोज के तहत असेंबली के साथ एक exe फ़ाइल बनाने के लिए सरल Web2Executable उपयोगिता का उपयोग करता हूं। मैंने nw.js संस्करण 0.35.5 को चुना है, हालांकि नए संस्करण भी उपलब्ध हैं। असेंबली का आकार बढ़ाने के अलावा, मैंने उनसे कोई प्रभाव नहीं देखा।


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

संपूर्ण विधानसभा ने अंततः 167 एमबी लिया।


फिर मैंने इस उद्देश्य के लिए डिज़ाइन की गई मुफ्त उपयोगिताओं में से एक का उपयोग करके एक निष्पादन योग्य वितरण फ़ाइल में सब कुछ पैक किया, और आउटपुट 70.2 एमबी Businessman3DSetup.exe था।

प्रकाशन

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

खेल का प्रकाशित संस्करण एकल-उपयोगकर्ता है, जिसमें 1 से 5. की राशि में बॉट्स हैं - रूसी और अंग्रेजी। मैं नेटवर्क संस्करण खत्म करने का इरादा रखता हूं। लेकिन विचार में रहते हुए - इसे उसी एप्लिकेशन के रूप में या वेब ब्राउज़र संस्करण के रूप में विंडोज, लिनक्स, आईओएस और मैकओ में तुरंत जारी करने के लिए, और आमतौर पर जहां भी ब्राउज़र वेबजीएल का समर्थन करता है, के रूप में जारी करने के लिए। वास्तव में, वास्तव में, वेबकिट एक ब्राउज़र है और गेम फ़ायरफ़ॉक्स में, एज में और यहां तक ​​कि विंडोज के तहत IE11 में भी ठीक काम करता है, हालांकि बाद में यह बहुत धीमा है।

निष्कर्ष

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

इसके अलावा, मुझे बिल्कुल भी यकीन नहीं है कि किसी को भी यह सब चाहिए। यदि आप शांत रूप से देखते हैं, तो कोई भी शुद्ध जावास्क्रिप्ट में गेम नहीं लिखता है। लेकिन मुझे यह पसंद है क्योंकि गेम ब्राउज़र के लिए बहुत आसान और तेज़ हैं। वे जल्दी से लोड करते हैं, बहुत अधिक रैम की आवश्यकता नहीं होती है और HTML5 के प्रतियोगियों की तुलना में काफी तेज काम करते हैं, यहां तक ​​कि 2 डी की तुलना में भी। मुझे लगता है कि मैं इन सभी घटनाक्रमों पर एक से अधिक ब्राउज़र (और न केवल) खेल जारी करूंगा।