javascript - Typescript Sprite 动画

Question

我正在开发一款小型马里奥游戏。

但我不知道如何对 Sprite 进行动画处理。例如，我有一个正在运行的 mario.gif 文件(马里奥没有在 gif 中运行)

Click here for the mario picture.

图片尺寸为 60 x 20 像素。 目前，这是我的代码。

class Character {

    public y_: number;
    public x_: number;
    public nFrames: number = 30;

    constructor(public _x: number, public _y: number) {
        this._x = _x;
        this._y = _y;
    };

 sprite: HTMLImageElement;

    setSpriteUrl(input: string) : void {
        this.sprite = new Image();
        this.sprite.src = input;
    }

drawSprite(): void {
        ctx.save();
        ctx.beginPath();
        ctx.drawImage(this.sprite, 0, 0, 15, 20, this._x, this._y, 20, 20);
            ctx.restore;
      }
}

然后

var mario = new Character(40, 50);
mario.setSpriteUrl("graphics/mario/small/Running-mario.gif");

图片宽度为60像素，有4张马里奥的奔跑图像。图片的高度也是20像素。
60/4 = 15。

ctx.drawImage(this.sprite, 0, 0, 15, 20, this._x, this._y, 20, 20);

这会让我觉得我可以从 15 到 30，它会选择下一个马里奥图像。相反，它给了我图片中的 2 个正在运行的马里奥。
它是如何工作的？如何选择马里奥的各个运行阶段？

如果这样做了，是否应该使用 for 循环和计时器来为 Sprite 设置动画？对我来说，这似乎不是最佳实践。因为我有更多的 Sprite 要制作动画，然后只有马里奥和运行。

Answer 1

drawImage的签名是

ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

(sx, sy) 是源图像中切片的起始位置，从该位置开始复制。 (sWidth × sHeight) 是该切片的大小。

由于您的 Sprite 帧是水平定向的，因此您需要增加 sx 的值来绘制下一帧。

class Character {

    frameWidth: number = 15;
    frameHeight: number = 20;

    constructor(
        public x: number,
        public y: number) { }

    sprite: HTMLImageElement;

    setSpriteUrl(input: string) : void {
        this.sprite = new Image();
        this.sprite.src = input;
    }

    drawSprite(frameIndex: number): void {
        ctx.save();
        ctx.beginPath();
        ctx.drawImage(this.sprite,
            frameIndex * this.frameWidth, 0,   // Start of slice
            this.frameWidth, this.frameHeight, // Size of slice
            this.x, this.y);                   // Destination position
        ctx.restore();
    }
}