浏览代码

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
jomo 10 年之前
父节点
当前提交
6213344090
共有 1 个文件被更改,包括 71 次插入124 次删除
  1. 71 124
      lib/renders.js

+ 71 - 124
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_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);
+  skin.onload = function() {
+    var canvas = new Canvas(20 * scale, (body ? 44.8 : 17.6) * scale);
+    var ctx = canvas.getContext("2d");
+
+    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);
     }