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)