анимация Craftyjs не меняется должным образом

Question

Я использую http://craftyjs.com/ для игры Github Game Off, и у меня проблемы с анимацией. При первом запуске анимации (когда я инициализирую объект игрока в основной сцене) он работает. Но когда я устанавливаю анимацию через свой компонент CustomControls, она воспроизводит только первый кадр анимации.

Я считаю, что проблема заключается в компоненте CustomControls, так вот код, который: https://gist.github.com/3992392

Вот весь код, если вы хотите, чтобы клонировать и тест: https://github.com/RylandAlmanza/dragons-suck

Если кто-нибудь знает, что проблема может быть, дайте мне знать. Благодаря!

EDIT: Вот минимальный 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");​ 

Answer 1

В конце "enterFrame" у вас есть:

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

Таким образом, анимация всегда остановлен, а затем перезапущен с начала в следующем кадре. Например, когда вы проигрываете плеер, (!left && !right) оценивает значение true, а анимация останавливается.

Одним из решений является остановка анимации только, если все 4 направления являются ложными.

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