requestAnimationFrame 프레임 레이트 조정하기

 pongGame에서 requestAnimationFrame() 를 사용해서 탁구채를 움직이는데 문제가 있다 사용자의 모니터 환경에 따라 탁구채의 움직이는 속도가 달라진다.

https://gaebarsaebal.tistory.com/58

탁구채 속도가 환경에 따라 다르게 움직임(requestAnimationFrame)

 그래서 다양한 모니터 환경에서 공평함을 유지하기 위해 60FPS로 고정을 시켜줄려고 한다. 이렇게 되면 requestAnimationFrame()을 사용하는 장점이 사라지지만 게임의 공평함이 우선이 된다고 생각해서 프레임 레이트를 고정시켜보자

animatePaddleMovement() {
    let lastTime = 0;
    const fps = 60;                     // 원하는 프레임 레이트
    const interval = 1000 / fps;        // 몇 초마다 반복이 되는지 계산

    if (!this.rAF) {
      const animate = currentTime => {
        if (isMovingUp || isMovingDown) {
          const myStickRect = this.myPingpongStick.getBoundingClientRect();

          const elapsed = currentTime - lastTime; // 경과한 시간 구하기

          if (elapsed > interval)         // 체크해서 실행 {
          	// 탁구채 움직이는 코드
          }
          this.rAF = requestAnimationFrame(animate.bind(this));
        } else {
          cancelAnimationFrame(this.rAF);
          this.rAF = null;
        }
      };
      this.rAF = requestAnimationFrame(animate.bind(this));
    }
  }

 

이렇게 되면 다양한 모니터 환경에도 동일한 속도로 탁구채를 움직일 수 있다.