phina.jsでキャラクターの移動に合わせて向きを変える

phina.jsで左右の向きにアニメーションを合わせる方法は見つかったのですが、上下（上り、下り）は無かったのでそれを作っていこうと思います。

まずは失敗例

update: function(app){
    var key = app.keyboard;
    if(key.getKey('w')){
      this.player.y -= 2;
      this.anime.gotoAndPlay('walk1');//上に移動
    }
    if(key.getKey('s')){
      this.player.y += 2;
      this.anime.gotoAndPlay('walk2');//下に移動
    }
    if(key.getKey('a')){
      this.player.x -= 2;
    }
    if(key.getKey('d')){
      this.player.x += 2;
    }
  }

↓がスプライトシートです

spritesheet: {
    'hiyoko_ss': {
      'frame': {
        'width': 32,
        'height': 32,
        'cols': 8,
        'rows': 3,
      },
      'animations' : {
        'walk1':{
          'frames': [11, 13],
          'next': 'walk1',
          'frequency': 12,
        },
        'walk2':{
          'frames': [8, 10],
          'next': 'walk2',
          'frequency': 12,
        }
      }
    }
  }

これだとキーを押している間ずっとアニメーションが初めから再生されてしまい、動いているように見えません。
「getKey()」関数はキーを押している時に実行されます。長押ししていると絶えず「gotoAndPlay()」関数が実行されるので、アニメーションが先頭フレームから始まります。
これが1フレームごとに起こるので、アニメーションが進まなくなります。

なので「getKeyDown()」関数を使います。
「getKeyDown()」はキーを押した時に1回だけ動くので、押している間ずっと最初から再生するということがなくなります。
さきほどのコードを書き換えるとこうなります。

update: function(app){
    var key = app.keyboard;
    if(key.getKey('w')){//上に移動
      this.player.y -= 2;
      //ここにあったthis.anime.gotoAndPlay('walk1')は削除
    }
    if(key.getKey('s')){//下に移動
      this.player.y += 2;
　　　//ここにあったthis.anime.gotoAndPlay('walk2')は削除
    }
    if(key.getKey('a')){//左に移動
      this.player.x -= 2;
    }
    if(key.getKey('d')){//右に移動
      this.player.x += 2;
    }
    if(key.getKeyDown('w')){
      this.anime.gotoAndPlay('walk1');//上移動
    }
    if(key.getKeyDown('s')){
      this.anime.gotoAndPlay('walk2');//下移動
    }
  }

これで上下移動する際にキャラクターの向きを合わせられるようになりました。
最後に全体のソースコードを載せておきます。