witchday/Sprite.js

102 lines
2.4 KiB
JavaScript
Raw Permalink Normal View History

class Sprite {
constructor(config) {
// Setup image
this.image = new Image();
this.image.src = config.src;
this.image.onload = () => {
this.isLoaded = true;
}
// Shadow
this.shadow = new Image();
this.useShadow = true;
if (this.useShadow) {
this.shadow.src = "/images/characters/shadow.png"
}
this.shadow.onload = () => {
this.isShadowLoaded = true;
}
// Configure animation and initial state
this.animation = config.animation || {
"idle-up": [
[6, 1], [7, 1], [8, 1], [9, 1], [10, 1], [11, 1]
],
"idle-down": [
[18, 1], [19, 1], [20, 1], [21, 1], [22, 1], [23, 1]
],
"idle-left": [
[12, 1], [13, 1], [14, 1], [15, 1], [16, 1], [17, 1]
],
"idle-right": [
[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]
],
"walk-up": [
[6, 2], [7, 2], [8, 2], [9, 2], [10, 2], [11, 2]
],
"walk-down": [
[18, 2], [19, 2], [20, 2], [21, 2], [22, 2], [23, 2]
],
"walk-left": [
[12, 2], [13, 2], [14, 2], [15, 2], [16, 2], [17, 2]
],
"walk-right": [
[0, 2], [1, 2], [2, 2], [3, 2], [4, 2], [5, 2]
],
}
this.currentAnimation = "idle-down"; // config.currentAnimation || "idle-down";
this.currentAnimationFrame = 0;
this.animationFrameLimit = config.animationFrameLimit || 6;
this.animationFrameProgress = this.animationFrameLimit;
// Reference game object
this.gameObject = config.gameObject;
}
get frame() {
return this.animation[this.currentAnimation][this.currentAnimationFrame]
}
setAnimation(key) {
if (this.currentAnimation !== key) {
this.currentAnimation = key;
this.currentAnimationFrame = 0;
this.animationFrameProgress = this.animationFrameLimit;
}
}
updateAnimationProgress() {
// downtick frame progress
if (this.animationFrameProgress > 0) {
this.animationFrameProgress -= 1;
return;
}
// reset the counter
this.animationFrameProgress = this.animationFrameLimit;
this.currentAnimationFrame += 1;
if (this.frame === undefined) {
this.currentAnimationFrame = 0;
}
}
draw(ctx, cameraPerson) {
const x = this.gameObject.x + utils.withGrid(10.5) - cameraPerson.x;
const y = this.gameObject.y - 4 + utils.withGrid(6) - cameraPerson.y;
this.isShadowLoaded && ctx.drawImage(this.shadow, x, y);
const [frameX, frameY] = this.frame;
this.isLoaded && ctx.drawImage(this.image,
frameX * 16, frameY * 32,
16, 32,
x, y,
16, 32
)
this.updateAnimationProgress();
}
}