[CH6] 타워 디펜스 리마스터 프로젝트 - 트러블슈팅110

 

특정 영역에 랜덤하게 길 만들기

이전에 타워 디펜스 게임을 제작할 때, 팀원분이 sin 함수를 사용하여 화려하게 랜덤한 길을 그렸었다. 멀티 플레이 게임이 매칭되는 순간, 랜덤하게 길을 그려주고 시작해야 하기 때문에 해당 코드를 참고해보기로 했다.

const path = [];
    let currentX = 0;

    const amplitude = height / 3; // 진폭으로 상하 폭 결정
    const frequency = 0.025; // 주파수로 곡률 결정
    const phase = Math.random() * Math.PI * 2; // 위상으로 파형 결정 (시작 지점 변동)

    while (currentX <= width) {
      const sineY = height / 2 + amplitude * Math.sin(frequency * currentX + phase);
      const randomYChange = Math.floor(Math.random() * 100) - 50; // -50 ~ 50 범위의 랜덤 변화
      let currentY = sineY + randomYChange;

      // y 좌표에 대한 clamp 처리
      if (currentY < 0) {
        currentY = 0;
      }
      if (currentY > height) {
        currentY = height;
      }

      path.push({ x: currentX, y: currentY });

      currentX += Math.floor(Math.random() * 50) + 20;
    }

    return path;
  }

 

 

이번에 제공받은 클라이언트는 전체 캔버스에서 일부분만 사용하고 있기 때문에, 경로가 실제 플레이 화면을 넘어서 그려지는 현상이 발생했다. 파형이 너무 큰가? 주파수가 너무 큰가? 캔버스 사이즈를 잘못 잡았나? 하는 마음에 이것저것 수치를 건드려봐도 여전히 길이 화면을 뚫고 나갔다. 

 

원인이 뭘까 하나씩 건드리고, 조언을 구하다보니 y 좌표에 대한 clamp 처리가 문제였다는 것을 알 수 있었다.

 

const path = [];
    let currentX = 0;

    const amplitude = height / 3; // 진폭으로 상하 폭 결정
    const frequency = 0.025; // 주파수로 곡률 결정
    const phase = Math.random() * Math.PI * 2; // 위상으로 파형 결정 (시작 지점 변동)

    while (currentX <= width) {
      const sineY = height / 2 + amplitude * Math.sin(frequency * currentX + phase);
      const randomYChange = Math.floor(Math.random() * 100) - 50; // -50 ~ 50 범위의 랜덤 변화
      let currentY = sineY + randomYChange;

      // y 좌표에 대한 clamp 처리
      if (currentY < 230) {
        currentY = 230;
      }
      if (currentY > height) {
        currentY = height;
      }

      path.push({ x: currentX, y: currentY });

      currentX += Math.floor(Math.random() * 50) + 20;
    }

    return path;
  }

 

if문으로 y 좌표 230 밑으로 값이 잡힐 경우, 230으로 값을 고정해주는 식으로 화면 밑으로 뚫고 내려갈 수 없게 제한을 주었다. 해당 부분의 원리를 알고 수정한 뒤, 실제 게임 화면에 정상적으로 경로가 그려지고 그 끝에 base가 설치되도록 세팅할 수 있었다.