I'm trying to animate my sprite sheet.
So far I loaded it and it's showing me the first frame and working well with left/right facing. However, it's not animating yet, and I'm struggling to make it.
I have a single line sheet with 5 frames that I'm trying to animate.
I know im supposed to put something like:
If (this.frameX>=5) this.frame=0; frame++;
But I can't figure out how to implement it exactly.
Here is my code:
class Player {
constructor (){
this.x = canvas.width;
this.y = canvas.height/2;
this.radius = 50;
this.angle = 0;
this.frameX = 0;
this.frameY = 0;
this.frame = 0;
this.spriteWidth = 600;
this.spriteHeight = 600;
}
update (){
const dx = this.x - mouse.x;
const dy = this.y - mouse.y;
if (mouse.x != this.zzx) {
this.x -= dx/100;
}
if (mouse.y != this.y) {
this.y -= dy/100;
}
}
draw (){
if (mouse.click) {
ctx.lineWidth = 0.2;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
if (this.x >= mouse.x) {
ctx.drawImage(playerNEW, this.frameX * this.spriteWidth, this.frameY * this.spriteHeight, this.spriteWidth, this.spriteHeight, this.x - 100, this.y - 125, this.spriteWidth/2.8, this.spriteHeight/2.8);
} else {
ctx.drawImage(playerNEWleft, this.frameX * this.spriteWidth, this.frameY * this.spriteHeight, this.spriteWidth, this.spriteHeight, this.x - 115, this.y - 125, this.spriteWidth/2.8, this.spriteHeight/2.8);
}
}
}
const player = new Player();