title: EaselJS (sprite animation won't play during diagonal direction)
body: <p>I'm having an issue where a game sprite animation doesn't play during diagonal movement, it just gets stuck on the first frame of the diagonal animation. If anyone knows what's up I would be very grateful.</p>
  
  <pre><code>function init() {
  
      'use strict';
  
      var menuSelected = false;
  
      var shape = new createjs.Shape();
      var g = shape.graphics;
      shape.graphics.beginFill("#ffffff").drawRect(100, 300, 450, 100, 25);
  
      var $container, canvas, stage, canvasW, canvasH,
          manifest, totalLoaded, queue,
          map1, mapTiles, game, mapWidth, mapHeight, tileSheet, tiles, board,
          player, playerSheet, firstKey,
          keysPressed = {
              38: 0,
              40: 0,
              37: 0,
              39: 0
          };
  
      $container = document.getElementById("container");
      canvasW = 640;
      canvasH = 416;
  
      map1 = [
          [2, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
          [2, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
          [2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
          [2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
          [2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1],
          [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1],
          [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1],
          [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
          [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
          [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
          [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1],
      ];
      mapTiles = {};
  
      function buildMap(map) {
  
          var row, col, tileClone, tileIndex, defineTile;
  
          if (!board) {
              board = new createjs.Container();
              board.x = 0;
              board.y = 0;
              stage.addChild(board);
          }
  
          mapWidth = map[0].length;
          mapHeight = map.length;
  
          defineTile = {
              walkable: function (row, col) {
                  if (map[row][col] === 0) {
                      return false;
                  } else {
                      return true;
                  }
              }
          };
  
          tileIndex = 0;
          for (row = 0; row &lt; mapHeight; row++) {
              for (col = 0; col &lt; mapWidth; col++) {
                  tileClone = tiles.clone();
                  tileClone.name = "t_" + row + "_" + col;
                  tileClone.gotoAndStop(map[row][col]);
                  tileClone.x = col * tileSheet._frameWidth;
                  tileClone.y = row * tileSheet._frameHeight;
                  mapTiles["t_" + row + "_" + col] = {
                      index: tileIndex,
                      walkable: defineTile.walkable(row, col)
                  };
                  tileIndex++;
                  board.addChild(tileClone);
              }
          }
  
      }
  
      function addPlayer(x, y) { 
          player.x = x * tileSheet._frameWidth + (tileSheet._frameWidth / 2);
          player.y = y * tileSheet._frameHeight + (tileSheet._frameHeight / 2);
          player.speed = 6;
          player.height = 96;
          player.width = 96;
          player.gotoAndStop("standDown");
          board.addChild(player);
      }
  
      function moveChar(char, dirx, diry) {       
          if (dirx === 0) {
               char.y += diry * char.speed;
             }
          if (diry === 0) {
                 char.x += dirx * char.speed;
          }
      }
  
      document.addEventListener("keydown", function (e) {
          keysPressed[e.keyCode] = 1;
          if (!firstKey) { firstKey = e.keyCode; }
      });
  
      document.addEventListener("keyup", function (e) {
          if (keysPressed[88] === 1) {
              menuSelected = !(menuSelected); 
          }
  
          keysPressed[e.keyCode] = 0;
          if (firstKey === e.keyCode) { firstKey = null; }
          if (player.currentAnimation == "walkDown") { player.gotoAndStop("standDown");}
          if (player.currentAnimation == "walkRight") { player.gotoAndStop("standRight");}
          if (player.currentAnimation == "walkUp") { player.gotoAndStop("standUp");}
          if (player.currentAnimation == "walkLeft") { player.gotoAndStop("standLeft");}
          if (player.currentAnimation == "walkDiagUpRight") { player.gotoAndStop("standDiagUpRight");}
          if (player.currentAnimation == "walkDiagUpLeft") { player.gotoAndStop("standDiagUpLeft");}
          if (player.currentAnimation == "walkDiagDownRight") { player.gotoAndStop("standDiagDownRight");}
          if (player.currentAnimation == "walkDiagDownLeft") { player.gotoAndStop("standDiagDownLeft");}
      });
  
      function detectKeys() {
          if (keysPressed[38] === 1) {    
              if (player.currentAnimation !== "walkUp") { player.gotoAndPlay("walkUp"); }
              moveChar(player, 0, -1);
          }
          if (keysPressed[40] === 1) {   
              if (player.currentAnimation !== "walkDown") { player.gotoAndPlay("walkDown"); }
              moveChar(player, 0, 1);
          }
          if (keysPressed[37] === 1) { 
              if (player.currentAnimation !== "walkLeft") { player.gotoAndPlay("walkLeft"); }
              moveChar(player, -1, 0);
          }
          if (keysPressed[39] === 1) {    
              if (player.currentAnimation !== "walkRight") { player.gotoAndPlay("walkRight"); }
              moveChar(player, 1, 0);
          }
  
          // diagonal movement
         if (keysPressed[38] === 1 &amp;&amp; keysPressed[37] === 1) {
              player.gotoAndPlay("walkDiagUpLeft");
          }
          if (keysPressed[38] === 1 &amp;&amp; keysPressed[39] === 1) {
              player.gotoAndPlay("walkDiagUpRight");
          }
          if (keysPressed[40] === 1 &amp;&amp; keysPressed[37] === 1) {
              player.gotoAndPlay("walkDiagDownLeft");
          }
          if (keysPressed[40] === 1 &amp;&amp; keysPressed[39] === 1) {
              player.gotoAndPlay("walkDiagDownRight");
          }  
      }
  
      function handleTick() {
          detectKeys();
          if (menuSelected === true) {
              stage.addChild(shape);
          }
          if (menuSelected === false) {
              stage.removeChild(shape);
          }
          stage.update();
      }
  
      function gameInit() {
          manifest = [
              {src: "img/tileset.png", id: "tiles"},
              {src: "img/swordsman-spritesheet.png", id: "player"}
          ];
          totalLoaded = 0;
  
          function handleLoadComplete(event) {
              totalLoaded++;
              if (totalLoaded &lt; manifest.length) {
                  console.log(totalLoaded + "/" + manifest.length + " loaded");
              }
          }
  
          function handleFileLoad(event) {
              var img, audio;
              if (event.item.type === "image") {
                  img = new Image();
                  img.src = event.item.src;
                  img.onload = handleLoadComplete;
              } else if (event.item.type === "sound") {
                  audio = new Audio();
                  audio.src = event.item.src;
                  audio.onload = handleLoadComplete;
              }
          }
  
          function handleComplete(event) {
              buildMap(map1);
              addPlayer(3, 4, 0);
          }
  
          queue = new createjs.LoadQueue(false);
          queue.installPlugin(createjs.SoundJS);
          queue.addEventListener("fileload", handleFileLoad);
          queue.addEventListener("complete", handleComplete);
          queue.loadManifest(manifest);
  
          canvas = document.getElementById("canvas");
          stage = new createjs.Stage(canvas);
          stage.enableMouseOver(30);
          createjs.Touch.enable(stage);
          createjs.Ticker.setFPS(30);
          createjs.Ticker.useRAF = true;
          createjs.Ticker.addEventListener("tick", handleTick);
  
          tileSheet = new createjs.SpriteSheet({
              images: ["img/tileset.png"],
              frames: {
                  height: 32,
                  width: 32,
                  regX: 0,
                  regY: 0,
                  count: 3
              }
          });
  
          tiles = new createjs.Sprite(tileSheet);
  
          playerSheet = new createjs.SpriteSheet({
               animations: {
                      standRight:[0],
                      standDown:[32],
                      standLeft:[57],
                      standUp:[8],
                      standDiagUpRight:[16],
                      standDiagUpLeft:[24],
                      standDiagDownLeft:[48],
                      standDiagDownRight:[40],
                      walkDiagUpRight:[16,23,"walkDiagUpRight"],
                      walkDiagUpLeft:[24,31,"walkDiagUpLeft"],
                      walkDiagDownRight:[39,46,"walkDiagDownRight"],
                      walkDiagDownLeft:[47,55,"walkDiagDownLeft"],
                      walkRight:[0,7,"walkRight"], 
                      walkLeft:[57,63,"walkLeft"], 
                      walkUp:[8,15,"walkUp"], 
                      walkDown:[32,39,"walkDown"]},
              images: ["img/swordsman-spritesheet.png"],
              frames: {width:96, height:96, regX:48, regY:48 }
          });
  
          player = new createjs.Sprite(playerSheet);
  
      }
      gameInit();
  }
  </code></pre>