今日はHabréでの宇宙船の日です。EVEOnlineでの最後の戦闘に関する興味深い記事がたくさんありますが、暇なときに2次元の宇宙ゲームを作り続け、長い休憩の後、船の発電機を取り上げました。 EVEのようにシックではなく、自分の船を出荷します。
猫の下で、キャンバスにそのようなレンダリングを作成する方法を気にしてください。
エントリー
まず、そのようなジェネレーターが必要な理由を言う必要があります。 いくつかの理由があります。
- 船のスプライトが必要ですが、私は本当に描画できませんが、コンピューターはできます
- ゲーム内のパイロットが市場にある同じ船のセットなしで、自分の船の図面を作成できるようにしたかったのです。
- アーティストが作るさまざまなテクニックの美しいコンセプトを常に見ていて、少なくともこのレベルに少し近づいたかった
- まあ、それはただ面白いです
ジェネレーターでできること：
- JSONデータに基づいて（後で説明する船舶の仕様に基づいて）、ゲームに挿入するために透明な背景に船の写真を生成します
- フォーラムのどこかでダウンロード、アップロード、投稿できる美しいレンダリングを生成します
- ship configを発行します。これはフォーラムにコピーすることもでき、別の人がどのようなダーウィンのペペラトをしたかを見ることができます=）
さて、この船の仕様についてもっと詳しく見てみましょう。これは上からのレンダリングで見ることができます。 技術的には、彼女はどのように船を組み立てるべきかを説明しています。 裏話の観点から、これは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.github.io/ship-gen
次にエディターとゲームの統合について書こうと思ったら、面白いと思います。
安全に飛びます！