From 6213344090592605992be4d8a6a6fff58987f3c0 Mon Sep 17 00:00:00 2001 From: jomo Date: Thu, 23 Jul 2015 11:13:24 +0200 Subject: [PATCH] lots of rendering improvements - we don't need to resize images. canvas can do that for us - we don't need to use `scale(-1, 1)` to draw flipped - most of the old/new skin format shares the same code - we can draw the skin image directly on the canvas --- lib/renders.js | 193 ++++++++++++++++++------------------------------- 1 file changed, 70 insertions(+), 123 deletions(-) diff --git a/lib/renders.js b/lib/renders.js index 470006d..dc362bd 100644 --- a/lib/renders.js +++ b/lib/renders.js @@ -8,136 +8,90 @@ var Canvas = require("canvas"); var Image = Canvas.Image; var exp = {}; -// scales an image from the +imagedata+ onto the +context+ -// scaled by a factor of +scale+ with options +d_x+ and +d_y+ -function scale_image(imageData, context, d_x, d_y, scale) { - var width = imageData.width; - var height = imageData.height; - context.clearRect(0, 0, width, height); // Clear the spot where it originated from - for (var y = 0; y < height; y++) { // height original - for (var x = 0; x < width; x++) { // width original - // Gets original colour, then makes a scaled square of the same colour - var index = (x + y * width) * 4; - context.fillStyle = "rgba(" + imageData.data[index + 0] + ", " + imageData.data[index + 1] + ", " + imageData.data[index + 2] + ", " + imageData.data[index + 3] + ")"; - context.fillRect(d_x + x * scale, d_y + y * scale, scale, scale); - } - } -} - -// draws the helmet on to the +skin_canvas+ -// using the skin from the +model_ctx+ at the +scale+ -exp.draw_helmet = function(skin_canvas, model_ctx, scale) { +// draws the helmet on to the +skin+ +// using the skin from the +ctx+ at the +scale+ +exp.draw_helmet = function(skin, ctx, scale) { // Helmet - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 40 * scale, 8 * scale, 8 * scale, 8 * scale, 10 * scale, 13 / 1.2 * scale, 8 * scale, 8 * scale); + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 40, 8, 8, 8, 10 * scale, 13 / 1.2 * scale, 8 * scale, 8 * scale); // Helmet - Right - model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 32 * scale, 8 * scale, 8 * scale, 8 * scale, 2 * scale, 3 / 1.2 * scale, 8 * scale, 8 * scale); + ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 32, 8, 8, 8, 2 * scale, 3 / 1.2 * scale, 8 * scale, 8 * scale); // Helmet - Top - model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); - model_ctx.scale(-1, 1); - model_ctx.drawImage(skin_canvas, 40 * scale, 0, 8 * scale, 8 * scale, -3 * scale, 5 * scale, 8 * scale, 8 * scale); + ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); + ctx.drawImage(skin, 48, 0, -8, 8, -5 * scale, 5 * scale, 8 * scale, 8 * scale); }; -// draws the head on to the +skin_canvas+ -// using the skin from the +model_ctx+ at the +scale+ -exp.draw_head = function(skin_canvas, model_ctx, scale) { +// draws the head on to the +skin+ +// using the skin from the +ctx+ at the +scale+ +exp.draw_head = function(skin, ctx, scale) { // Head - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 8 * scale, 8 * scale, 8 * scale, 8 * scale, 10 * scale, 13 / 1.2 * scale, 8 * scale, 8 * scale); + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 8, 8, 8, 8, 10 * scale, 13 / 1.2 * scale, 8 * scale, 8 * scale); // Head - Right - model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 0, 8 * scale, 8 * scale, 8 * scale, 2 * scale, 3 / 1.2 * scale, 8 * scale, 8 * scale); + ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 0, 8, 8, 8, 2 * scale, 3 / 1.2 * scale, 8 * scale, 8 * scale); // Head - Top - model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); - model_ctx.scale(-1, 1); - model_ctx.drawImage(skin_canvas, 8 * scale, 0, 8 * scale, 8 * scale, -3 * scale, 5 * scale, 8 * scale, 8 * scale); + ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); + ctx.drawImage(skin, 16, 0, -8, 8, -5 * scale, 5 * scale, 8 * scale, 8 * scale); }; -// draws the body on to the +skin_canvas+ -// using the skin from the +model_ctx+ at the +scale+ +// draws the body on to the +skin+ +// using the skin from the +ctx+ at the +scale+ // parts are labeled as if drawn from the skin's POV -exp.draw_body = function(rid, skin_canvas, model_ctx, scale) { - if (skin_canvas.height === 32 * scale) { +exp.draw_body = function(rid, skin, ctx, scale) { + // Right Leg + // Right Leg - Right + ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 0, 20, 4, 12, 4 * scale, 26.4 / 1.2 * scale, 4 * scale, 12 * scale); + // Right Leg - Front + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 4, 20, 4, 12, 8 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); + + // Body + // Body - Front + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 20, 20, 8, 12, 8 * scale, 20 / 1.2 * scale, 8 * scale, 12 * scale); + + // Arm Right + // Arm Right - Right + ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 40, 20, 4, 12, 0, 16 / 1.2 * scale, 4 * scale, 12 * scale); + // Arm Right - Front + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 44, 20, 4, 12, 4 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); + // Arm Right - Top + ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); + ctx.drawImage(skin, 48, 16, -4, 4, 12 * scale, 16 * scale, 4 * scale, 4 * scale); + + if (skin.height === 32) { logging.debug(rid, "uses old skin format"); // Left Leg // Left Leg - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.scale(-1, 1); - model_ctx.drawImage(skin_canvas, 4 * scale, 20 * scale, 4 * scale, 12 * scale, -16 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); - - // Right Leg - // Right Leg - Right - model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 0 * scale, 20 * scale, 4 * scale, 12 * scale, 4 * scale, 26.4 / 1.2 * scale, 4 * scale, 12 * scale); - // Right Leg - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 4 * scale, 20 * scale, 4 * scale, 12 * scale, 8 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 8, 20, -4, 12, 12 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); // Arm Left // Arm Left - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.scale(-1, 1); - model_ctx.drawImage(skin_canvas, 44 * scale, 20 * scale, 4 * scale, 12 * scale, -20 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 48, 20, -4, 12, 16 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); // Arm Left - Top - model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); - model_ctx.drawImage(skin_canvas, 44 * scale, 16 * scale, 4 * scale, 4 * scale, 0, 16 * scale, 4 * scale, 4 * scale); - - // Body - // Body - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 20 * scale, 20 * scale, 8 * scale, 12 * scale, 8 * scale, 20 / 1.2 * scale, 8 * scale, 12 * scale); - - // Arm Right - // Arm Right - Right - model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 40 * scale, 20 * scale, 4 * scale, 12 * scale, 0, 16 / 1.2 * scale, 4 * scale, 12 * scale); - // Arm Right - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 44 * scale, 20 * scale, 4 * scale, 12 * scale, 4 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); - // Arm Right - Top - model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); - model_ctx.scale(-1, 1); - model_ctx.drawImage(skin_canvas, 44 * scale, 16 * scale, 4 * scale, 4 * scale, -16 * scale, 16 * scale, 4 * scale, 4 * scale); + ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); + ctx.drawImage(skin, 44, 16, 4, 4, 0, 16 * scale, 4 * scale, 4 * scale); } else { logging.debug(rid, "uses new skin format"); // Left Leg // Left Leg - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 20 * scale, 52 * scale, 4 * scale, 12 * scale, 12 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); - - // Right Leg - // Right Leg - Right - model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 0, 20 * scale, 4 * scale, 12 * scale, 4 * scale, 26.4 / 1.2 * scale, 4 * scale, 12 * scale); - // Right Leg - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 4 * scale, 20 * scale, 4 * scale, 12 * scale, 8 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 20, 52, 4, 12, 12 * scale, 34.4 / 1.2 * scale, 4 * scale, 12 * scale); // Arm Left // Arm Left - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 36 * scale, 52 * scale, 4 * scale, 12 * scale, 16 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); + ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); + ctx.drawImage(skin, 36, 52, 4, 12, 16 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); // Arm Left - Top - model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); - model_ctx.drawImage(skin_canvas, 36 * scale, 48 * scale, 4 * scale, 4 * scale, 0, 16 * scale, 4 * scale, 4 * scale); - - // Body - // Body - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 20 * scale, 20 * scale, 8 * scale, 12 * scale, 8 * scale, 20 / 1.2 * scale, 8 * scale, 12 * scale); - - // Arm Right - // Arm Right - Right - model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 40 * scale, 20 * scale, 4 * scale, 12 * scale, 0, 16 / 1.2 * scale, 4 * scale, 12 * scale); - // Arm Right - Front - model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); - model_ctx.drawImage(skin_canvas, 44 * scale, 20 * scale, 4 * scale, 12 * scale, 4 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale); - // Arm Right - Top - model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); - model_ctx.scale(-1, 1); - model_ctx.drawImage(skin_canvas, 44 * scale, 16 * scale, 4 * scale, 4 * scale, -16 * scale, 16 * scale, 4 * scale, 4 * scale); + ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0); + ctx.drawImage(skin, 36, 48, 4, 4, 0, 16 * scale, 4 * scale, 4 * scale); } }; @@ -146,34 +100,27 @@ exp.draw_body = function(rid, skin_canvas, model_ctx, scale) { // the +helm+ and the +body+ // callback: error, image buffer exp.draw_model = function(rid, img, scale, helm, body, callback) { - var image = new Image(); + var skin = new Image(); - image.onerror = function(err) { + skin.onerror = function(err) { logging.error(rid, "render error:", err.stack); callback(err, null); }; - image.onload = function() { - var width = 64 * scale; - var original_height = (image.height === 32 ? 32 : 64); - var height = original_height * scale; - var model_canvas = new Canvas(20 * scale, (body ? 44.8 : 17.6) * scale); - var skin_canvas = new Canvas(width, height); - var model_ctx = model_canvas.getContext("2d"); - var skin_ctx = skin_canvas.getContext("2d"); + skin.onload = function() { + var canvas = new Canvas(20 * scale, (body ? 44.8 : 17.6) * scale); + var ctx = canvas.getContext("2d"); - skin_ctx.drawImage(image, 0, 0, 64, original_height); - // Scale it - scale_image(skin_ctx.getImageData(0, 0, 64, original_height), skin_ctx, 0, 0, scale); + ctx.patternQuality = "fast"; if (body) { - exp.draw_body(rid, skin_canvas, model_ctx, scale); + exp.draw_body(rid, skin, ctx, scale); } - exp.draw_head(skin_canvas, model_ctx, scale); + exp.draw_head(skin, ctx, scale); if (helm) { - exp.draw_helmet(skin_canvas, model_ctx, scale); + exp.draw_helmet(skin, ctx, scale); } - model_canvas.toBuffer(function(err, buf){ + canvas.toBuffer(function(err, buf) { if (err) { logging.error(rid, "error creating buffer:", err); } @@ -181,13 +128,13 @@ exp.draw_model = function(rid, img, scale, helm, body, callback) { }); }; - image.src = img; + skin.src = img; }; // helper method to open a render from +renderpath+ // callback: error, image buffer exp.open_render = function(rid, renderpath, callback) { - fs.readFile(renderpath, function (err, buf) { + fs.readFile(renderpath, function(err, buf) { if (err) { logging.error(rid, "error while opening skin file:", err); }