Geekly Articles each Day

आर्मेचर स्पेसशिप जनरेटर

ग्रह की ओर से आपका अच्छा समय, हैबर।
आज का दिन हैबे में अंतरिक्ष यान का दिन है, ईवीई ऑनलाइन में आखिरी लड़ाई के बारे में बहुत सारे दिलचस्प लेख हैं, लेकिन अपने खाली समय में मैं अपने दो आयामी अंतरिक्ष के खेल को जारी रखना चाहता हूं और लंबे ब्रेक के बाद मैंने जहाज जनरेटर लिया। जहाजों और ईवीई के रूप में ठाठ के रूप में नहीं है, लेकिन अपने ही।



कौन परवाह करता है कि कैनवास पर इस तरह के एक रेंडर कैसे करें, कृपया, बिल्ली के नीचे।

प्रविष्टि


पहले आपको यह कहने की आवश्यकता है कि आपको ऐसे जनरेटर की आवश्यकता क्यों है। इसके कई कारण हैं:

जनरेटर क्या होना चाहिए:

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

चरण 0 - खाना पकाने के कैनवस और पेंट


सबसे पहले, हमें तीन कैनवस, #backCanvs, #mainCanvas और #topCanvas सेट करने की आवश्यकता है।

<canvas id="backCanvas" width="640" height="480"></canvas> <canvas id="mainCanvas" width="640" height="480"></canvas> <canvas id="topCanvas" width="640" height="480"></canvas>

यहां इनिशियलाइज़ेशन फंक्शन है, यह कैनवास के रिज़ॉल्यूशन को सेट करने के साथ ही इसके विजुअल डाइमेंशन से बहुत मशहूर ट्रिक का इस्तेमाल करता है।

 //    var canvasSize = { width: Math.floor(window.innerWidth*3.5), height: Math.floor(window.innerHeight*3.5) }; var cssSize = { width: window.innerWidth, height: window.innerHeight }; shipGen.layerInit(["#backCanvas", "#mainCanvas", "#topCanvas"], canvasSize, cssSize); //  shipGen.layerInit = function(canvases, canvasSize, cssSize) { shipGen.config.canvasSize = canvasSize; shipGen.config.cssSize = cssSize; //  ,     for(var i in shipGen.layers) { shipGen.layers[i].clearRect(0, 0, canvasSize.width, canvasSize.height) } shipGen.layers = []; for(var i in canvases) { shipGen.layers.push($(canvases[i]).attr("width", canvasSize.width) .attr("height", canvasSize.height) .css("width", cssSize.width) .css("height", cssSize.height).get(0).getContext("2d")); } }


चरण 0.5 - पाक कला ब्रश


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

 lines: [], //   JSON- config: { //   factor: 15, // factorRandLight: 3, //    angle: 0, //   canvasSize: {}, //  designName: "", // authorName: "" // }, counters: { // ,        heightShip: 0, //  hull: 0, //   linesCount: 0, //   sectionsCount: 0, //   totalMass: 0, //   }, data: { //     engines: [], blocks: [], pipes: [], cargos: [] }

हम जहाज के विन्यास को इस तरह सेट करते हैं:

 try { if(localStorage["config"]) { shipGen.lines = JSON.parse(localStorage["config"]); } else { shipGen.lines = JSON.parse($("#text").val()); } } catch(e) { alert("Error parse config"); }

मैं जहाज के एक छोटे से विन्यास का एक उदाहरण देता हूं। सबसे पहले, सभी पंक्तियों की एक सरणी का वर्णन किया गया है (इस मामले में उनमें से तीन हैं), प्रत्येक पंक्ति के लिए अगली पंक्ति की ऑफसेट इंगित की गई है, और वर्गों को सूचीबद्ध किया गया है, इस मामले में उनमें से दो प्रति पंक्ति हैं।
छिपा हुआ पाठ
 [ { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 10, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } } ]


सब कुछ तैयार है, हम लिखना शुरू करते हैं।

चरण 1 - पहले कैनवस पर सितारे लिखना


न केवल तारे, बल्कि एक छोटा निहारिका भी। यह दो कार्यों द्वारा किया जाता है:

 shipGen.render.nebula(Math.random(), canvasSize.width, canvasSize.height); shipGen.render.stars(Math.random(), canvasSize.width, canvasSize.height);

मुझे पृष्ठभूमि पेंटिंग कोड के बड़े हिस्से लाने का कोई कारण नहीं दिखता है, जो कोई भी कोड में दिखना चाहता है, और लेख के शीर्षक में अभी भी एक विकल्प "जहाज" है, तो चलो उन पर चलते हैं।
फिर भी, हमें पहले से ही ऐसा कुछ मिला है:



चरण 2 - दूसरे कैनवास पर एक अंतरिक्ष यान लिखना


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

 shipGen.process = function() { // #mainCanvas var ctx = shipGen.layers[1]; //    ctx.translate(shipGen.config.canvasSize.width/2, shipGen.config.canvasSize.height/2); ctx.rotate(shipGen.config.angle); //   shipGen.counters.linesCount = shipGen.lines.length; // ,      X  //    var lenShiftX = 0; for (var i = 0; i < shipGen.counters.linesCount; i++) { ctx.save(); //    var sections = shipGen.lines[i].sections; //      for(var component in sections) { //        shipGen.counters.sectionsCount += 1 //   ,           shipGen.selectComponent(sections[component], {lenShiftX: lenShiftX, blockTopW: sections[component].blockW2, blockBottomW: sections[component].blockW1 } ); } ctx.restore(); lenShiftX += shipGen.lines[i].nextLineX; //  ,         ctx.translate(shipGen.lines[i].nextLineX, 0); } }


SelectComponent फ़ंक्शन के साथ, हम पहले ब्लॉक को सही जगह पर खींचते हैं, फिर विशिष्ट घटक के ड्राइंग फ़ंक्शन को कॉल करते हैं, फिर समापन ब्लॉक को आकर्षित करते हैं:

 ... shipGen.block(obj.blockW1, obj.blockH1); ... shipGen.components[obj.name](obj); ... shipGen.block(obj.blockW1, obj.blockH1); ...

प्रत्येक घटक अपने स्वयं के कार्य द्वारा तैयार किया जाता है, केल मूव टैटो / लाइनटो / रेक्ट / फिल / स्ट्रोक। बस कल्पना करें कि घटक कैसा दिखना चाहिए और अनुक्रमिक रूप से वांछित निर्देशांक पर फ़ंक्शन को कॉल करना चाहिए। यहाँ कुछ उदाहरण हैं:
पाइप और ब्लॉक:



इंजन:



कार्गो ब्लॉक:



अच्छी तरह से और इतने पर, आप कई अलग-अलग घटक बना सकते हैं, जो कि करने की आवश्यकता है, लेकिन अभी तक नए जहाजों के प्रारूप का परीक्षण करने के लिए, तीन पर्याप्त हैं।
विन्यास के साथ जहाज का अंतिम परिणाम:
छिपा हुआ पाठ
 [ { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "4": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "4": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } } } } ]




चरण 3 - तीसरे कैनवस पर एक सुंदर पाठ लिखना


एक आदर्श चरण है, आपको एक सुंदर पाठ के रूप में जहाज की विशेषताओं को डिजाइन करने की आवश्यकता है। कम से कम, थोड़ा सुंदर।
और हम इसे बहुत आसानी से करते हैं, बस फ़ॉन्ट आकार बदलते हैं, और धीरे-धीरे वाई समन्वय को नीचे ले जाते हैं। बस लेखक, डिज़ाइन का नाम और अन्य के बारे में कॉन्फिग से डेटा का उपयोग करें। लेखक और डिज़ाइन के नाम की बात करें, तो मैंने उन्हें अभी के लिए स्थिर बना दिया है, क्योंकि वे खेल के साथ एकीकरण के दौरान बाहर खींच लिए जाएंगे, लेकिन अब के लिए अनजान और अनजान हैं।
 //   shipGen.render.text(); //  shipGen.render.text = function() { var ctx = shipGen.layers[2]; //  ctx.fillStyle = "#fff"; ctx.strokeStyle = "#fff"; ctx.font = "130pt Arial"; ctx.fillText("Vessel Design " + shipGen.config.number, 220, 220); //  ctx.font = "50pt Arial"; ctx.fillText("Vessel specification of Tranquilla Community VSC-V3", 250, 320); ctx.font = "40pt Arial"; //  ctx.fillText("Design name: " + shipGen.config.designName, 250, 420); //   ctx.fillText("Author name: " + shipGen.config.authorName, 250, 520); //     ctx.fillText("Place: Tranq One IV Station 41 (1020; 1210)", 250, 620); ctx.font = "35pt Arial"; //  ctx.fillText("Mass: " + shipGen.counters.totalMass, 250, 750); ctx.fillText("Hull: " + shipGen.counters.hull, 250, 800); ctx.fillText("Lines count: " + shipGen.counters.linesCount , 250, 850); ctx.fillText("Sections count: " + shipGen.counters.sectionsCount, 250, 900); ctx.fillText("Block count: " + shipGen.data.blocks.length, 250, 950); ctx.fillText("Pipe count: " + shipGen.data.pipes.length, 250, 1000); var lineY = 1150; //  for(var i in shipGen.data) { if(i == "blocks" || i == "pipes") continue; ctx.fillText(i.toString() + ":", 250, lineY - 50); for (var v in shipGen.data[i]) { ctx.fillText(i.toString() + ": " + JSON.stringify(shipGen.data[i][v], "", 1).replace(/\"/g, ''), 250, lineY); lineY += 50; } lineY+=100; } }

हमने पहले ही परिणाम ऊपर देखा था, मैं एक ही चीज़ को दूसरे कॉन्फ़िगरेशन के लिए देता हूं।
छिपा हुआ पाठ
 [ { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } } ]




चरण 4 - प्रदर्शनी खोलें


अंतिम चरण, हम FileSaver.js को कनेक्ट करते हैं, और सभी परतों को मिलाकर इस तरह के एक साधारण सेवर लिखते हैं।
 $("#save-render").click(function(){ var canvasMerge = $("<canvas width='"+canvasSize.width+"' height='"+canvasSize.height+"'></canvas>").get(0); var ctxMerge = canvasMerge.getContext("2d"); ctxMerge.fillStyle = "#000"; ctxMerge.fillRect(0, 0, canvasSize.width, canvasSize.height); ctxMerge.drawImage($("#backCanvas").get(0), 0, 0); ctxMerge.drawImage($("#mainCanvas").get(0), 0, 0); ctxMerge.drawImage($("#topCanvas").get(0), 0, 0); canvasMerge.toBlob(function(blob) { saveAs(blob, "render.png"); }); });


निष्कर्ष


उन लोगों के लिए जो कॉन्फ़िगरेशन के मैन्युअल संपादन से पीड़ित नहीं होना चाहते हैं, लेकिन बस नौकाओं को देखना चाहते हैं, यहां मैं कुछ कॉन्फ़िगरेशन देता हूं जो मैंने विकास की प्रक्रिया में किया था। उन्हें देखने के लिए आपको नीचे दिए गए "एडिट कॉन्फिगर" लिंक पर क्लिक करना होगा, उसे चुने हुए कॉन्फिगर में पेस्ट करना होगा, साथ ही नीचे दिए गए "अप्लाई" पर क्लिक करना होगा।
विशाल छः शासक
 [ { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } } ]




मालवाहक जहाज
 [ { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "4": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "4": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 80, "color": {"r":20,"g":20,"b":20}, "shift": 0, "step": 35 } } } ]




छोटी बत्ती
 [ { "nextLineX": 100, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 100, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 10, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 100, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 10, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 10, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 8, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } } ]




इसके अलावा एक बड़ा जहाज, लेकिन खराब तरीके से बनाया गया
 [ { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "cargo", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "2": { "name": "cargo", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "3": { "name": "cargo", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } }, "4": { "name": "cargo", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 35, "height": 35, "color": { "r": 20, "g": 20, "b": 20 } } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 15, "height": 70, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 40, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 15, "height": 70, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 15, "height": 70, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 30, "blockH2": 40, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 90, "width": 15, "height": 30, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } }, { "nextLineX": 200, "sections": { "0": { "name": "engine", "blockW1": 0, "blockH1": 0, "blockW2": 20, "blockH2": 10, "width": 12, "height": 8, "color": { "r": 25, "g": 20, "b": 20 }, "shift": 0, "widthLeft": 8, "widthRight": 8 }, "1": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 50, "blockH2": 60, "width": 15, "height": 70, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "2": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "3": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 10, "blockH2": 10, "width": 15, "height": 40, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 }, "4": { "name": "pipe", "blockW1": 40, "blockH1": 10, "blockW2": 40, "blockH2": 10, "width": 15, "height": 80, "color": { "r": 20, "g": 20, "b": 20 }, "shift": 0, "step": 35 } } } ]




सभी कोड हमेशा github पर उपलब्ध है: github.com/MagistrAVSH/ship-gen
डेमो यहां देखा जा सकता है: magistravsh.imtqy.com/ship-gen-
अगली बार जब मैं गेम के साथ संपादक के एकीकरण के बारे में लिखने की उम्मीद करता हूं, तो मुझे लगता है कि यह दिलचस्प होगा।
सुरक्षित उड़ो!

Source: https://habr.com/ru/post/In210622/

More articles:


All Articles