102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
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();
|
|
}
|
|
} |