Açık kaynak pacman değiştir sprites değiştir

Question

Spriteları çevrimiçi bir HTML5 Canvas Pacman oyununda değiştirmeye çalışıyorum. Şu anda

, ben orijinal görüntüsünü değiştirmeye çalıştık: http://kasperbjerreskov.dk/games/pacman/sprites/spritesheet1.png (orijinal) spritesheet.png (düzenlenmiş)

Ama bu işe görünmüyor.

Kodda bir şey buldum, bu resim sprite benziyor gibi görünüyor, ancak bunu nasıl yapacağından emin değilim.

Açık kaynak kodlu bir yazıcıda bulunabilir: http://pacman.shaunew.com/redmine/projects/pacman/repository Orijinal görüntü hala yeni görüntü dışında.

Answer 1

için context.drawImage kırpma formu spritesheet herhangi bir hareketli grafik kesebilir:

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

Örnek kodu ve Gösteri:

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>