[kaplay] 플레이어 Touch 조작 총정리

k.scene("main", async () => {
  
  const mapData = await (await fetch("./map.json")).json();
  const layers = mapData.layers;
  const map = k.add([k.sprite("map"), k.pos(0), k.scale(scaleFactor)]);
  


  const player = k.make([
    k.sprite("spritesheet", { anim: "idle-down" }),
    k.area({
      shape: new k.Rect(k.vec2(0, 3), 10, 10),
    }),
    k.body(),
    k.anchor("center"),
    k.pos(),
    k.scale(scaleFactor),
    {
      speed: 250,
      direction: "down",
      isInDialogue: false,
    },
  "player"
  ]);

  const leftButton = k.add([
    k.sprite('left'),
    //50,560
    k.pos(50, 560),
    k.opacity(0.5),
    k.scale(1.5,1.5),
    k.fixed(),
    k.area(),
    "leftButton"
  ]);
  
  const rightButton = k.add([
    k.sprite('right'),
    k.pos(150, 560),
    k.opacity(0.5),
    k.scale(1.5,1.5),
    k.fixed(),
    k.area(),
    "rightButton"
  ]);
  
  const upButton = k.add([
    k.sprite('up'),
    k.pos(100, 510),
    k.opacity(0.5),
    k.scale(1.5,1.5),
    k.fixed(),
    k.area(),
    "upButton"
  ]);
  
  const downButton = k.add([
    k.sprite('down'),
    k.pos(100, 610),
    k.opacity(0.5),
    k.scale(1.5,1.5),
    k.fixed(),
    k.area(),
    "downButton"
  ]);

 
**생략**


// 터치 이벤트로 기능을 구현하기 위해서는 약간의 우회가 필요
// 마우스나 키는 기본적으로 매 프레임마다 입력 이벤트를 입력받는 것을 인식하지만
// 터치는 한번 클릭할 때만 호출이 됨
// 따라서 터치 이벤트는 다른 요소들을 조합해서 로직을 완성해야 함

// 순서 정리
// 키입력 이벤트 세팅 onKeyDown,onKeyRelease
// onUpdate(매 프레임 작동 중) -> onTouchStart -> keyDown 객체 조작 
// -> onUpdate조건문 할성화(moveLeft,Right,Up,Down) 

const keyDown = {
left:false,
right:false,
up:false,
down:false
};


// player 방향별 움직임 함수 정의
const moveLeft = () => {
  
  player.move(-player.speed, 0);
}
const moveRight = () => {
  player.move(player.speed, 0);
}
const moveUp = () => {
 
  player.move(0, -player.speed);
}

const moveDown = () => {
  player.move(0, player.speed);
}



// 여기가 touch컨트롤러 핵심
// 매 프레임마다 실행되는 onUpdate 사용해서 터치 이벤트의 입력을 지속적으로 받음
// keyDown 객체의 상태에 따라 움직이는 함수를 실행
k.onUpdate(()=>{
  if(keyDown.left){
    moveLeft()
  }
  else if(keyDown.right){
    moveRight()
  }
  else if(keyDown.up){
    moveUp()
  }
  else if(keyDown.down){
    moveDown()
  }
})


// 여기는 keyDown 객체의 상태를 true로 만들어줘서 위 이벤트가 작동하도록 하는 전단계
k.onTouchStart((id,pos) => {
 
const buttonMap = [
  rightButton.hasPoint({x:pos.clientX,y:pos.clientY}),
  leftButton.hasPoint({x:pos.clientX,y:pos.clientY}),
  upButton.hasPoint({x:pos.clientX,y:pos.clientY}),
  downButton.hasPoint({x:pos.clientX,y:pos.clientY})

]

  if (buttonMap[0]) {
    rightButton.opacity = 1;
    keyDown.right = true;

    player.flipX = false;
    if (player.curAnim() !== "walk-side") player.play("walk-side");
    player.direction = "right";
    // player.move(player.speed, 0);
    return;
   
  }

  else if (buttonMap[1]) {
    leftButton.opacity = 1;
    keyDown.left = true;

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

  else if (buttonMap[2]) {
    upButton.opacity = 1;
    keyDown.up = true;

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

  else if (buttonMap[3]) {
    downButton.opacity = 1;
    keyDown.down = true;

    if (player.curAnim() !== "walk-down") player.play("walk-down");
    player.direction = "down";
    player.move(0, player.speed);
    return;
  }
  
})


// 터치가 해제되는 과정을 change와 end 두 과정에 거쳐서 같이 처리하기 위해
// 공용 메서드를 따로 선언
const onTouchChanged = (_,pos)=>{
 
    if(leftButton.hasPoint({x:pos.clientX,y:pos.clientY})){
      keyDown.left = false
      leftButton.opacity = 0.5
    }
    
    else if(rightButton.hasPoint({x:pos.clientX,y:pos.clientY})){
      keyDown.right = false
      rightButton.opacity = 0.5
    }
   
    else if(upButton.hasPoint({x:pos.clientX,y:pos.clientY})){
      keyDown.up = false
      upButton.opacity = 0.5
    }
    else if(downButton.hasPoint({x:pos.clientX,y:pos.clientY})){
      keyDown.down = false
      downButton.opacity = 0.5
    }
    stopAnims();
   
}

k.onTouchMove(onTouchChanged)
k.onTouchEnd(onTouchChanged)