オープンソースのスプライトを変更する

Question

私はオンラインでスプライトを変更しようとしていますHTML5キャンバスパックマンのゲーム。現時点で

は、私は元の画像を変更しようとしました： http://kasperbjerreskov.dk/games/pacman/sprites/spritesheet1.png（オリジナル） spritesheet.png（編集済み）

しかし、それは動作するようには思えません。

コード内にスプライトの描画のように見えるものがありますが、これを行う方法がわかりません。

オープンソース版です。http://pacman.shaunew.com/redmine/projects/pacman/repository 新しい画像を除き、元のソースをそのまま使用しています。

Answer 1

あなたがcontext.drawImageのクリッピングフォームを使用してspritesheetから任意のスプライトを切り出すことができる：

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

例コードとデモ：

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>