상태 변경과 그리기를 분리하세요
다음 시각적 업데이트를 위해 requestAnimationFrame을 사용한 다음 해당 타임스탬프를 작은 루프 코디네이터에 전달합니다. 경과 시간을 바탕으로 위치, 타이머, 규칙을 업데이트합니다. 업데이트 후 현재 상태를 그립니다. 렌더러는 충돌이 발생했는지 여부를 결정해서는 안 되며, 충돌 검사는 스프라이트가 칠해졌는지 여부에 의존해서는 안 됩니다.
소규모 플랫폼 테스트의 경우 선택한 초당 월드 유닛 수로 마커를 수평으로 이동합니다. 60Hz 디스플레이와 새로 고침이 높은 디스플레이에서 동일한 경로를 실행하세요. 마커가 한 화면에서 동일한 벽시계 간격으로 더 멀리 이동하는 경우 시간 단위가 아닌 콜백별로 일부 움직임이 계속 적용됩니다.
늦은 프레임에 대한 복구 정책 선택
긴 정지 뒤에는 경과 시간이 매우 커질 수 있습니다. 캐주얼 실시간 게임에서는 이 값을 제한해 돌아온 플레이어가 캐릭터가 여러 장애물을 순간 이동으로 통과하는 모습을 보지 않게 하세요. 결정론적 시뮬레이션에는 누산기를 사용하는 고정 업데이트 간격을 적용하고, 따라잡기 업데이트 횟수에 상한을 두세요. 보간이 유용하다면 시뮬레이션 상태 사이의 화면을 그립니다.
반복 가능한 장애물 코스에서 콜백 간격이 가장 길었던 시간을 기록한 다음, 다른 화면으로 전환했다가 돌아와 게임을 확인하세요. 게임을 일시 정지할지, 일부만 따라잡을지, 마지막 상태에서 재개할지 명시적으로 정하세요. 지연된 프레임 하나가 결정을 좌우하게 두지 마세요.
브라우저 게임 루프 관련 질문
그리기 위해 setInterval을 사용해야 합니까?
requestAnimationFrame은 다시 그리기 근처에 예약되고 일반적으로 숨겨진 문서에 대해 일시 중지되므로 시각적 작업에 사용하세요. 타이머는 여전히 비시각적 작업을 예약할 수 있지만 디스플레이 시계로 취급되어서는 안 됩니다.
프레임 타임스탬프는 어디에서 나오나요?
requestAnimationFrame 콜백은 고해상도 타임스탬프를 제공합니다. MDN은 타이밍과 일회성 동작을 문서화합니다. 콜백을 계산하는 대신 해당 타임스탬프를 사용하여 진행 상황을 계산합니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보