[Kaplay] 기존의 템플릿에 내가 필요한 기능을 녹여내기

🧐 문제/목표 파악 

 

기존에 구현해놓은 keyController와 mouseController 로직이랑 새로 구현하려는 touchController 로직이 겹치면서 모든 컨트롤러가 제대로 작동하지 않는 문제 발생

-> touchController 로직을 최대한 기존의 로직에 끼워맞춰야 함

-> 기존 컨트롤러 로직은 템플릿이므로, 이에 대한 이해 필요

 

 

 

🎯 문제/목표 해결 

1) 기존 코드 분석

 // 해당 키 방향대로 player를 이동시켜주는 기능
  k.onKeyDown((key) => {
    const keyMap = [
      k.isKeyDown("right"),
      k.isKeyDown("left"),
      k.isKeyDown("up"),
      k.isKeyDown("down"),
    ];

    let nbOfKeyPressed = 0;
    for (const key of keyMap) {
      if (key) {
        nbOfKeyPressed++;
      }
    }

    if (nbOfKeyPressed > 1) return;
    if (player.isInDialogue) return;

 // //각 입력별 분기에 따라 player 처리
    if (keyMap[0]) {
      player.flipX = false;
      if (player.curAnim() !== "walk-side") player.play("walk-side");
      player.direction = "right";
      player.move(player.speed, 0);
      return;
    }

    if (keyMap[1]) {
      player.flipX = true;
      if (player.curAnim() !== "walk-side") player.play("walk-side");
      player.direction = "left";
      player.move(-player.speed, 0);
      return;
    }

    if (keyMap[2]) {
      if (player.curAnim() !== "walk-up") player.play("walk-up");
      player.direction = "up";
      player.move(0, -player.speed);
      return;
    }

    if (keyMap[3]) {
      if (player.curAnim() !== "walk-down") player.play("walk-down");
      player.direction = "down";
      player.move(0, player.speed);
    }
  });

위 코드에서 입력을 어디서 받는지, 내가 원하는 어떤 버튼을 터치하는지 정보를 받을 수 있다면 분기점을 똑같이 정하고 아래의 로직을 그대로 수행하면 된다.

그리고 버튼을 touch하는 경우, hasPoint로 분기가능하다는 것을 안다.

위 두 부분을 조합하면 된다......!

두 로직을 합쳐서 테스트 해봤더니 버튼 터치 시 의도한대로 움직인다.

 

다만,

1) 캐릭터가 찔끔찔끔 움직인다. 터치하고 있는 동안 움직이고 손을 떼면 멈추게 해야한다.

2) 어느 버튼을 누르는지 확인하기 위해 opacity를 조정해야한다.

 

우선 1)을 먼저 처리해야겠다.