Craftyjs动画没有正确更改

我为Github Game Off使用http://craftyjs.com/，我在动画方面遇到了一些麻烦。我第一次开始动画（当我初始化主场景中的玩家实体时）它就起作用了。但是当我通过CustomControls组件设置动画时，它只播放动画的第一帧。Craftyjs动画没有正确更改

我相信这个问题是在CustomControls组件，所以这里的该代码： https://gist.github.com/3992392

这里的所有代码，如果你想克隆它和测试：https://github.com/RylandAlmanza/dragons-suck

如果有人知道是什么问题可能是，让我知道。谢谢！

编辑：这里的一切最小的jsfiddle例如剥离出来，除了运动，应该是什么动画：http://jsfiddle.net/x7FDF/

var SPRITE_SIZE = 32; 
Crafty.init(); 
Crafty.canvas.init(); 
Crafty.sprite(SPRITE_SIZE, "http://i.imgur.com/9sN9V.png", { 
    player_east_1: [0, 0], 
    player_east_2: [1, 0], 
    player_east_3: [2, 0], 
    player_west_1: [0, 1], 
    player_west_2: [1, 1], 
    player_west_3: [2, 1], 
    player_south_1: [0, 2], 
    player_south_2: [1, 2], 
    player_south_3: [2, 2], 
    player_north_1: [0, 3], 
    player_north_2: [1, 3], 
    player_north_3: [2, 3] 
}); 

Crafty.scene("loading", function() { 
    Crafty.background("#000"); 
    Crafty.e("2D, DOM, Text") 
    .attr({ 
     w: 100, 
     h: 20, 
     x: 150, 
     y: 120 
    }) 
    .text("Loading") 
    .css({"text-align": "center"}); 
    Crafty.load(["http://i.imgur.com/9sN9V.png"], function() { 
     Crafty.scene("main"); 
    }); 
}); 

Crafty.scene("main", function() { 
    Crafty.background("#000"); 

    var player = Crafty.e("2D, DOM, SpriteAnimation, player_east_1, Collision, TileCollision, CustomControls") 
    .attr({ 
     x: 0, 
     y: 0, 
     x_velocity: 0, 
     y_velocity: 0, 
     w: SPRITE_SIZE, 
     h: SPRITE_SIZE 
    }) 
    .animate("stand_east", 0, 0, 0) 
    .animate("stand_west", 0, 1, 0) 
    .animate("stand_south", 0, 2, 0) 
    .animate("stand_north", 0, 3, 0) 
    .animate("walk_east", [[0, 0], [1, 0], [0, 0], [2, 0]]) 
    .animate("walk_west", [[0, 1], [1, 1], [0, 1], [2, 1]]) 
    .animate("walk_south", [[0, 2], [1, 2], [0, 2], [2, 2]]) 
    .animate("walk_north", [[0, 3], [1, 3], [0, 3], [2, 3]]) 
    .animate("stand_east", 45, -1) 
    .CustomControls(); 
}); 


Crafty.c("CustomControls", { 
    CustomControls: function() { 
     this.bind("EnterFrame", function() { 
      var up = Crafty.keydown[Crafty.keys.UP_ARROW]; 
      var down = Crafty.keydown[Crafty.keys.DOWN_ARROW]; 
      var left = Crafty.keydown[Crafty.keys.LEFT_ARROW]; 
      var right = Crafty.keydown[Crafty.keys.RIGHT_ARROW]; 
      if (up) { 
       this.y_velocity = -2; 
       if (!this.isPlaying("walk_north")) { 
        this.stop().animate("walk_north", 45, -1); 
       } 
      } 
      if (down) { 
       this.y_velocity = 2; 
       if (!this.isPlaying("walk_south")) { 
        this.stop().animate("walk_south", 45, -1); 
       } 
      } 
      if (left) { 
       this.x_velocity = -2; 
       if (!this.isPlaying("walk_west")) { 
        this.stop().animate("walk_west", 45, -1); 
       } 
      } 
      if (right) { 
       this.x_velocity = 2; 
       if (!this.isPlaying("walk_east")) { 
        this.stop().animate("walk_east", 45, -1); 
       } 
      } 
      if (!left && !right) { 
       this.x_velocity = 0; 
       this.stop(); 
      } 
      if (!up && !down) { 
       this.y_velocity = 0; 
       this.stop(); 
      } 
      this.x += this.x_velocity; 
      this.y += this.y_velocity; 
     }); 
    } 
}); 

Crafty.scene("loading");

来源

2012-11-01 RylandAlmanza

在"enterFrame"你到底有：

if (!left && !right) { 
    this.x_velocity = 0; 
    this.stop(); 
} 
if (!up && !down) { 
    this.y_velocity = 0; 
    this.stop(); 
}

因此，动画是总是停止，然后从下一帧开始重新启动。例如，当玩家正在向下移动时，(!left && !right)评估为真，并停止动画。

一个解决方案是停止动画只有如果所有4个方向都是假的。

if (!left && !right) { 
    this.x_velocity = 0; 
} 
if (!up && !down) { 
    this.y_velocity = 0; 
} 
if (!(up | down | left | right)) { 
    this.stop(); 
}

来源

2012-11-02 14:08:06

Craftyjs动画没有正确更改

回答

相关问题