Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 10x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 5x 3x 3x 3x 1x 1x 1x 1x 1x 1x | /**
* Sprite.
*/
export const Sprite = {
/**
* loadSprites.
*
* @param {} args
* @param {} canvasProvider
*/
loadSprites(args, canvasProvider) {
const spriteNames = Object.keys(args);
return spriteNames.reduce((a, b) => ({
...a,
[b]: Sprite.loadSpriteData({ ...args[b], canvasProvider }),
}), {});
},
/**
* loadSpriteData.
*
* @param {Object} args
*/
loadSpriteData({
image, rows, columns, padding, canvasProvider, scales, alpha = true,
}) {
const scaleData = {};
for (let i = 0; i < scales.length; i++) {
const cellWidth = image.width / columns;
const cellHeight = image.height / rows;
const ratio = scales[i] / cellWidth;
const canvas = canvasProvider();
const canvasWidth = Math.round(columns * scales[i]);
const canvasHeight = Math.round(rows * cellHeight * ratio);
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.width = canvasWidth;
canvas.style.height = canvasHeight;
const context = canvas.getContext('2d', { alpha });
context.imageSmoothingEnabled = false;
context.drawImage(image, 0, 0, canvasWidth, canvasHeight);
const parts = [];
for (let j = 0; j < rows; j++) {
for (let k = 0; k < columns; k++) {
parts[j * columns + k] = {
x: Math.round((cellWidth * k + padding) * ratio),
y: Math.round((cellHeight * j + padding) * ratio),
width: Math.round((cellWidth - (padding * 2)) * ratio),
height: Math.round((cellHeight - (padding * 2)) * ratio),
};
}
}
scaleData[scales[i]] = {
canvas,
parts,
};
}
return scaleData;
},
/**
* drawActorToContext.
*
* @param {}
*/
drawActorToContext({
context, actor, sprites, offset = { x: 0, y: 0 }, scale, defaultSprite,
color,
}) {
const x = actor.x - offset.x;
const y = actor.y - offset.y;
const centerx = (x + actor.width / 2);
const centery = (y + actor.height / 2);
if (scale === 1 && color) {
context.fillStyle = color;
context.beginPath();
context.arc(
centerx,
centery,
Math.round(actor.width / 2 + 2), 0, 2 * Math.PI,
);
context.closePath();
context.fill();
}
context.scale(scale, scale);
context.translate(centerx, centery);
context.rotate(Sprite.getRotationFromFacing(actor.facing));
context.translate(-centerx, -centery);
const spriteData = sprites[actor.spriteName || defaultSprite][actor.width * scale];
const spritePart = spriteData.parts[actor.spriteIndex || 0];
context.drawImage(spriteData.canvas,
spritePart.x, spritePart.y, spritePart.width, spritePart.height,
x, y, actor.width, actor.height);
context.setTransform(1, 0, 0, 1, 0, 0);
},
/**
* getRotationFromFacing.
*
* @param {} facing
*/
getRotationFromFacing(facing) {
switch (facing) {
case 'left':
return (-90 * Math.PI) / 180;
case 'right':
return (90 * Math.PI) / 180;
case 'down':
return Math.PI;
case 'upleft':
return (-45 * Math.PI) / 180;
case 'upright':
return (45 * Math.PI) / 180;
case 'downright':
return (135 * Math.PI) / 180;
case 'downleft':
return (225 * Math.PI) / 180;
default:
return 0;
}
},
};
|