rewrite renders

- renders are now fully isometric
- used position -0.5 and size +1 at some places to fix #32
- does not support overlay yet
- does not support left/right arms/legs
- does not support slim renders yet
- currently only renders full body, not head

lib/renders.js

@@ -8,117 +8,123 @@ var Canvas = require("canvas");
 var Image = Canvas.Image;
 var exp = {};
 
-// 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
-  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
-  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
-  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+
-// using the skin from the +ctx+ at the +scale+
-exp.draw_head = function(skin, ctx, scale) {
-  // Head - Front
-  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
-  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
-  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);
-};
+function getPart(src, x, y, width, height, scale) {
+  var dst = new Canvas();
+  dst.width = scale * width;
+  dst.height = scale * height;
+  var context = dst.getContext("2d");
+
+  // don't blur on resize
+  context.patternQuality = "fast";
+
+  context.drawImage(src, x, y, width, height, 0, 0, width * scale, height * scale);
+  return dst;
+}
+
+function flip(src) {
+  var dst = new Canvas();
+  dst.width = src.width;
+  dst.height = src.height;
+  var context = dst.getContext("2d");
+  context.scale(-1, 1);
+  context.drawImage(src, -src.width, 0);
+  return dst;
+}
+
+var skew_a = 26 / 45;    // 0.57777777
+var skew_b = skew_a * 2; // 1.15555555
+
+exp.draw_model = function(rid, img, scale, helm, type, callback) {
+  var canvas = new Canvas();
+  canvas.width = scale * 20;
+  canvas.height = scale * 45.1;
+
+  var ctx = canvas.getContext("2d");
 
-// 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, 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
-    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
-    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
-    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
-    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
-    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
-    ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
-    ctx.drawImage(skin, 36, 48, 4, 4, 0, 16 * scale, 4 * scale, 4 * scale);
-  }
-};
-
-// sets up the necessary components to draw the skin model
-// uses the +img+ skin with options of drawing
-// the +helm+ and the +body+
-// callback: error, image buffer
-exp.draw_model = function(rid, img, scale, helm, body, callback) {
   var skin = new Image();
 
-  skin.onerror = function(err) {
-    logging.error(rid, "render error:", err.stack);
-    callback(err, null);
-  };
-
   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, ctx, scale);
-    }
-    exp.draw_head(skin, ctx, scale);
-    if (helm) {
-      exp.draw_helmet(skin, ctx, scale);
-    }
+    var old_type = skin.height === 32;
+    var arm_width = 4;
+
+    var face = getPart(skin, 8, 8, 8, 8, scale);
+    var head_right = getPart(skin, 0, 8, 8, 8, scale);
+    var head_top = getPart(skin, 8, 0, 8, 8, scale);
+    var body = getPart(skin, 20, 20, 8, 12, scale);
+    var right_arm = getPart(skin, 44, 20, arm_width, 12, scale);
+    var right_arm_side = getPart(skin, 40, 20, arm_width, 12, scale);
+    var left_arm = flip(right_arm); // TODO
+    var right_leg = getPart(skin, 4, 20, 4, 12, scale);
+    var right_leg_side = getPart(skin, 0, 20, 4, 12, scale);
+    var left_leg = flip(right_leg); // TODO
+    var right_shoulder = getPart(skin, 44, 16, 4, 4, scale);
+    var left_shoulder = flip(right_shoulder); // TODO
+
+
+    // pre-render front onto separate canvas
+    var front = new Canvas();
+    front.width = scale * 16;
+    front.height = scale * 24;
+    var frontc = front.getContext("2d");
+    frontc.patternQuality = "fast";
+
+    frontc.drawImage(right_arm, (4 - arm_width) * scale, 0 * scale, arm_width * scale, 12 * scale);
+    frontc.drawImage(left_arm, 12 * scale, 0 * scale, arm_width * scale, 12 * scale);
+    frontc.drawImage(body, 4 * scale, 0 * scale, 8 * scale, 12 * scale);
+    frontc.drawImage(right_leg, 4 * scale, 12 * scale, 4 * scale, 12 * scale);
+    frontc.drawImage(left_leg, 8 * scale, 12 * scale, 4 * scale, 12 * scale);
+
+    var x = 0;
+    var y = 0;
+    var z = 0;
+
+    var z_offset = scale * 3;
+    var x_offset = scale * 2;
+
+    // top
+    x = x_offset;
+    y = -0.5;
+    z = z_offset;
+    ctx.setTransform(1, -skew_a, 1, skew_a, 0, 0);
+    ctx.drawImage(head_top, y - z, x + z, head_top.width, head_top.height + 1);
+
+    x = x_offset + scale * 2;
+    y = scale * -4;
+    z = z_offset + scale * 8;
+    ctx.drawImage(right_shoulder, y - z - 0.5, x + z, right_shoulder.width + 1, right_shoulder.height + 1);
+
+    y = scale * 8;
+    ctx.drawImage(left_shoulder, y - z, x + z, 4 * scale, 4 * scale + 1);
+
+    // right side
+    ctx.setTransform(1, skew_a, 0, skew_b, 0, 0);
+    x = x_offset + scale * 2;
+    y = 0;
+    z = z_offset + scale * 20;
+    ctx.drawImage(right_leg_side, x + y, z - y, right_leg_side.width, right_leg_side.height);
+
+    x = x_offset + scale * 2;
+    y = scale * -4;
+    z = z_offset + scale * 8;
+    ctx.drawImage(right_arm_side, x + y, z - y - 0.5, right_arm_side.width, right_arm_side.height + 1);
+
+    // front
+    z = z_offset + scale * 12;
+    y = 0;
+    ctx.setTransform(1, -skew_a, 0, skew_b, 0, skew_a);
+    ctx.drawImage(front, y + x, x + z - 0.5, front.width, front.height);
+
+    x = x_offset + 8 * scale;
+    y = 0;
+    z = z_offset - 0.5;
+    ctx.drawImage(face, y + x, x + z, face.width, face.height);
+
+    // right head
+    x = x_offset;
+    y = 0;
+    z = z_offset;
+    ctx.setTransform(1, skew_a, 0, skew_b, 0, 0);
+    ctx.drawImage(head_right, x + y, z - y - 0.5, head_right.width, head_right.height + 1);
 
     canvas.toBuffer(function(err, buf) {
       if (err) {
@@ -142,5 +148,4 @@ exp.open_render = function(rid, renderpath, callback) {
   });
 };
 
-
 module.exports = exp;

lib/routes/renders.js

@@ -34,7 +34,7 @@ function handle_default(rid, scale, helm, body, img_status, userId, size, def, r
     }
   } else {
     // handle steve and alex
-    fs.readFile(path.join(__dirname, "..", "public", "images", def + "_skin.png"), function (fs_err, buf) {
+    fs.readFile(path.join(__dirname, "..", "public", "images", def + "_skin.png"), function(fs_err, buf) {
       // we render the default skins, but not custom images
       renders.draw_model(rid, buf, scale, helm, body, function(render_err, def_img) {
         callback({
@@ -51,7 +51,7 @@ function handle_default(rid, scale, helm, body, img_status, userId, size, def, r
 
 // GET render request
 module.exports = function(req, callback) {
-  var raw_type = (req.url.path_list[1] || "");
+  var raw_type = req.url.path_list[1] || "";
   var rid = req.id;
   var body = raw_type === "body";
   var userId = (req.url.path_list[2] || "").split(".")[0];