😮 👩‍👧‍👧 👨‍🏭 थ्री.जेएस पर एक पुराने माहौल के साथ एक नया खेल। भाग २ 🏖️ 🧖 🚜

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

स्तर के चित्र

वास्तव में, स्तर स्वयं 3D संपादक में बनाए जाते हैं, अर्थात्, उनकी ज्यामिति, बनावट मानचित्रण, छाया पाक आदि। मैंने यह सब पहले भाग में वर्णित किया है। कोई अन्य योजनाएं क्यों हैं? तथ्य यह है कि तीन.js किसी भी प्रकार के भौतिक इंजन की पेशकश नहीं करते हैं, और मैं बाधाओं की पहचान करने के लिए स्तर की योजनाओं का उपयोग करता हूं।

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

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

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

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

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

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

मैं सहमत था कि एक ब्लॉक 80 पिक्सेल चौड़ा और 48 पिक्सेल ऊंचा होना चाहिए। यह 3 डी दुनिया में 4 x 2.4 मीटर से मेल खाती है। 40 x 24 पिक्सेल बनाना संभव होगा, यानी दस बार, लेकिन तस्वीर में यह छोटा दिखता है।

पहले स्तर पर स्क्रिप्ट का परिणाम (छवि दाईं ओर रखी गई है):

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

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

अब, स्क्रिप्ट कैसे ब्लॉकों को ध्यान में रखती है:

योजना 80x48 ब्लॉकों द्वारा संसाधित की जाती है, जिनमें से प्रत्येक में एक क्षेत्र को 2 से 79 वें पिक्सेल तक क्षैतिज रूप से लिया जाता है और 2 से 47 वें पिक्सेल तक लंबवत रूप से लिया जाता है। पहले और अंतिम पिक्सेल का उपयोग नहीं किया जाता है ताकि ब्लॉकों के आसपास आप 1 पिक्सेल की चौड़ाई के साथ एक काला फ्रेम बना सकें, इससे सर्किट की दृश्य धारणा में सुधार होता है और इसके निर्माण की सुविधा मिलती है।
ब्लॉक की शीर्ष पंक्ति के सभी पिक्सेल देखे जाते हैं। यदि उनके बीच रंग वाले होते हैं, तो ब्लॉक के निर्देशांक पहले से अंतिम रंगीन पिक्सेल तक क्षैतिज रूप से जाते हैं और अंतिम सरणी में लंबवत रूप से ब्लॉक की पूरी ऊंचाई तक जाते हैं। यह पूर्ण या आंशिक चौड़ाई में एक रिक्त ब्लॉक होगा।
ब्लॉक के निचले रेखा के सभी पिक्सेल देखे जाते हैं। यदि उनके बीच रंग वाले हैं, लेकिन शीर्ष पंक्ति में एक रंग नहीं है, तो ब्लॉक के निर्देशांक पहले से अंतिम रंगीन पिक्सेल क्षैतिज रूप से और 3 पिक्सेल नीचे से अंतिम सरणी तक जाते हैं। यह एक ऐसा प्लेटफॉर्म होगा जिस पर चलना है। एक ब्लॉक के अंदर कई क्षैतिज प्लेटफॉर्म हो सकते हैं। प्लेटफॉर्म को केवल ब्लॉक के नीचे ही पहचाना जाता है। प्लेटफ़ॉर्म के निर्देशांक एक ब्लॉक में "डूब गए" हैं, जो नीचे स्थित है, ताकि प्लेटफ़ॉर्म की सतह पड़ोसी ब्लॉकों के साथ समान स्तर पर हो - प्लेटफ़ॉर्म नहीं।
खाली ब्लॉक के अंदर कॉलम और अन्य सजावट को संसाधित नहीं किया जाता है, क्योंकि केवल पिक्सेल की ऊपरी और निचली पंक्ति को माना जाता है। इसलिए, ब्लॉक के अंदर, आप सजावट, आरेख, बिंदुओं, स्तंभों आदि के लिए स्पष्टीकरण रख सकते हैं, इस डर के बिना कि यह किसी भी तरह से स्क्रिप्ट के परिणाम को प्रभावित करेगा।

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

कोड

ap = { //      (  ),   3D   lvd: { 'lv01.png': { invw: false, invh: true, level_dw: -8.5, level_dh: -1.5 }, 'lv02.png': { invw: true, invh: true, level_dw: -19.5, level_dh: -5.5 } }, blockw: 80, //   2D blockh: 48, //   2D sc3d: 0.05, //,   3D  ex: 100, //  3D (-   ) v: { data: [] }, i: 0, par: {}, datai: [], resi: [], ars: [], fStopEncode: false, blockColor: function(cl) { document.getElementById('input_cl').value = cl; }, startEncode: function() { //      for (var key in ap.lvd) { ap.lvd[key].dw = ap.lvd[key].level_dw * ap.blockw; ap.lvd[key].dh = ap.lvd[key].level_dh * ap.blockh; }; document.getElementById('startbtn').style.display = 'none'; document.getElementById('startmsg').style.display = 'block'; var cl = document.getElementById('input_cl').value; var fld = document.getElementById('input_fld').value; var nm = document.getElementById('input_nm').value; ap.nm = nm; ap.par = { path: [fld + '/', nm], key: [nm], cl: aplib.hexToRgb(cl.substring(1, 7)) }; setTimeout(function() { ap.datai[ap.par.key] = new Image(); ap.datai[ap.par.key].onload = function() { ap.parseData(); }; ap.datai[ap.par.key].src = ap.par.path[0] + ap.par.path[1]; }, 500); }, stopEnode: function(e) { if (typeof ap !== "undefined") { if (e.keyCode == 27) { console.log('stop'); ap.fStopEncode = true; }; }; }, parseData: function() { ap.w = ap.datai[ap.par.key[0]].width, ap.h = ap.datai[ap.par.key[0]].height; aplib.initCanv(ap.w, ap.h); ctx.drawImage(ap.datai[ap.par.key[0]], 0, 0, ap.w, ap.h, 0, 0, ap.w, ap.h); ap.ars = []; ap.i = 0; setTimeout(function() { ap.parseData1(); }, 1000); }, parseData1: function() { if (ap.i < ap.par.key.length) { document.getElementById('info').innerHTML = '' + ap.nm; ap.blocksw = Math.floor(ap.w / ap.blockw); ap.blocksh = Math.floor(ap.h / ap.blockh); ap.ar = []; ap.arv = {}; ap.hi = 0; ctx.fillStyle = '#CCCCCC'; ap.parseData2(); } else { document.getElementById('startbtn').style.display = 'block'; document.getElementById('startmsg').style.display = 'none'; }; }, parseData2: function() { if (ap.hi < ap.blocksh) { ap.ar.push([]); ap.wi = 0; ap.parseData3(); } else { ap.parseData4(); }; }, parseData3: function() { var k = ''; if (ap.wi < ap.blocksw) { var fground = true, fvari = false, fempty = true; var upx1 = 0, upx2 = 0, dnx1 = 0, dnx2 = 0; var upxf = false, dnxf = false; for (var wii = 1; wii < ap.blockw - 2 + 2; wii++) { pixelDatai = ctx.getImageData(ap.wi * ap.blockw + wii, ap.hi * ap.blockh + 1, 1, 1).data; //  pixelDatai2 = ctx.getImageData(ap.wi * ap.blockw + wii, (ap.hi + 1) * ap.blockh - 3, 1, 1).data; //  if ((pixelDatai[0] == ap.par.cl.r) & (pixelDatai[1] == ap.par.cl.g) & (pixelDatai[2] == ap.par.cl.b)) { //   ground    if (upxf == false) { upxf = true; upx1 = wii; }; } else { //    if (upxf == true) { upx2 = wii + 1; upx1--; //   dy = -1; // 3D       1 ap.v.data.push([ap.wi * ap.blockw + upx1, ap.hi * ap.blockh + dy, ap.wi * ap.blockw + upx2, ap.hi * (ap.blockh) + ap.blockh - 1]); upxf = false; upx1 = 0; upx2 = 0; }; }; if ((pixelDatai2[0] == ap.par.cl.r) & (pixelDatai2[1] == ap.par.cl.g) & (pixelDatai2[2] == ap.par.cl.b)) { //   ground     if (upxf == false) { if (dnxf == false) { dnxf = true dnx1 = wii; }; }; } else { if (upxf == false) { if (dnxf == true) { dnx2 = wii + 1; dnx1--; //   dy = 2; // 3D    2 ap.v.data.push([ap.wi * ap.blockw + dnx1, (ap.hi + 1) * ap.blockh - 3 + dy, ap.wi * ap.blockw + dnx2, (ap.hi + 1) * ap.blockh - 3 + 2 + dy]); dnxf = false; dnx1 = 0; dnx2 = 0; }; }; }; }; if (ap.fStopEncode == true) { ap.hi = ap.h, ap.wi = ap.w, i = ap.par.key.length; }; setTimeout(function() { ap.wi++; ap.parseData3(); }, 10); } else { ap.hi++; ap.parseData2(); }; }, parseData4: function() { setTimeout(function() { var t, tw, tx, ty, ar = []; //  for (var i = 0; i < ap.v.data.length; i++) { ar = ap.v.data[i]; t = ar[0] + ';' + (ar[1]+1) + '<br/>' + ar[2] + ';' + (ar[3]+1); tw = ar[2] - ar[0]; tx = ar[0]; ty = ar[1] + Math.floor((ar[3] - ar[1]) / 2) - 0; aplib.Tex2Canvas(ctx, t, 'normal 10px Arial', 10, '#CCCCCC', tx, ty, tw, 0, 'center', 'top'); }; ap.parseData5(); }, 10); }, parseData5: function() { var t, tw, tx, ty, ar = [], n; //   3D var lv = ap.lvd[ap.nm]; for (var i = 0; i < ap.v.data.length; i++) { ar = ap.v.data[i]; ar[0] += lv.dw; ar[1] += lv.dh; ar[2] += lv.dw; ar[3] += lv.dh; if (lv.invh == true) { n = -ar[1]; ar[1] = -ar[3]; ar[3] = n; }; if (lv.invw == true) { n = -ar[0] ar[0] = -ar[2]; ar[2] = n; }; ar[0] = Math.round(ap.sc3d * ar[0] * ap.ex) / ap.ex; ar[1] = Math.round(ap.sc3d * ar[1] * ap.ex) / ap.ex; ar[2] = Math.round(ap.sc3d * ar[2] * ap.ex) / ap.ex; ar[3] = Math.round(ap.sc3d * ar[3] * ap.ex) / ap.ex; }; //    ap.v.data.sort(aplib.sortBy0); console.log(ap.v.data); document.getElementById('divresult').innerHTML = JSON.stringify(ap.v.data); } }; aplib = { hexToRgb: function(hex) { var arrBuff = new ArrayBuffer(4); var vw = new DataView(arrBuff); vw.setUint32(0, parseInt(hex, 16), false); var arrByte = new Uint8Array(arrBuff); return { r: arrByte[1], g: arrByte[2], b: arrByte[3], s: arrByte[1] + "," + arrByte[2] + "," + arrByte[3] }; }, //   canvas Tex2Canvas: function(ctx, t, font, lin, fcolor, x, y, w, h, haln, valn) { //left, right, center, center-lim- ctx.font = font; ctx.fillStyle = fcolor; var l = 0; var tx = x; var ftw = false; var tw = 1; var arr = t.split('<br/>'); for (var i = 0; i < arr.length; i++) { arr[i] = arr[i].split(' '); }; for (var i = 0; i < arr.length; i++) { var s = '', slen = 0, s1 = '', j = 0; while (j < arr[i].length) { var wordcount = 0; while ((slen < w) & (j < arr[i].length)) { s = s1; s1 = s + arr[i][j] + ' '; slen = ctx.measureText(s1).width; if (slen < w) { j++; wordcount++; } else { if (wordcount > 0) { s1 = s; } else { j++; }; }; }; ftw = false; tw = ctx.measureText(s1).width; if (haln == 'center') { tx = x + Math.round((w - tw) / 2); }; if (haln == 'right') { tx = x + Math.round((w - tw)); }; if (haln == 'center-lim') { if (tw > w) { tw = w; }; if (tw < 1) { tw = 1; }; tx = x + Math.round((w - tw) / 2); ftw = true; }; if (ftw == false) { ctx.fillText(s1, tx, l * lin + y); } else { ctx.fillText(s1, tx, l * lin + y, tw); }; if (s1 == '') { j = arr[i].length + 1; }; l++; s1 = ''; slen = 0; }; }; return Math.round(tw); }, // canvas initCanv: function(w, h) { function canvErr() { document.getElementById('divcanv').innerHTML = '<div style="height:130px"></div><div style="width:440px; border:#FFFFFF 1px solid; margin:10px; padding:4px; background-color:#000000"><p class="txterr">---> Error<br/>HTML5 Canvas is not supported!<br/>Please, update your browser!</p></div>'; }; if (w == 0) { w = 740; h = 680; }; elcanv = document.getElementById('divcanv'); elcanv.innerHTML = '<canvas id="canv" style="width:' + w + 'px; height:' + h + 'px; display:block;" width="' + w + '" height="' + h + '"></canvas>'; canvas1 = document.getElementById('canv'); if (!canvas1) { canvErr(); return 0; } else { if (canvas1.getContext) { ctx = canvas1.getContext('2d'); ctx.clearRect(0, 0, w, h); return 1; } else { canvErr(); }; }; }, sortBy0: function(i, ii) { if (i[0] > ii[0]) return 1; else if (i[0] < ii[0]) return -1; else return 0; } };

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

 collisionsUpdate: function(x, y, dw, dh) { var coll = []; var o; for (var i = 0; i < ap.v.lv.d.length; i++) { o = ap.v.lv.d[i]; if ((o[0] >= x - ap.v.dw) & (o[2] <= x + ap.v.dw)) { if ((o[1] >= y - ap.v.dh) & (o[3] <= y + ap.v.dh)) { coll.push(o); }; }; }; ap.v.coll = coll; },

यहां, इनपुट x पर, y खिलाड़ी के वर्तमान निर्देशांक हैं, dw, dh वह दूरी है जिस पर आपको क्षैतिज और लंबवत रूप से ब्लॉक की खोज करने की आवश्यकता है, उदाहरण के लिए 12 और 8 मीटर। दूसरे शब्दों में, एक वर्ग 24x16 मीटर में खिलाड़ी के चारों ओर सभी ब्लॉक लें। वे संघर्ष की तलाश में भाग लेंगे। ap.v.lv.d [i] वर्तमान स्तर के ब्लॉक की एक सरणी का एक तत्व है, वास्तव में, वह खुद भी एक ब्लॉक की सीमाओं को परिभाषित करने वाली 4 संख्याओं का एक सरणी है - [X1, y1, x2, y2], इसलिए, वर्ग की जांच करने के लिए क्षैतिज रूप से हम सूचकांक 0 और 2 के साथ तत्वों को लेते हैं, और लंबवत रूप से - 1 और 3. यदि कोई मेल है, तो इस ब्लॉक को टकराव ap.v.coll के लिए सूची में जोड़ें।

जब खिलाड़ी चलता है, तो हम टकराव की इस सूची को अपडेट करेंगे, लेकिन, प्रदर्शन को बचाने के लिए, हम ऐसा हर चरण पर नहीं करेंगे (या बल्कि, फ्रेम प्रदान करते हुए), लेकिन जब खिलाड़ी एक निश्चित वर्ग को छोड़ता है, तो थोड़ा छोटा होता है, जो ap.v.ollwStep में निर्दिष्ट होता है और ap.v.collhStep, जैसे 8 और 4 मीटर। यही है, जब खिलाड़ी अपने मूल स्थान से क्षैतिज या लंबवत रूप से एक निश्चित मार्ग से गुजरता है, तो हम फिर से टक्कर सरणी को फिर से इकट्ठा करेंगे। उसी समय, आइए इसकी स्थिति को याद रखें जिस पर हमने अगली पुनरावृत्ति के लिए इसका उपयोग करने के लिए सरणी को पुन: प्राप्त किया। pers [ax] - यहाँ ax से हमारा मतलब है निर्देशांक अक्ष (ax), यह x या z हो सकता है, यह उस कॉरिडोर की दिशा पर निर्भर करता है जिसके साथ खिलाड़ी चल रहा है।

 //   if ((Math.abs(pers[ax] - ap.v.collw) > ap.v.collwStep) || (Math.abs(pers.y - ap.v.collh) > ap.v.collhStep)) { ap.v.collw = pers[ax]; ap.v.collh = pers.y; ap.collisionsUpdate(pers[ax], pers.y, 12, 8); };

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

ऊपर तैयार किए गए टकराव सरणी का उपयोग करके फ्रेम के प्रत्येक प्रतिपादन में टकराव की परिभाषा:

कोड

 collisionsDetect: function(x, y, xOld, yOld, up) { //up=-1 -  var res = false, o; var collw = false, collh = false, collwi = false, collhi = false, collhsup = false, support = [], supportf = false, fw = false, upb = -1; var bub = -1, bubw = 0; var pw2 = ap.v.player.pw2, ph2 = ap.v.player.ph2, supportd = ap.v.supportd; for (var i = 0; i < ap.v.coll.length; i++) { o = ap.v.coll[i]; collwi = false; collhi = false; collhsup = false; fw = false; if ((x + pw2 >= o[0]) & (x - pw2 <= o[2])) { if ((y + ph2 > o[1]) & (y - ph2 < o[3])) { collwi = true; }; }; //     if ((xOld + pw2 >= o[0]) & (xOld - pw2 <= o[2])) { if ((yOld + ph2 > o[1]) & (yOld - ph2 < o[3])) { bub = i; if (Math.abs(xOld - o[0]) < Math.abs(xOld - o[2])) { bubw = -1; } else { bubw = 1; }; }; }; if ((x >= o[0]) & (x <= o[2])) { fw = true; //  i   }; if ((y + ph2 >= o[1]) & (y - ph2 <= o[3])) { if ((x > o[0]) & (x < o[2])) { collhi = true; //  if (y + ph2 > o[3]) { collhsup = true; supportf = true; support = o; upb = 1; }; //  if (y - ph2 < o[1]) { upb = -1; }; }; }; if ((y - ph2 >= o[3] + supportd - 0.11) & (y - ph2 <= o[3] + supportd + 0.001)) { if (fw == true) { collhi = true; collh = true; res = true; collhsup = true; supportf = true; support = o; }; }; if (collwi & collhi) { res = true; }; if (collwi) { collw = true; }; if (collhi) { collh = true; }; }; return { f: res, w: collw, h: collh, support: support, supportf: supportf, upb: upb, bub: bub, bubw: bubw }; },

यहाँ x, y, xOld, yOld खिलाड़ी के नए और वर्तमान निर्देशांक हैं। नए लोगों की गणना एक बटन के स्पर्श में की जाती है, जो गति की एक निर्धारित गति के आधार पर होती है, अर्थात ये संभव निर्देशांक हैं। उन्हें यह देखने के लिए चेक किया जाता है कि क्या वे टकराव की सूची से किसी ब्लॉक के अंदर आते हैं। यदि वे गिरते हैं, तो वे पुराने लोगों को वापस रोल करते हैं, और खिलाड़ी बाधा से नहीं गुजरता है। और अगर वे गिरते नहीं हैं, तो वे चालू हो जाते हैं। pw2 और ph2 खिलाड़ी की काल्पनिक कोलाइडर (खिलाड़ी की चौड़ाई / 2, खिलाड़ी की ऊंचाई / 2) की चौड़ाई और ऊँचाई आधी है। आउटपुट क्षैतिज और ऊर्ध्वाधर टक्कर (collw, collh) है, चाहे प्लेयर (supportf) के तहत एक समर्थन खंड है या नहीं, यह जारी किया गया है - यह स्पष्ट करता है कि क्या आगे गिरने वाले एनिमेशन को शुरू करना है या यदि खिलाड़ी को केवल पड़ोसी ब्लॉक में स्विच किया गया है, और इसी तरह। बस यह न पूछें कि मैंने वहाँ 0.001 क्यों जोड़ा और 0.11 घटाया। यह एक भयानक बैसाखी है जो एक क्षैतिज बाधा से टकराने के दौरान ब्लॉक और घबराहट के प्रभाव को गिरने से रोकता है ... यह कार्य काम करता है, लेकिन इसे सामान्य तरीके से फिर से लिखने की आवश्यकता है। इस फ़ंक्शन का अनुकूलन भी अभी तक गायब है।

मुझे लगता है कि टकराव के साथ यहां समाप्त होना सार्थक है।

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

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

गेमपैड

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

विंडोज 8.1 पर एक टैबलेट और विंडोज 10. पीसी पर एक ब्राउज़र में गेमपैड के संचालन का प्रदर्शन करने वाला एक वीडियो, हालांकि, एक पुराना है, जो 2014 में जारी किया गया था, इसलिए इस पर गेम में गतिशील प्रकाश व्यवस्था बंद कर दी गई है।

गेमपैड को चुनने के लिए, प्रत्येक 100 मिलीसेकंड का उपयोग करने के बाद एक फ़ंक्शन कहा जाता है। यह मेरे पुस्तकालय m3d.lib.globalTimer.addEvent के फ़ंक्शन का उपयोग करके सेट किया गया है।

 m3d.lib.globalTimer.addEvent({ name: 'gamepad', ti: 100, f: function() { var st = m3d.gamepad.state(); if (st == false) { if (contr.gpDownFlag == true) { m3d.gamepad.resetH(); }; }; } });

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

खेल प्रत्येक गेमपैड कुंजी के लिए हैंडलर भी सेट करता है: 'ए' अक्ष (अक्ष) के लिए है, बटन (बटन) के लिए 'बी', और 11 क्रॉस के क्षैतिज अक्ष के साथ बाएं विचलन है (जैसे कि इसका बटन 1), 12 - क्रॉस के क्षैतिज अक्ष के साथ सही विचलन (जैसे कि इसके बटन 2), 21 और 22 - ऊर्ध्वाधर अक्ष के लिए। उदाहरण के लिए:

['ए', ११],
['बी', ३]

इसका मतलब है कि अगला फ़ंक्शन बाईं ओर क्षैतिज अक्ष के साथ विचलन के लिए और बटन 3 (बाएं) के लिए एक ही समय पर सेट किया जाएगा। खैर, फिर एक फ़ंक्शन सेट किया जाता है जिसे बटन दबाए जाने पर निष्पादित किया जाएगा, और फिर जब जारी किया जाएगा।

  m3d.gamepad.setHandler( [ ['a', 11], ['b', 3] ], function(v) { if (contr.btState.lt == false) { contr.keyDownFlag = true; contr.btState.lt = true; contr.gpDownFlag = true; apcontrolsRenderStart(); }; }, function(v) { contr.btState.lt = false; m3d.contr.controlsCheckBt(); apcontrolsRenderStart(); } );

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

मैं आपको केवल इसका एक हिस्सा दे सकता हूं - गेमपैड, जिसमें मैंने गेमपैड की शुरुआत, हैंडलर की स्थापना और राज्य के मतदान को सबसे सरल तरीके से लागू किया।

कोड

 gamepad: { connected: false, gamepad: {}, gamepadKey: '', axesCount: 0, buttonsCount: 0, f: [], //  fup: [], //  fval: [], //      fupCall: [], //   buttons: [], //link to f [0.. ] axes: [], //link to f [0.. ] initCb: function() {}, resetH: function() {}, init: function(gp) { var f = false; for (var key in gp) { if (f == false) { if (gp[key] != null) { if (typeof gp[key].id !== "undefined") { f = true; this.connected = true; this.gamepad = gp[key]; this.gamepadKey = key; }; }; }; }; if (typeof this.gamepad.axes !== "undefined") { this.axesCount = this.gamepad.axes.length; }; if (typeof this.gamepad.buttons !== "undefined") { this.buttonsCount = this.gamepad.buttons.length; }; this.f = []; this.fup = []; this.fval = []; this.fupCall = []; this.axes = []; for (var i = 0; i < this.axesCount * 2; i++) { this.axes.push(-1); }; this.buttons = []; for (var i = 0; i < this.buttonsCount; i++) { this.buttons.push(-1); }; this.initCb(); }, setHandlerReset: function(f) { this.resetH = f; }, setHandler: function(ar, f, fup) { //ar['b',3] ['a',11] var fi, bt, ax, finext, finexta; finexta = false; for (var i = 0; i < ar.length; i++) { if (ar[i][0] == 'a') { ax = Math.floor(ar[i][1] / 10); bt = ar[i][1] - (ax * 10); bt = ax * 2 + bt - 3; fi = this.axes[bt]; if (fi == -1) { //   fi = this.f.length; if (finexta == false) { finexta = true; this.f.push(f); this.fup.push(fup); this.fval.push(0); this.fupCall.push(true); this.axes[bt] = fi; } else { fi--; this.f[fi] = f; this.fup[fi] = fup; this.axes[bt] = fi; }; } else { this.f[fi] = f; this.fup[fi] = fup; }; } else if (ar[i][0] == 'b') { bt = ar[i][1] - 1; fi = this.buttons[bt]; if (fi == -1) { //   fi = this.f.length; if (finexta == false) { finexta = true; this.f.push(f); this.fup.push(fup); this.fval.push(0); this.fupCall.push(true); this.buttons[bt] = fi; } else { fi--; this.f[fi] = f; this.fup[fi] = fup; this.buttons[bt] = fi; }; } else { this.f[fi] = f; this.fup[fi] = fup; }; }; }; }, state: function() { var pressed = false; var fi, fval, axesval; for (var i = 0; i < this.fval.length; i++) { this.fval[i] = 0; }; //   var gp = navigator.getGamepads()[this.gamepadKey]; for (var i = 0; i < this.axesCount; i++) { axesval = Math.round(gp.axes[i]); if (axesval < 0) { pressed = true; fi = this.axes[i * 2]; if (fi != -1) { this.fval[fi] = gp.axes[i]; this.fupCall[fi] = true; }; } else if (axesval > 0) { pressed = true; fi = this.axes[i * 2 + 1]; if (fi != -1) { this.fval[fi] = gp.axes[i]; this.fupCall[fi] = true; }; }; }; for (var i = 0; i < this.buttonsCount; i++) { if (gp.buttons[i].pressed == true) { pressed = true; fi = this.buttons[i]; if (fi != -1) { this.fval[fi] = 1; this.fupCall[fi] = true; }; }; }; for (var i = 0; i < this.fval.length; i++) { fval = this.fval[i]; if (fval != 0) { this.f[i](this.fval[i]); } else { if (this.fupCall[i] == true) { this.fupCall[i] = false; this.fup[i](this.fval[i]); }; }; }; return pressed; } }, //gamepad

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

उत्तरदायी स्क्रीन

खेल 16: 9 के पहलू अनुपात के लिए डिज़ाइन किया गया है। लेकिन मैंने% 10% का स्वत: क्षैतिज समायोजन जोड़ा, ताकि विस्तारित ब्राउज़र विंडो में पक्षों पर ऐसी काली पट्टियाँ न हों:

और यह इस तरह होगा:

फुल-स्क्रीन मोड में, असली 16: 9 होगा। ब्राउज़र विंडो के किसी भी पहलू अनुपात में सामान्य रूप से छवि को अनुकूलित करना संभव होगा, लेकिन मैंने ऐसा नहीं किया, क्योंकि कम चौड़ी खिड़की बहुत बड़े देखने के कोण को जन्म देगी, जो कि गेमप्ले के दृष्टिकोण से अच्छा नहीं है: दूर के मृत छोर, ऑब्जेक्ट, दुश्मन तुरंत दिखाई देंगे और बाकी सब कुछ जो खिलाड़ी को अभी तक देखने की जरूरत नहीं है। इसलिए, मैंने अपने आप को। 10% 16: 9 के भीतर समायोजित करने के लिए सीमित कर दिया। हालांकि, संकीर्ण मॉनिटर (4: 3) के लिए, मैंने फिर भी वाई कुंजी दबाकर 16: 9 से अनुकूलन मोड में 4: 3 से 16: 9 तक स्विच करने की क्षमता का एहसास किया। लेकिन व्यापक नहीं - इसलिए, फिर से, गेमप्ले को तोड़ने के लिए नहीं। यही है, आप क्लासिक 16: 9 अनुपात में खेल सकते हैं, या आप छवि को क्षैतिज रूप से क्रॉप करके विंडो की ऊंचाई तक बढ़ा सकते हैं। हालांकि, यह भी बहुत अच्छा नहीं है, उदाहरण के लिए, आर्केड स्थितियों में, जब खिलाड़ी की तरफ से कुछ उड़ता है। प्रतिक्रिया के लिए बहुत कम समय बचा है। लेकिन आप हमेशा क्लासिक मोड में जल्दी लौट सकते हैं।

स्क्रीन का अनुकूलन, साथ ही खेल में उपयोग की जाने वाली सभी गर्म कुंजियों को निम्नलिखित वीडियो में दिखाया गया है:

दरअसल, गेम सेटिंग्स में आस्पेक्ट रेश्यो सेट है।

 aspect1:{w:1280, h:720, p:10}, //16x9 +- 10% aspect2:{w:960, h:720, p:34}, //4x3 +- 34%

और खेल में, जब आप Y दबाते हैं, तो यह स्विच करता है:

 contr.btCodesDn[89] = function() { //'y' if (m3dcache.setup.aspect.swch == 1) { m3dcache.setup.aspect = m3dcache.setup.aspect2; m3dcache.setup.aspect.swch = 2; } else { m3dcache.setup.aspect = m3dcache.setup.aspect1; m3dcache.setup.aspect.swch = 1; }; m3d.core.onWindowResize(0); m3d.contr.renderAll(); };

मेरी लाइब्रेरी में एक घटना है जो आकार बदलने वाली खिड़की पर लटका है। यहाँ इसका एक टुकड़ा है:

कोड

 m3dcache.v.vw = window.innerWidth; m3dcache.v.vh = window.innerHeight; m3dcache.v.vclipw = 0; m3dcache.v.vcliph = 0; if (typeof m3dcache.setup.aspect !== "undefined") { if ((m3dcache.setup.aspect.w == 0) || (m3dcache.setup.aspect.h == 0)) {} else { var o = m3d.lib.inBlock(0, 0, m3dcache.setup.aspect.w, m3dcache.setup.aspect.h, 0, 0, m3dcache.v.vw, m3dcache.v.vh, 'center', 'center', 'resize'); if (typeof m3dcache.setup.aspect.p !== "undefined") { if (o.clipx > 0) { ow = ow * (m3dcache.setup.aspect.p / 100 + 1); if (ow > m3dcache.v.vw) { ow = m3dcache.v.vw; }; o = m3d.lib.inBlock(0, 0, ow, oh, 0, 0, m3dcache.v.vw, m3dcache.v.vh, 'center', 'center', 'resize'); }; }; m3dcache.v.vclipw = o.clipx; m3dcache.v.vcliph = o.clipy; var margx = o.clipx + 'px', margy = o.clipy + 'px'; document.getElementById('m3dcontainer').style.marginLeft = margx; document.getElementById('m3dcontainer').style.marginTop = margy; if (document.getElementById('renderer') !== null) { document.getElementById('renderer').style.marginLeft = margx; document.getElementById('renderer').style.marginTop = margy; }; m3dcache.v.vw = ow; m3dcache.v.vh = oh; }; };

m3d.lib.inBlock भी मेरी लाइब्रेरी का एक फ़ंक्शन है, जो एक आयत को किसी अन्य आयत में केंद्र, स्केलिंग या क्रॉपिंग जैसे मापदंडों के साथ अंकित करता है, और उत्कीर्ण आयत के नए आयामों को प्रदर्शित करता है, साथ ही इस प्रक्रिया में बनने वाले फ़ील्ड्स के आकार भी। इस जानकारी के आधार पर, विंडो का div कंटेनर तैनात है। 'रेंडरर' एक 3D दृश्य का एक ब्लॉक संदर्भ तत्व है। फिर कैनवास को वहां प्राप्त मापदंडों के अनुसार बढ़ाया जाता है।

UI को कंटेनर में एक अलग कैनवास तत्व पर प्रदर्शित किया जाता है। सामान्य तौर पर, दस्तावेज़ ट्री में तीन पारदर्शी DIV ब्लॉक होते हैं जिनमें पूर्ण स्थिति (खेल की जरूरतों के आधार पर कम या ज्यादा संभव है): नीचे की तरफ 3D दृश्य का कैनवास है, ऊपर IU के लिए कैनवास है और शीर्ष का उपयोग अंतरंग इंटरफ़ेस तत्वों और अन्य दृश्य प्रभावों के लिए किया जाता है । यही है, यूआई 3 डी में प्रदान नहीं किया गया है, लेकिन इसके knavass, या परत पर। परतों को एक ही तस्वीर में मिलाने का काम ब्राउज़र पर छोड़ दिया जाता है। UI के साथ काम करने के लिए, मेरे पास लाइब्रेरी में एक विशेष ऑब्जेक्ट है। संक्षेप में - सार इस प्रकार है। पारदर्शिता के साथ png प्रारूप में UI तत्वों के साथ स्प्राइट सूची भरी हुई है। वहां से, आवश्यक तत्वों को लिया जाता है - पृष्ठभूमि, बटन। और वे js drawImage function (img, ix, iy, iw, ih, x, y, w, h) का उपयोग करके मध्य कैनवास पर खींचे जाते हैं। यही है, छवि से आवश्यक टुकड़े स्क्रीन पर आवश्यक पदों पर प्रदर्शित किए जाते हैं। बटन उनसे जुड़ी पृष्ठभूमि के शीर्ष पर प्रदर्शित होते हैं - उनके सभी पद और आकार UI कॉन्फ़िगरेशन में सेट होते हैं। एक विंडो का आकार बदलते समय, लक्ष्य कैनवास (जिस पर वे प्रदर्शित होते हैं) पर तत्वों की स्थिति पुनर्गणना होती है, यह इस बात पर निर्भर करता है कि यह तत्व क्षैतिज या लंबवत रूप से केंद्रित है या स्क्रीन के किसी कोने या चेहरे पर तड़क जाता है। यह एक अनुकूली यूआई बनाता है जो स्क्रीन के पहलू अनुपात पर निर्भर नहीं करता है। केवल यह आवश्यक है कि न्यूनतम संभव रिज़ॉल्यूशन क्षैतिज और लंबवत रूप से सेट किया जाए और इसके नीचे न गिरें ताकि तत्व एक-दूसरे को ओवरलैप न करें। मैं UI के बारे में एक और बार बात करूंगा, क्योंकि लेख स्वैच्छिक निकला, और मैं अभी भी UI पर काम कर रहा हूं, क्योंकि अभी भी बहुत सारे कमी वाले कार्य हैं जिनकी मुझे आवश्यकता है। उदाहरण के लिए, उच्च-रिज़ॉल्यूशन मॉनिटर पर, इंटरफ़ेस छोटा दिखेगा। आप स्क्रीन रिज़ॉल्यूशन के आधार पर तत्वों के आकार को एक निश्चित गुणांक से गुणा कर सकते हैं। दूसरी ओर, शायद स्क्रीन पर विशाल बटन की आवश्यकता नहीं है? यदि स्क्रीन रिज़ॉल्यूशन विशाल है, तो स्क्रीन स्वयं काफी बड़ी है।

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

मुझे लगता है कि आज के लिए इतना ही काफी है। इस या उस पर अमल कैसे करना है, इस बारे में सोचना अभी बाकी है। इस बीच, मैं प्रोग्रामिंग से कुछ समय के लिए पचता हूं और प्रचार करता हूं। मैं इंडी शोकेस की एक जोड़ी में भाग लेने की योजना बना रहा हूं और सक्रिय रूप से सोशल नेटवर्क में गेम के प्रचार में लगा हुआ हूं, क्योंकि नवंबर में मेरी योजना क्राउडफंडिंग प्लेटफॉर्म पर जाने की है: मुझे गेम को पूरा करने के लिए 3 डी ग्राफिक्स और कंकाल एनीमेशन के क्षेत्र में विशेषज्ञों की आवश्यकता होगी।

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

थ्री.जेएस पर एक पुराने माहौल के साथ एक नया खेल। भाग २

स्तर के चित्र

गेमपैड

उत्तरदायी स्क्रीन

More articles: