mirror of
https://github.com/azures04/crafatar.git
synced 2026-03-21 23:41:18 +01:00
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
This commit is contained in:
jomo
parent
3edf89e884
commit
6213344090
185
lib/renders.js
185
lib/renders.js
@ -8,136 +8,90 @@ var Canvas = require("canvas");
|
|||||||
var Image = Canvas.Image;
|
var Image = Canvas.Image;
|
||||||
var exp = {};
|
var exp = {};
|
||||||
|
|
||||||
// scales an image from the +imagedata+ onto the +context+
|
// draws the helmet on to the +skin+
|
||||||
// scaled by a factor of +scale+ with options +d_x+ and +d_y+
|
// using the skin from the +ctx+ at the +scale+
|
||||||
function scale_image(imageData, context, d_x, d_y, scale) {
|
exp.draw_helmet = function(skin, ctx, 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) {
|
|
||||||
// Helmet - Front
|
// Helmet - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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.drawImage(skin, 40, 8, 8, 8, 10 * scale, 13 / 1.2 * scale, 8 * scale, 8 * scale);
|
||||||
// Helmet - Right
|
// Helmet - Right
|
||||||
model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0);
|
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.drawImage(skin, 32, 8, 8, 8, 2 * scale, 3 / 1.2 * scale, 8 * scale, 8 * scale);
|
||||||
// Helmet - Top
|
// Helmet - Top
|
||||||
model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
||||||
model_ctx.scale(-1, 1);
|
ctx.drawImage(skin, 48, 0, -8, 8, -5 * scale, 5 * scale, 8 * scale, 8 * scale);
|
||||||
model_ctx.drawImage(skin_canvas, 40 * scale, 0, 8 * scale, 8 * scale, -3 * scale, 5 * scale, 8 * scale, 8 * scale);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// draws the head on to the +skin_canvas+
|
// draws the head on to the +skin+
|
||||||
// using the skin from the +model_ctx+ at the +scale+
|
// using the skin from the +ctx+ at the +scale+
|
||||||
exp.draw_head = function(skin_canvas, model_ctx, scale) {
|
exp.draw_head = function(skin, ctx, scale) {
|
||||||
// Head - Front
|
// Head - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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.drawImage(skin, 8, 8, 8, 8, 10 * scale, 13 / 1.2 * scale, 8 * scale, 8 * scale);
|
||||||
// Head - Right
|
// Head - Right
|
||||||
model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0);
|
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.drawImage(skin, 0, 8, 8, 8, 2 * scale, 3 / 1.2 * scale, 8 * scale, 8 * scale);
|
||||||
// Head - Top
|
// Head - Top
|
||||||
model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
||||||
model_ctx.scale(-1, 1);
|
ctx.drawImage(skin, 16, 0, -8, 8, -5 * scale, 5 * scale, 8 * scale, 8 * scale);
|
||||||
model_ctx.drawImage(skin_canvas, 8 * scale, 0, 8 * scale, 8 * scale, -3 * scale, 5 * scale, 8 * scale, 8 * scale);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// draws the body on to the +skin_canvas+
|
// draws the body on to the +skin+
|
||||||
// using the skin from the +model_ctx+ at the +scale+
|
// using the skin from the +ctx+ at the +scale+
|
||||||
// parts are labeled as if drawn from the skin's POV
|
// parts are labeled as if drawn from the skin's POV
|
||||||
exp.draw_body = function(rid, skin_canvas, model_ctx, scale) {
|
exp.draw_body = function(rid, skin, ctx, scale) {
|
||||||
if (skin_canvas.height === 32 * scale) {
|
|
||||||
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 Leg - Right
|
// Right Leg - Right
|
||||||
model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0);
|
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);
|
ctx.drawImage(skin, 0, 20, 4, 12, 4 * scale, 26.4 / 1.2 * scale, 4 * scale, 12 * scale);
|
||||||
// Right Leg - Front
|
// Right Leg - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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.drawImage(skin, 4, 20, 4, 12, 8 * 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);
|
|
||||||
// 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
|
||||||
// Body - Front
|
// Body - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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);
|
ctx.drawImage(skin, 20, 20, 8, 12, 8 * scale, 20 / 1.2 * scale, 8 * scale, 12 * scale);
|
||||||
|
|
||||||
// Arm Right
|
// Arm Right
|
||||||
// Arm Right - Right
|
// Arm Right - Right
|
||||||
model_ctx.setTransform(1, 0.5, 0, 1.2, 0, 0);
|
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);
|
ctx.drawImage(skin, 40, 20, 4, 12, 0, 16 / 1.2 * scale, 4 * scale, 12 * scale);
|
||||||
// Arm Right - Front
|
// Arm Right - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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);
|
ctx.drawImage(skin, 44, 20, 4, 12, 4 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale);
|
||||||
// Arm Right - Top
|
// Arm Right - Top
|
||||||
model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
||||||
model_ctx.scale(-1, 1);
|
ctx.drawImage(skin, 48, 16, -4, 4, 12 * scale, 16 * scale, 4 * scale, 4 * scale);
|
||||||
model_ctx.drawImage(skin_canvas, 44 * scale, 16 * scale, 4 * scale, 4 * scale, -16 * 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 {
|
} else {
|
||||||
logging.debug(rid, "uses new skin format");
|
logging.debug(rid, "uses new skin format");
|
||||||
// Left Leg
|
// Left Leg
|
||||||
// Left Leg - Front
|
// Left Leg - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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);
|
ctx.drawImage(skin, 20, 52, 4, 12, 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);
|
|
||||||
|
|
||||||
// Arm Left
|
// Arm Left
|
||||||
// Arm Left - Front
|
// Arm Left - Front
|
||||||
model_ctx.setTransform(1, -0.5, 0, 1.2, 0, 0);
|
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.drawImage(skin, 36, 52, 4, 12, 16 * scale, 20 / 1.2 * scale, 4 * scale, 12 * scale);
|
||||||
// Arm Left - Top
|
// Arm Left - Top
|
||||||
model_ctx.setTransform(-1, 0.5, 1, 0.5, 0, 0);
|
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);
|
ctx.drawImage(skin, 36, 48, 4, 4, 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);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -146,34 +100,27 @@ exp.draw_body = function(rid, skin_canvas, model_ctx, scale) {
|
|||||||
// the +helm+ and the +body+
|
// the +helm+ and the +body+
|
||||||
// callback: error, image buffer
|
// callback: error, image buffer
|
||||||
exp.draw_model = function(rid, img, scale, helm, body, callback) {
|
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);
|
logging.error(rid, "render error:", err.stack);
|
||||||
callback(err, null);
|
callback(err, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
image.onload = function() {
|
skin.onload = function() {
|
||||||
var width = 64 * scale;
|
var canvas = new Canvas(20 * scale, (body ? 44.8 : 17.6) * scale);
|
||||||
var original_height = (image.height === 32 ? 32 : 64);
|
var ctx = canvas.getContext("2d");
|
||||||
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);
|
ctx.patternQuality = "fast";
|
||||||
// Scale it
|
|
||||||
scale_image(skin_ctx.getImageData(0, 0, 64, original_height), skin_ctx, 0, 0, scale);
|
|
||||||
if (body) {
|
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) {
|
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) {
|
if (err) {
|
||||||
logging.error(rid, "error creating buffer:", 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+
|
// helper method to open a render from +renderpath+
|
||||||
// callback: error, image buffer
|
// callback: error, image buffer
|
||||||
exp.open_render = function(rid, renderpath, callback) {
|
exp.open_render = function(rid, renderpath, callback) {
|
||||||
fs.readFile(renderpath, function (err, buf) {
|
fs.readFile(renderpath, function(err, buf) {
|
||||||
if (err) {
|
if (err) {
|
||||||
logging.error(rid, "error while opening skin file:", err);
|
logging.error(rid, "error while opening skin file:", err);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user