Struggling to animate a spritesheet…

21 views Asked by At

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();
0

There are 0 answers