javascript - 使用 html5 canvas 处理一张 Sprite 表图像中的多个动画状态

Question

我最近正在使用 html5 canvas 创建一个游戏。玩家有多种状态，可以行走、跳跃、踢和推以及多种其他状态，我的问题很简单，但经过一些深入研究后，我找不到处理这些问题的最佳方法多个州 这是我的jsfiddle:http://jsfiddle.net/Z7a5h/5/

我设法做了一个动画，但我以一种困惑的方式开始了我的代码，任何人都可以向我展示一种处理一个 Sprite 图像的多状态动画的方法，或者只是提供一个有用的链接来跟踪和理解它的概念.感谢您的帮助

 if (!this.IsWaiting) {
    this.IsWaiting = true;
    this.lastRenderTime = now;
    this.Pos = 1 + (this.Pos + 1) % 3;
 }
  else {
    if (now - this.lastRenderTime >= this.RenderRate) this.IsWaiting = false;
 }

Answer 1

这是我的动画类，可让您设置动画并将动画创建为对象。我个人喜欢将动画放在一个数组中，例如playerAnimations[]，并根据玩家的行为运行动画。

var toPix = function(n) {
      return n*TILE; //tile is basically the same as sh or sw, but I used Tilesizes to draw things.
};

// Animations
var Sprite = function(image, sx, sy, sw, sh) {
    this.img = image;
    this.sx = sx;
    this.sy = sy;
    this.sw = sw;
    this.sh = sh;

    Sprite.prototype.draw = function(ctx, x, y) {
        this.x = x;
        this.y = y;
        this.ctx = ctx;
        this.ctx.drawImage(this.img, this.sx, this.sy, this.sw, this.sh, this.x, this.y, this.sw, this.sh);
    };
};

var Animation = function(url, ctx, startingRow, rows, columns, sw, sh) {
    this.ctx = ctx;
    this.url = url;
    this.startRow = toPix(startingRow - 1);
    this.rows = rows;
    this.columns = columns;
    this.sprites = [];
    animImg = new Image();
    animImg.addEventListener('load', function() {});
    animImg.src = this.url;
    for(var i = 0; i < columns; i++) {
        sprite = new Sprite(animImg, i*sw, this.startRow, sw, sh);
        this.sprites.push(sprite);
    }   
    this.spriteToDraw = 0;
    this.drawSprite = 0;
    this.drawSpriteTime = 10;

    Animation.prototype.start = function() {
        this.stopAnimation = false;
    };

    Animation.prototype.stop = function() {
        this.stopAnimation = true;
    };

    Animation.prototype.draw = function(x, y) {
        if(!this.stopAnimation) {
            if(this.spriteToDraw < this.sprites.length) {
                var sprite = this.sprites[this.spriteToDraw];
            } else {
                this.spriteToDraw = 0;
                var sprite = this.sprites[this.spriteToDraw];
            }

            sprite.draw(this.ctx, x, y);

            if(this.drawSprite > this.drawSpriteTime) {
                this.spriteToDraw++;
                this.drawSprite = 0;
            } else {
                this.drawSprite += 1;
            }
        }
    };
};

//var animation = new Animation('theSprite.png', 5, 5, 45, 45);
//playerAnimations.push(animation);

然后这将是一个示例player.draw() function.action。 它的作用是:检查玩家所处的状态，停止所有其他动画并运行该状态的正确动画。

player.prototype.draw = function() {
    //player.draw function
    if(this.playerRight) {
        if (this.playerAnimation = playerAnimations[0]) {
            this.playerAnimation.stop();
        }
        if (this.playerAnimation = playerAnimations[2]) {
            this.playerAnimation.stop();
        }
        this.playerAnimation = playerAnimations[1];
        this.playerAnimation.start();
        this.playerAnimation.draw(this.x, this.y);
    } else if(!this.playerRight && !this.playerLeft) {
        if (this.playerAnimation = playerAnimations[1]) {
            this.playerAnimation.stop();
        }
        if (this.playerAnimation = playerAnimations[2]) {
            this.playerAnimation.stop();
        }
        this.playerAnimation = playerAnimations[0];
        this.playerAnimation.start();
        this.playerAnimation.draw(this.x, this.y);
    } else {
        if(this.playerLeft) {
        if (this.playerAnimation = playerAnimations[0]) {
            this.playerAnimation.stop();
        }
        if (this.playerAnimation = playerAnimations[1]) {
            this.playerAnimation.stop();
        }
        this.playerAnimation = playerAnimations[2];
        this.playerAnimation.start();
        this.playerAnimation.draw(this.x, this.y);
    }
};

希望本文能够对您有所帮助。这是我制作此类动画的方式，它对我有用，祝你好运!