Sprites nicht auf html5 Leinwand

Question

Ich habe eine Kachel-basierte Plattform-Spiel, wo die Kacheln derzeit in farbigen Rechtecke mit der Funktion fillRect gerendert werden. Ich habe ein Spritesheet, mit dem ich stattdessen die Rechtecke rendern möchte. Jede Kachel und jedes Sprite hat eine Breite und Höhe von 32 Pixeln. Ich weiß, dass ich eine Ladefunktion benötige, wenn ich ein Bild zuschneide, aber ich bin mir nicht sicher, wohin es gehen soll, da ich die Sprites 60 Bilder pro Sekunde zuschneiden und zeichnen muss. Heres Geige mein js - https://jsfiddle.net/LsLpyn8p/4/

oder unter dem Code:

 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; 
     } 
    } 

Jede Hilfe appricated ist dank

Answer 1

Ich nehme an, Sie einen Ausschnitt aus-Stück eines Bildes zu platzieren versuchen.

Sie 4 * tileSize verweisen, in diesem Fall ist es 4 * 32 = 128

Die X Ihrer source Koordinate 128. Das Bild ist zu klein und haben nicht so viele Pixel.

beginnen mit 10, zum Beispiel:

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.