[달리는 까까] 맵 제작하기

• 맵 정보 프로토타입

저번에 스테이지를 이어달리도록 하면서 스테이지 클래스를 설명했었다. 스테이지 클래스 생성자에 있는 정보들이 맵 정보 프로토타입이다.

//stage1 정보
const stage1 = {
  name: "STAGE1",
  backgroundUrl: "./lib/backgrounds/game/dark_castle.png",
  groundUrl: "./lib/backgrounds/ground/mint_wood.png",
  length: 10200,
  jumpObstacle: "obstacle table",
  jumpObstaclePosition: [1000, 1500, 5000],
  doubleJumpObstacle: "obstacle clocks",
  doubleJumpObstaclePosition: [2500, 3400, 6700, 6900, 7100, 7300],
  slideObstacle: "obstacle lamp",
  slideObstaclePosition: [5500, 8200, 8700],
  blastPosition: [6500],
  coinMagicPosition: [6300],
  giantPosition: [8000],
  magnetPosition: [6400],
  energyPosition: [10200],
  miniEnergyPosition: [],
  goodPatternPosition: [9200],
  jellyPatternPosition: [],
  damage: 100,
};

위와 같은 스테이지 정보를 스테이지 클래스 생성자에 전달해 여러 스테이지를 만드는 것이다. 맵 배경과 장애물 종류같은 디자인 요소, 장애물 위치, 아이템 위치, 젤리 패턴 위치를 직접 설정해 배열에 담아 보낸다. 

 

맵 패턴을 랜덤으로 생성할 지 지금처럼 고정적인 맵을 저장해 놓을지 고민했었는데 난이도 조절을 위해 고정적으로 만들어 놓는 방법을 선택했다. 난이도별 패턴을 여러 개 만들어 놓고 조합하니 편하게 만들 수 있었다.

 

• 젤리 위치 문제 해결

• x좌표가 같은 젤리들

위 프로토타입을 보면 따로 젤리 위치를 저장하는 배열은 없는 것을 알 수 있다. 젤리가 끊기지 않고 있기 때문에 많은 젤리의 위치를 하나하나 지정하기 보다는 장애물의 위치에 맞게 종류와 위치(높낮이)를 설정한 것이다.

처음에는 젤리 배열의 인덱스를 기준으로 장애물의 위치를 탐색하고 젤리 위치를 지정했었다. 모든 젤리의 간격은 100px로, 장애물의 크기도 100px 단위로 지정했기 때문에 가능한 일이었다. 예를 들어

this.doubleJumpObstaclePosition.indexOf(jellyPosition + 100) !== -1

는 다음 젤리 위치에 이단 점프 장애물이 있다는 뜻이므로 그에 맞는 젤리 위치로 변경해 주는 식이었다.

 

그런데 다양한 젤리 패턴을 생성하면서 이 방법에 문제가 생겼다. 젤리 위치 = 젤리 배열 인덱스 * 100 으로 설정했기 때문에 같은 x좌표에 여러 젤리가 세로로 있을 경우 위치가 이상해졌다. position() 메서드가 제대로 동작하지 않아 젤리를 먹을 수 없어진 것이다.

 

해결 방법은 젤리 위치 설정에 인덱스를 사용하지 않는 것이었다. 기존에 for문을 돌며 arr[i] = new Jelly()로 배열에 젤리를 추가했었는데, 대신 arr.push(new Jelly())로 젤리를 추가하고 i가 더이상 배열의 인덱스를 의미하지 않도록 했다.

 

• 아이템과 겹치지 않게 하기

모든 아이템의 위치를 저장하는 itemPosition 배열을 만든다.

this.itemPosition = this.blastPosition.concat(this.coinMagicPosition, this.giantPosition, this.magnetPosition, this.energyPosition, this.miniEnergyPosition);

이후 장애물과 마찬가지로 다음 젤리 위치에 아이템이 있는 경우에는 젤리를 배치하지 않는다.

 

여기서 문제는 대물약의 크기가 다른 아이템보다 크다는 것이다. 다른 아이템들의 너비는 100px이지만 대물약의 크기는 150px이기 때문에 다른 아이템과 동일하게 처리하면 아이템과 젤리가 겹치게 된다. 따라서 

this.energyPosition.forEach((o) => {
      allItemComProp.arr.push(new Item(o, 450, "energy_potion"));
      this.itemPosition.push(o + 100);
    });

대물약을 맵에 push할 때 itemPosition에 빈 위치(아이템이 없지만 젤리를 배치하지 않는 위치)를 하나 더 push해 줌으로써 해결했다.

 

• 젤리 패턴 생성

꼭 만들고 싶었던 GOOD 패턴

어려운 패턴을 지나거나 스테이지를 클리어할 경우 유저가 뿌듯해 하도록 GOOD 젤리패턴을 배치했다. GOOD 패턴 뒤에 대물약을 배치하면 뿌듯함이 두 배!

자석으로 저 노란곰 젤리를 모두 먹을 수 있다. 변형으로 자석 대신 거대화 아이템을 추가하기도 했다.

 

---

🔻모든 코드 보기🔻

https://github.com/mkthebea/CCKK_Run.git

GitHub - mkthebea/CCKK_Run: A fangame of [CookieRun: Ovenbreak]

🔻게임 하기🔻

https://mkthebea.github.io/CCKK_Run/

DAL GGA