將精靈表與多個精靈一起使用

Question

大家好，我有一個Sprite工作表，其中包含多個Sprite，我想使用它們來使用畫布為網站制作動畫。

但是我遇到的問題是我不知道如何只閱讀所需的幀。

例：

1 1 1 2
2 2 2 2
3 3 4 4
4 4 4 4

在這里，我要制作4種不同的精靈。 我該如何檢索正確的幀並制作動畫呢？

PS我正在使用javascript。

Answer 1

在Spritesheet上檢索和播放多個Sprite

檢索：創建一個定義每個精靈的x，y，width，height的對象，並將對象保存在數組中

sprite1.push({x:0,y:0,width:20,height:30});
sprite1.push({x:20,y:0,width:20,height:30});
sprite1.push({x:40,y:0,width:20,height:30});

// do the same for sprites #2-4

根據您的實際Spritesheet，可以優化此代碼-尤其是在Sprite大小和間距均等的情況下。

播放幀：使用context.drawImage的剪切版本來“播放”一個精靈幀：

function playSpriteFrame(sprite,frameIndex,canvasX,canvasY){

    // get the current sprite from the sprite array

    var s=sprite[frameIndex];

    // draw that sprite on the canvas at canvasX/canvasY

    context.drawImage(
        spritesheet,                      // the spritesheet image
        s.x,s,y,s.width,s.height,         // clip from spritesheet
        canvasX,canvasY,s.width,s.height  // draw to canvas
    );

}

用法示例：在畫布100,100上繪制sprite1的幀＃2

// Remember arrays start at element 0 so frame#2 is at array element 1

playSpriteFrame(sprite1,1,100,100);

您沒有詢問如何創建動畫循環，但是無論如何這是入門信息：

• 舊方法將與setInterval或setTimer循環
• 新的（更好的）方式是使用requestAnimationFrame