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

 지금 Pong 게임의 탁구채 움직임을 구현 중인데 내 노트북에서 게임을 할 때랑 팀원의 노트북으로 게임을 할 때 탁구채의 움직이는 속도가 달랐다. 처음에는 setInterval() 로 60 fps으로 구현을 하다가 프레임 드랍이 있어서 requestAnimationFrame() 함수를 사용해서 탁구채의 움직임을 구현했는데 당시 구현을 할 때 대충 다른 사람의 블로그를 보고 구현을 해서 환경에 따라 탁구채의 속도가 다른 이유를 한참 찾아 헤맸다..

 

 이유는 모니터의 hz 차이였다.

- MacBook pro 16

- MacBook air 15

 

 이렇게 두 대의 노트북으로 테스트를 했는데 일단 pro의 경우 모니터 hz(재생율) 을 ProMotion 을 사용하고 있었고 팀원은 60hz 를 사용하고 있었다. ProMotion hz 는 정해진 주사율은 없지만 능동적으로 분석해서 최대 120hz 까지 올라가는데 requestAnimationFrame 은 1초에 사용자의 모니터 hz 만큼 호출을 한다. 즉 내 모니터를 120hz 라는 가정하에 탁구채를 움직일 때 내 환경은 animation 을 120번 호출하고 팀원은 60번을 호출한다.

 한번 animation이 일어날 때 5px 씩 움직인다고 하면 나는 1초에 600px 만큼 움직일 수 있고 팀원은 300px 만큼 움직일 수 있다. 게임은 어떤 환경에서든 공정해야 하기 때문에 방법을 다시 고민해 봐야겠다.

 

 앞으로 어떤 함수를 쓰든 끝까지 블로그나 문서를 읽고 사용해야겠다....