Ändern Sprites in Open Source Pacman

Question

Ich versuche, die Sprites in einem Online-Canvas PacmanCanvas-Spiel zu ändern.

Im Moment habe ich das Originalbild zu ändern versucht: http://kasperbjerreskov.dk/games/pacman/sprites/spritesheet1.png (original) spritesheet.png (bearbeitet)

Aber das scheint nicht zu funktionieren.

Ich habe etwas im Code gefunden, das aussieht wie das Zeichnen der Sprites, aber ich bin nicht sicher, wie das geht.

Es ist eine Open-Source-Edition, die gefunden werden kann: http://pacman.shaunew.com/redmine/projects/pacman/repository Immer noch mit der ursprünglichen Quelle, außer dem neuen Bild.

Answer 1

Sie können jeden Sprit vom spritesheet schneiden den Ausschnitt Form context.drawImage Verwendung:

context.drawImage(
    // from the spritesheet 
    spritesheet, 
    // go to x,y on the spritesheet and cut out a width x height sized subimage 
    spriteX, spriteY, spriteWidth, spriteHeight, 
    // and draw that subimage on the canvas at canvasX, canvasY 
    canvasX, canvasY, spriteWidth, spriteHeight 
); 

Beispiel Codes und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// define a few sprite's position on the spritesheet 
 
var pacOpenRight={ x:20,y:20,width:20,height:20 }; 
 
var ghostRed={ x:40,y:80,width:20,height:20 }; 
 

 
var spritesheet=new Image(); 
 
spritesheet.onload=start; 
 
spritesheet.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/PacmanSpritesheet.png"; 
 
function start(){ 
 
    ctx.fillRect(0,0,cw,ch); 
 
    drawSprite(pacOpenRight,50,50); 
 
    drawSprite(ghostRed,70,50); 
 
} 
 

 
function drawSprite(spriteDef,canvasX,canvasY){ 
 
    ctx.drawImage(
 
     // from the spritesheet 
 
     spritesheet, 
 
     // go to x,y on the spritesheet and 
 
     //  cut out a width x height sized subimage 
 
     spriteDef.x, spriteDef.y, spriteDef.width, spriteDef.height, 
 
     // and draw it on the canvas at x,y 
 
     canvasX, canvasY, spriteDef.width, spriteDef.height 
 
    ); 
 
}

<canvas id="canvas" width=300 height=300></canvas>