Geekly Articles each Day

アーマチュア宇宙船ジェネレーター

地球のあなたの側で楽しい時間を
今日はHabréでの宇宙船の日です。EVEOnlineでの最後の戦闘に関する興味深い記事がたくさんありますが、暇なときに2次元の宇宙ゲームを作り続け、長い休憩の後、船の発電機を取り上げました。 EVEのようにシックではなく、自分の船を出荷します。



猫の下で、キャンバスにそのようなレンダリングを作成する方法を気にしてください。

エントリー


まず、そのようなジェネレーターが必要な理由を言う必要があります。 いくつかの理由があります。

ジェネレーターでできること：

さて、この船の仕様についてもっと詳しく見てみましょう。これは上からのレンダリングで見ることができます。 技術的には、彼女はどのように船を組み立てるべきかを説明しています。 裏話の観点から、これはGOSTのようなものであり、商業会社による船舶の生産を標準化するために発明されました。 ゲームプレイの観点から見ると、これはある種の船の一般的なデザインを作成しようとする試みであり、タイルエディタを作成することはできません（船がセルに描画される場合）。 もちろん、構成を編集することで多くの変更ができるため、全体的な設計はかなりpretty意的です。
この「GOST」によると、船は何でできていますか？ 基本は線（線）であり、線は互いに平行な一連のセクション（セクション）です。 セクションは、コンポーネントに加えて、いくつかのセクションを一列にまとめる2つのブロックです。 コンポーネントはそれ以上のものである場合があります、それは単に構造物の強度を高めるためだけに必要なファスナーであり、その重量を大幅に増加させることなく、貨物ブロック、コントロールユニット、エンジン、または武器を設置するプラットフォームなどによって必要になります。
船舶ジェネレータとは何かについてはすでに十分に話したと思うので、実際にこれらのレンダリングを生成する方法を見てみましょう。

ステップ0-キャンバスとペイントの調理


最初に、＃backCanvs、＃mainCanvas、＃topCanvasの3つのキャンバスを設定する必要があります。

<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-調理用ブラシ


今、あなたは2番目、そして最も重要なことを行う必要があります-構成。
既に述べたように、船の設定自体はJSON形式で記述され、その後JavaScriptオブジェクトに解析されますが、図面自体の設定はまだあります。

 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: [] }

ship設定は次のように設定します

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

船の小さな構成の例を示します。 まず、すべての行の配列が記述され（この場合は3行あります）、各行に対して次の行のオフセットが示され、セクションがリストされます（この場合は行ごとに2行）。
非表示のテキスト
 [ { "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-最初のキャンバスに星を書く


星だけでなく、小さな星雲も。 これは2つの関数によって行われます。

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

背景ペインティングコードを大量に持ち込む理由はわかりません。必要な人は誰でもコードを見ることができます。記事の見出しには「船」という部分文字列が残っているので、続けましょう。
それにもかかわらず、私たちはすでにこのようなものを手に入れました：



ステップ2-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); ...

各コンポーネントは、通常のmoveTo / LineTo / rect / fill / strokeの機能によって描画されます。 コンポーネントがどのように見えるかを想像し、目的の座標で関数を順番に呼び出します。 以下に例を示します。
パイプとブロック：



エンジン：



貨物ブロック：



まあなど、あなたは多くの異なるコンポーネントを作ることができます、それはやらなければならないことですが、今のところ新しい船のフォーマットをテストするためには、3つで十分です。
構成の最終的な出荷結果：
非表示のテキスト
 [ { "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-3番目のキャンバスに美しいテキストを書く


最後から2番目の段階があり、美しいテキストの形式で船の特性を設計する必要があります。 まあ、少なくとも少し美しい。
そして、フォントサイズを変更し、Y座標を徐々に下に移動するだけです。 作成者、デザインの名前などに関する設定からのデータを使用するだけです。 作者とデザインの名前について言えば、ゲームとの統合中にそれらが取り出されるので、今のところ静的にしていますが、今のところは、Unnamed and Unknownをしましょう。
 //   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/J210622/

More articles:


All Articles