1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
#!/usr/bin/env node
const { createCanvas, loadImage } = require("canvas");
const { GIFEncoder, quantize, applyPalette } = require("gifenc");
const fs = require("fs");
const MAX_FRAME = 4;
const OUT_SIZE = 112;
const CACHE_SIZE = 256;
const g = {
squish: 1.25,
scale: 0.875,
delay: 60,
spriteX: 14,
spriteY: 20,
spriteWidth: 112,
spriteHeight: 112,
flip: false,
};
const CANVAS_OPTIONS = Object.freeze({
antialias: false,
powerPreference: "low-power",
});
/// ANIMATION
/** Frame offset values */
const frameOffsets = [
{ x: 0, y: 0, w: 0, h: 0 },
{ x: -4, y: 12, w: 4, h: -12 },
{ x: -12, y: 18, w: 12, h: -18 },
{ x: -8, y: 12, w: 4, h: -12 },
{ x: -4, y: 0, w: 0, h: 0 },
];
/**
* Get the sprite's positioning for a frame
* @param {number} frame
*/
const getSpriteFrame = (frame) => {
const offset = frameOffsets[frame];
return {
dx: ~~(g.spriteX + offset.x * (g.squish * 0.4)),
dy: ~~(g.spriteY + offset.y * (g.squish * 0.9)),
dw: ~~((g.spriteWidth + offset.w * g.squish) * g.scale),
dh: ~~((g.spriteHeight + offset.h * g.squish) * g.scale),
};
};
/** Render animation frame */
const renderFrame = (img, _frame, _ctx, _adjust) => {
const cf = getSpriteFrame(_frame);
// reset canvas
if (_ctx.globalAlpha !== 1) _ctx.globalAlpha = 1;
_ctx.clearRect(0, 0, OUT_SIZE, OUT_SIZE);
// flipping the sprite is super annoying. first we translate canvas to where the sprite will
// be which allows us to draw the hand sprite (and the outline for adjust mode) at (0,0). then
// we flip the whole canvas and draw what ever we need to draw flipped, and then finally reset
// the scale/translation and draw the hand
_ctx.save();
_ctx.translate(cf.dx, cf.dy);
if (g.flip) {
_ctx.scale(-1, 1);
cf.dw *= -1; // invert the width or the sprite gets drawn off canvas
}
// draw sprite and outline
_ctx.drawImage(img.sprite, 0, 0, cf.dw, cf.dh);
if (_adjust) _ctx.strokeRect(0, 0, cf.dw, cf.dh);
_ctx.restore();
// draw hand
if (_adjust) _ctx.globalAlpha = 0.75;
_ctx.drawImage(
img.hand,
_frame * OUT_SIZE, //sx
0, //sy
OUT_SIZE, //sw
OUT_SIZE, //sh
0, //dx
// don't ask where these numbers are from they just work....
Math.max(0, ~~(cf.dy * 0.75 - Math.max(0, g.spriteY) - 0.5)), //dy
OUT_SIZE, //dw
OUT_SIZE //dh
);
};
/**
* Replace transparent pixels with green since gif.js doesn't dither transparency
* @param {Uint8ClampedArray} data
*/
const optimizeFrameColors = (data) => {
for (let i = 0; i < data.length; i += 4) {
// clamp greens to avoid pure greens in the image from turning transparent
// basically a hack and it's not really noticeable and it works
data[i + 1] = data[i + 1] > 250 ? 250 : data[i + 1];
// Set transparent pixels to green
if (data[i + 3] < 120) {
data[i + 0] = 0;
data[i + 1] = 255;
data[i + 2] = 0;
}
// No more transparent pixels
data[i + 3] = 255;
}
};
/** Render gif */
const renderGif = (img, output) => {
const renderCanvas = createCanvas(OUT_SIZE, OUT_SIZE);
const renderCtx = renderCanvas.getContext("2d", CANVAS_OPTIONS);
const encoder = GIFEncoder();
for (let i = 0; i <= MAX_FRAME; i++) {
// render frame
renderFrame(img, i, renderCtx, false);
const imgData = renderCtx.getImageData(0, 0, OUT_SIZE, OUT_SIZE);
// fix transparency
optimizeFrameColors(imgData.data);
const palette = quantize(imgData.data, 255);
palette.push([0, 255, 0]);
const index = applyPalette(imgData.data, palette);
encoder.writeFrame(index, OUT_SIZE, OUT_SIZE, { palette, delay: g.delay, transparent: true, transparentIndex: palette.length-1 });
}
encoder.finish();
output.write(encoder.bytes());
};
Promise.all([
loadImage(__dirname + "/hand.png"),
loadImage(process.argv[2]),
]).then(([hand, sprite]) => renderGif({ hand, sprite }, fs.createWriteStream(process.argv[3])));
|
