player도 움직일 수 있다!

우선 플레어의 움직이는 애니메이션을 지정해줘야한다. 이전 포스트에서 언급한 적있는 sprite를 사용해서말이다.
한번 다시 읽어보면 다시 이해가 될 것이다..!! sprite? 그게 뭐지!
이렇게 애니메이션에 대한 처리를 했으면 움직임을 설정하면 되는데 나는 방향키를 눌렀을때 움직임 처리를 해줄 것이다.

k.onKeyDown((dir) => {
  let angle = 0;
  let dirX = 0;
  let dirY = 0;

  const dirList = ["up", "down", "left", "right"];

  if (dirList.includes(dir)) {
    if (dir === "up") {
      dirX = 0;
      dirY = -1;
      angle = "90";
    }

    if (dir === "down") {
      dirX = 0;
      dirY = 1;
      angle = "-90";
    }

    if (dir === "right") {
      dirX = 1;
      dirY = 0;
      angle = "180";
    }

    if (dir === "left") {
      dirX = -1;
      dirY = 0;
      angle = "0";
    }

    player.move(dirX * player.speed, dirY * player.speed);
    handleCommonMove(angle);
  }
})

위의 코드는 방향키가 눌러졌을 때 움직이는 좌표를 세팅한 것이다. 코드 자체는 어렵지 않았다.
이어서 handleCommonMove는 방향이 정해졌으니 어떤 애니메이션을 실행시킬 것인지 정하는 함수이다.

handleCommonMove(angle) {
  const lowerBound = 50;
  const upperBound = 125;
  
  if (angle > lowerBound && angle < upperBound && player.curAnim() !== 'walk-up-player') {
    player.play('walk-up-player');
    player.direction = "up";
    return;
  }

  if (angle < -lowerBound && angle > -upperBound && player.curAnim() !== 'walk-down-player') {
    player.play('walk-down-player');
    player.direction = "down";
    return;
  }

  if (Math.abs(angle) > upperBound) {
    player.flipX = false;
    if (player.curAnim() !== 'walk-side-player') player.play('walk-side-player');
    player.direction = "right";
    return;
  }

  if (Math.abs(angle) < lowerBound) {
    player.flipX = true;
    if (player.curAnim() !== 'walk-side-player') player.play('walk-side-player');
    player.direction = "left";
    return;
  }
}

이 소스는 정해진 방향에 따라 어떤 애니메이션이 동작할 지 정해주는 역할을 한다.
굳이 각도를 받는 이유는 최초로는 마우스의 움직임을 따라서 동작하는것으로 작업을 했다가 방향키로 조정하는걸로 바꿨기 때문이다. 그래서 자유롭게 각도가 아닌 right, left 등의 텍스트를 사용해도 좋다.

onKeyDown, move 그리고 play

• keydow(key, action) : 첫번째 인자는 키보드의 키를 누르게 되면 해당 키의 명칭이 문자로 들어오게 된다. 어떤 키든 액션을 취하면 이 함수가 동작한다고 볼 수 있다.

• move(xVel, yVel) : 초당 몇 픽셀 움질일 것인지 정하는 함수이다.

• play(anim) : 어떤 애니메이션을 실행시킬지 정하는 함수이다.

내 기준 생각보다 문서가 불친절해서(되는 함수도 있고 안되는 함수도 있다..) 다음에 게임 프로젝트를 하게 된다는 다른 프레임 워크나 라이브러리를 써봐야할 것 같다..