mirror of
https://github.com/azures04/crafatar.git
synced 2026-03-21 23:41:18 +01:00
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
This commit is contained in:
jomo
parent
6213344090
commit
cb25872498
213
lib/renders.js
213
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);
|
||||
};
|
||||
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");
|
||||
|
||||
// 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);
|
||||
};
|
||||
// don't blur on resize
|
||||
context.patternQuality = "fast";
|
||||
|
||||
// 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);
|
||||
context.drawImage(src, x, y, width, height, 0, 0, width * scale, height * scale);
|
||||
return dst;
|
||||
}
|
||||
};
|
||||
|
||||
// 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();
|
||||
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;
|
||||
}
|
||||
|
||||
skin.onerror = function(err) {
|
||||
logging.error(rid, "render error:", err.stack);
|
||||
callback(err, null);
|
||||
};
|
||||
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;
|
||||
|
||||
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 skin = new Image();
|
||||
|
||||
skin.onload = function() {
|
||||
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;
|
||||
@ -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];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user