Sprites ne présentant pas sur toile html5

Question

i ont un jeu de plate-forme de tuiles où les tuiles sont actuellement rendus dans des rectangles de couleur en utilisant la fonction fillRect. J'ai une feuille de sprites que je veux utiliser pour rendre les rectangles à la place. Chaque dalle et chaque sprite a une largeur et une hauteur de 32 pixels. Je sais que j'ai besoin d'une fonction de chargement lorsque je recadre une image, mais je ne sais pas où je devrais aller car j'ai besoin de recadrer et de dessiner les images 60 images par seconde. Heres mon violon js - https://jsfiddle.net/LsLpyn8p/4/

Ou le code ci-dessous:

 var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 

    var width = 6; 
    var height = 3; 
    var tileSize = 32; 

    var counter = 0; 
    var playerUp = false; 

    setInterval(gameLoop, 1000/30); 

    function gameLoop() { 
     ctx.fillStyle = "white"; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 

     for (var y = 0; y < height; y++) { 
      for (var x = 0; x < width; x++) { 
       posX = (x * tileSize) + 1 * x; 
       posY = (y * tileSize) + 1 * y; 

       //  ctx.fillStyle = "green"; 
       // ctx.fillRect(posX, posY, tileSize, tileSize); 
       var spriteSheet = new Image(); 
       spriteSheet.src = 'https://pasteboard.co/GMAwgYX.png'; 

       ctx.drawImage(spriteSheet, 0, 4 * tileSize, tileSize, tileSize, posX, posY, tileSize, tileSize); 
      } 
     } 

     ctx.fillStyle = "red"; 
     ctx.fillRect(50, counter, tileSize, tileSize); 

     if (playerUp == true) { 
      counter--; 
     } else { 
      counter++; 
     } 

     if (counter == 100) { 
      playerUp = true; 
     } else if (counter == 0) { 
      playerUp = false; 
     } 
    } 

Toute aide est appricated grâce

Answer 1

Je suppose que vous essayez de placer une découpe monobloc d'une image.

vous pointez à 4 * tileSize, dans ce cas, il est 4 * 32 = 128.

La coordonnée X de votre SourceImage est 128. L'image est trop petite et ne possède pas ce nombre de pixels.

Commencez par 10, par exemple:

ctx.drawImage(spriteSheet, 0, 10, tileSize, tileSize, posX, posY, tileSize, tileSize); 

jsFiddle

Documentation

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 

sx 
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. 

sy 
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.