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
193
lib/renders.js
193
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.onload = function() {
|
||||
var canvas = new Canvas(20 * scale, (body ? 44.8 : 17.6) * scale);
|
||||
var ctx = 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);
|
||||
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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user