우선 화면에 플레이어를 세팅해줄 것이다.
처음엔 무작정 영상만 따라했는데 작업을 끝내고 난 뒤 의문점이 생겼다. make와 add의 차이점이 무엇인가...
우선 플레이어 세팅하는 소스이다.
const player = k.make([
k.sprite("spritesheet", { anim: "idle-down-player" }),
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,
layer: "object",
},
k.state("idle", ["idle", "attack"]),
"player",
]);
플레이어는 make로 만들어져 있다.
make
의 용도는 게임 오브젝트를 생성하지만, 현재 장면(scene)에 추가하지 않는다. 즉 위의 소스는 아직 게임 화면에 노출되고 있지 않는것이다. 그럼 언제 어떻게 장면에 오브젝트를 추가하는것인가?
for (const layer of layers) {
if (layer.name === "spawnpoints") {
for (const entity of layer.objects) {
if (entity.name === "player") {
this.player.pos = this.k.vec2((this.map.pos.x + entity.x) * scaleFactor, (this.map.pos.y + entity.y) * scaleFactor);
this.k.add(this.player);
continue;
}
}
}
}
위 소스의 layers는 tiled를 이용하여 json파일로 변환한 게임 지도이다. 이 파일을 보면 좌표, 지정한 이름, id 등등 tiled에서 내가 정해준 각종 정보들이 json 타입으로 정의되어있다.
조건문에 있는 layer.name, entity.name 모두 내가 정의해준 이름이다.
이 조건에 따라 모두 해당한다면 이제 add
메서드를 이용하여 장면에 추가를 해준다.
나는 이와 같이 몬스터도 추가를 해주었고 외벽이나 출구 그리고 입구도 장면에 추가해 주었다.
(아마 여기까지는 수월했다지..)
다음 포스트 바로가기 -> 캐릭터 따라 화면 움직이기