Question

嘿伙计们，所以我有一张精灵表，上面有多个精灵，我想用来为网站制作动画使用画布。

然而我遇到的问题是我不知道如何只在我需要的帧中阅读。

示例：

这里我有4个不同的精灵，我想要动画。我将如何检索和动画正确的帧？

P.S我正在使用javascript。

Answer 1

在spritesheet上检索和播放多个精灵

检索：创建一个定义每个精灵的x，y，宽度，高度的对象，并将对象保存在数组中

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，可以优化此代码 - 特别是如果精灵的大小和间距相同。

播放画面：使用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

使用带有多个精灵的精灵表

1 个答案: