azures04/crafatar
1
0
Fork 0
mirror of https://github.com/azures04/crafatar.git synced 2026-03-21 23:41:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

rewrite renders

Browse Source 
- 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
This commit is contained in:
jomo 2015-09-05 23:57:10 +02:00
parent 6213344090
commit cb25872498
2 changed files with 108 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
lib/renders.js
View File

@ -8,117 +8,123 @@ var Canvas = require("canvas");
var Image = Canvas.Image; var Image = Canvas.Image;
var exp = {}; var exp = {};
// draws the helmet on to the +skin+ function getPart(src, x, y, width, height, scale) {
// using the skin from the +ctx+ at the +scale+ var dst = new Canvas();
exp.draw_helmet = function(skin, ctx, scale) { dst.width = scale * width;
// Helmet - Front dst.height = scale * height;
ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); var context = dst.getContext("2d");
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+ // don't blur on resize
// using the skin from the +ctx+ at the +scale+ context.patternQuality = "fast";
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);
};
// draws the body on to the +skin+ context.drawImage(src, x, y, width, height, 0, 0, width * scale, height * scale);
// using the skin from the +ctx+ at the +scale+ return dst;
// 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 function flip(src) {
// Body - Front var dst = new Canvas();
ctx.setTransform(1, -0.5, 0, 1.2, 0, 0); dst.width = src.width;
ctx.drawImage(skin, 20, 20, 8, 12, 8 * scale, 20 / 1.2 * scale, 8 * scale, 12 * scale); dst.height = src.height;
var context = dst.getContext("2d");
context.scale(-1, 1);
context.drawImage(src, -src.width, 0);
return dst;
}
// Arm Right var skew_a = 26 / 45; // 0.57777777
// Arm Right - Right var skew_b = skew_a * 2; // 1.15555555
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) { exp.draw_model = function(rid, img, scale, helm, type, callback) {
logging.debug(rid, "uses old skin format"); var canvas = new Canvas();
// Left Leg canvas.width = scale * 20;
// Left Leg - Front canvas.height = scale * 45.1;
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 var ctx = canvas.getContext("2d");
// 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(); var skin = new Image();
skin.onerror = function(err) {
logging.error(rid, "render error:", err.stack);
callback(err, null);
};
skin.onload = function() { skin.onload = function() {
var canvas = new Canvas(20 * scale, (body ? 44.8 : 17.6) * scale); var old_type = skin.height === 32;
var ctx = canvas.getContext("2d"); var arm_width = 4;
ctx.patternQuality = "fast"; var face = getPart(skin, 8, 8, 8, 8, scale);
if (body) { var head_right = getPart(skin, 0, 8, 8, 8, scale);
exp.draw_body(rid, skin, ctx, scale); var head_top = getPart(skin, 8, 0, 8, 8, scale);
} var body = getPart(skin, 20, 20, 8, 12, scale);
exp.draw_head(skin, ctx, scale); var right_arm = getPart(skin, 44, 20, arm_width, 12, scale);
if (helm) { var right_arm_side = getPart(skin, 40, 20, arm_width, 12, scale);
exp.draw_helmet(skin, ctx, 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) { canvas.toBuffer(function(err, buf) {
if (err) { if (err) {
@ -142,5 +148,4 @@ exp.open_render = function(rid, renderpath, callback) {
}); });
}; };
module.exports = exp; module.exports = exp;

4
lib/routes/renders.js
View File

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