kaboom에서 player를 세팅해보자

Jean Young Park·2024년 5월 20일
0

javascript

목록 보기
16/23

우선 화면에 플레이어를 세팅해줄 것이다.
처음엔 무작정 영상만 따라했는데 작업을 끝내고 난 뒤 의문점이 생겼다. 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메서드를 이용하여 장면에 추가를 해준다.
나는 이와 같이 몬스터도 추가를 해주었고 외벽이나 출구 그리고 입구도 장면에 추가해 주었다.
(아마 여기까지는 수월했다지..)

make와 add

  • make : 게임 오브젝트를 생성하지만, 현재 장면(scene)에 추가하지 않는다.
  • add : 게임 오브젝트를 생성하고, 바로 현재 장면에 추가한다.

다음 포스트 바로가기 -> 캐릭터 따라 화면 움직이기

0개의 댓글

관련 채용 정보