From d5d02aa80d3ec76185069e528b56b150b79c7792 Mon Sep 17 00:00:00 2001 From: Danielv123 Date: Mon, 5 Feb 2018 17:51:06 +0100 Subject: [PATCH] Using real textures of belts from spritesheet instead of icons --- lib/npmPostinstall.js | 12 +++++++---- static/lib/entityDrawRules.js | 29 +++++++++++++++++++++++++- static/remoteMap.js | 39 +++++++++++++++++++++++++++++------ 3 files changed, 69 insertions(+), 11 deletions(-) diff --git a/lib/npmPostinstall.js b/lib/npmPostinstall.js index 7ad32b06..8fc1de66 100644 --- a/lib/npmPostinstall.js +++ b/lib/npmPostinstall.js @@ -19,12 +19,13 @@ directories.forEach(path => { }); }); -function download(url, file){ +function download(url, file, callback){ var writeStream = fs.createWriteStream(file); var request = http.get(url, function(response) { response.pipe(writeStream); response.on("end", () => { - console.log("Downloaded "+file+" from "+url) + if(callback && typeof callback == "function") callback(file); + console.log("Downloaded "+file+" from "+url); }); }); } @@ -32,7 +33,10 @@ function download(url, file){ let downloadList = [ { url: "http://fbpviewer.trakos.pl/images/spritesheet.json", - file: "static/pictures/spritesheet.json", + file: "static/pictures/spritesheet.js", + callback: function(file){ + fs.writeFileSync("static/pictures/spritesheet.js", "export default\n"+fs.readFileSync("static/pictures/spritesheet.js")); + }, }, { url: "http://fbpviewer.trakos.pl/images/spritesheet.png", @@ -40,7 +44,7 @@ let downloadList = [ }, ] downloadList.forEach(item => { - download(item.url, item.file); + download(item.url, item.file, item.callback); }); // generate SSL certificates if they are missing diff --git a/static/lib/entityDrawRules.js b/static/lib/entityDrawRules.js index 01adf9f9..673c8b46 100644 --- a/static/lib/entityDrawRules.js +++ b/static/lib/entityDrawRules.js @@ -1,3 +1,6 @@ + +import spritesheetJson from "./../pictures/spritesheet.js"; + export var entityDrawRules = { "big-electric-pole": { sizeInTiles: { @@ -35,5 +38,29 @@ for(let i = 1; i <= 3; i++){ entityDrawRules[name] = template3x3entity; }; ["chemical-plant", "radar", "solar-panel", "lab", "electric-mining-drill", "beacon", "electric-furnace"].forEach(name => { - entityDrawRules[name] = template3x3entity; + entityDrawRules[name] = { + spritesheet: spritesheetJson.frames["images/factorio/entity/"+name+"/"+name+".png.0"], + sizeInTiles: { + x:3, + y:3, + }, + positionOffset: { + x:-1, + y:-1, + }, + } + // entityDrawRules[name] = template3x3entity; }); +["transport-belt", "fast-transport-belt", "express-transport-belt"].forEach(name => { + entityDrawRules[name] = { + rotOffset: 270, + spritesheet: spritesheetJson.frames["images/factorio/entity/"+name+"/"+name+".png.10"], + sizeInTiles: { + x:1.2,y:1.6, + }, + positionOffset: { + x:0,y:0, + } + } +}); + diff --git a/static/remoteMap.js b/static/remoteMap.js index 778f92b9..d1fa8b15 100644 --- a/static/remoteMap.js +++ b/static/remoteMap.js @@ -6,6 +6,8 @@ // rules for how entities are drawn (sizes, offset etc) import {entityDrawRules} from "./lib/entityDrawRules.js"; import {getParameterByName} from "./lib/utility.js"; +import spritesheetJson from "./pictures/spritesheet.js"; +var global = {}; const remoteMapConfig = { mapSize : 64, @@ -19,7 +21,11 @@ socket.on('hello', function (data) { setInterval(()=>{ socket.emit("heartbeat"); // send our heartbeat to prevent being assumed dead },10000); - requestMapDraw(); + global.spritesheet = new Image(); + global.spritesheet.onload = function(){ + requestMapDraw(); + } + global.spritesheet.src = "/pictures/spritesheet.png"; }); socket.on("displayChunk", function(chunk){ @@ -56,12 +62,18 @@ function requestMapDraw(){ } } } -function drawImageWithRotation(ctx, image, x, y, w, h, degrees){ +// ctx, entityImages[name].img, xPos, yPos, size.x, size.y, rotation, sprWidth, sprHeight, offLeft, offTop +function drawImageWithRotation(ctx, image, x, y, w, h, degrees, sprWidth, sprHeight, offLeft, offTop){ ctx.save(); ctx.translate(x+w/2, y+h/2); ctx.rotate(degrees*Math.PI/180.0); ctx.translate(-x-w/2, -y-h/2); - ctx.drawImage(image, x, y, w, h); + if(sprWidth != undefined && sprHeight != undefined && offLeft != undefined && offTop != undefined){ + console.log(sprWidth+" "+sprHeight+" "+offLeft+" "+offTop+" "+w+" "+h) + ctx.drawImage(image, offLeft, offTop, sprWidth, sprHeight, x, y, w, h); + } else { + ctx.drawImage(image, x, y, w, h); + } ctx.restore(); } @@ -152,6 +164,7 @@ function drawFromCache(){ }); } var entityImages = {}; // cache to store images and details about entities, populated by drawEntity(); + function drawEntity(entity, dontCache){ if(entity.x && entity.y){ if(!dontCache){ @@ -187,14 +200,24 @@ function drawEntity(entity, dontCache){ entityImages[name].draw = function(entity){ if(this.loaded){ let name = entity.entity.name; + let image, sprWidth, sprHeight, offLeft, offTop // check hardcoded entity draw rules for specifics (otherwise draw icon as 1x1 entity with rotation if specified) if(entityDrawRules[name]){ + let rules = entityDrawRules[name] + // console.log(entityDrawRules[name]) var offsetX = entityDrawRules[name].positionOffset.x; var offsetY = entityDrawRules[name].positionOffset.y; var size = { x: remoteMapConfig.tileSize * entityDrawRules[name].sizeInTiles.x, y: remoteMapConfig.tileSize * entityDrawRules[name].sizeInTiles.y, }; + if(rules.spritesheet){ + sprWidth = rules.spritesheet.frame.w; + sprHeight = rules.spritesheet.frame.h; + offLeft = rules.spritesheet.frame.x; + offTop = rules.spritesheet.frame.y; + image = global.spritesheet + } } else { var offsetX = 0, offsetY = 0; var size = { @@ -205,10 +228,14 @@ function drawEntity(entity, dontCache){ let yPos = ((entity.y + offsetY) * 16) - playerPosition.y; let rotation = 0; if(entity.entity.rot && !isNaN(Number(entity.entity.rot))){ - rotation = entity.entity.rot * 45; + if(entityDrawRules[name] && entityDrawRules[name].rotOffset){ + rotation = ((entity.entity.rot * 45) + entityDrawRules[name].rotOffset); + } else { + rotation = entity.entity.rot * 45; + } } - - drawImageWithRotation(ctx, entityImages[name].img, xPos, yPos, size.x, size.y, rotation); + if(!image) image = entityImages[name].img; + drawImageWithRotation(ctx, image, xPos, yPos, size.x, size.y, rotation, sprWidth, sprHeight, offLeft, offTop); //console.log("Drawing "+name+" at X: "+xPos+", Y: "+yPos+" with with rotation "+rotation); } else { // we are waiting for the image to load, push the task to our queue. It will be processed once the image loads.