# 신뢰할 수 있는 게임 상태에서 각 HUD 값을 렌더링합니다. > 게임 상태를 진실의 소스로 취급하고 하나의 업데이트 경로에서 HUD 값을 렌더링하여 점수, 생명, 타이머의 일관성을 유지하세요. - URL: https://oneshotgems.ai/ko/topics/synchronizing-game-hud - 카테고리: 게임 개발자용 - 유형: 가이드 - 업데이트일: 2026년 10월 5일 게임에 동의하지 않는 점수 표시에는 일반적으로 두 가지 경쟁적인 진실 소스가 있습니다. 하나는 시뮬레이션에서 값이 변경되고 다른 하나는 충돌 또는 애니메이션 콜백에 의해 직접 업데이트됩니다. 신뢰할 수 있는 게임 모델을 선택한 다음 현재 상태에서 HUD를 렌더링합니다. 이 좁은 소유권 규칙은 중복된 점수 변경, 오래된 라벨, 게임이 끝난 후에도 계속되는 타이머 텍스트를 방지하는 데 도움이 됩니다. HUD가 캔버스에 그려지든 DOM 요소로 렌더링되든 유용합니다. ## 상태를 한 번 업데이트하고 디스플레이 파생 코인이 수집되면 게임 이벤트 또는 시뮬레이션 단계에서 model.score를 업데이트하세요. UI 업데이트 지점에서 라벨에 별도로 값을 추가하는 대신 model.score에서 표시된 값을 렌더링합니다. DOM HUD의 경우 값이 변경되면 textContent를 업데이트하세요. 캔버스 HUD의 경우 동일한 모델 필드에서 숫자를 그립니다. 시각적 개수는 커밋된 점수를 향해 애니메이션으로 표시될 수 있습니다. 여러 라벨에 영향을 미치는 이벤트에 대해 단일 전환을 사용합니다. 생명을 잃으면 플레이가 일시 중지되고 패널이 열리는 경우 상태 변경을 한 번 기록한 다음 렌더링에 생명, 상태 및 사용 가능한 작업이 함께 반영되도록 하세요. 충돌 처리기가 이미 변경한 동일한 변수를 패널 콜백이 독립적으로 변경하지 않도록 하세요. ## 신속한 업데이트 및 최종 상태 테스트 두 개의 픽업을 빠르게 연속해서 실행하고 업데이트를 건너뛰지 않고 HUD에 결과 합계가 표시되는지 확인하세요. 일시 중지하고 실행을 마친 후 다시 시작하세요. 타이머가 중지되고 최종 점수가 의도한 대로 계속 표시되며 다음 실행이 정의된 값에서 시작되는지 확인합니다. 표시를 위해 requestAnimationFrame을 사용하는 경우 이를 렌더링 일정으로 처리하십시오. MDN은 해당 콜백이 일회성이며 다른 프레임에 대해 다시 요청해야 하므로 실수로 프레임당 두 번 실행되는 코드에서 상태 전환을 방지해야 한다고 말합니다. ## 불필요한 화면 갱신 줄이기 DOM 텍스트의 경우 업데이트가 자주 발생하는 경우 쓰기 전에 다음 형식의 값을 현재 값과 비교하세요. 캔버스 HUD의 경우 모든 이벤트 콜백에서 하나의 레이블을 그리는 대신 시뮬레이션 후 그룹 그리기를 수행합니다. 개발 중에 보이는 HUD 옆에 모델의 디버그 판독값을 추가합니다. 해당 값이 다르면 렌더링에 결함이 있는 반면 잘못된 결과 포인트와 값을 일치시키면 모델 업데이트가 다시 수행됩니다. ## 자주 묻는 질문 **충돌 처리기 내에서 점수 레이블을 업데이트해야 합니까?** 핸들러는 권위 있는 점수 상태를 업데이트할 수 있습니다. 하나의 렌더링 경로가 그 상태를 형식화하고 표시하도록 하세요. 라벨에서 별도로 증가하는 두 번째 점수를 유지하지 마세요. **HUD에 이전 실행의 값이 표시되는 이유는 무엇입니까?** 다시 시작하면 HUD 렌더링을 트리거하지 않고 시뮬레이션 상태가 재설정되거나 패널에 오래된 복사본이 보관될 수 있습니다. 한 번의 전환을 통해 모델을 재설정하고 즉시 새로운 상태를 렌더링합니다. ## 궁금한 것을 더 찾아보세요 - [각 작업을 설명하는 게임 피드백 디자인](https://oneshotgems.ai/ko/topics/game-feedback-design): 플레이 영역을 가리지 않으면서 무엇이 달라졌고 왜 달라졌는지, 다음에 무엇을 할 수 있는지 게임의 반응으로 알려 주세요. - [안정적인 브라우저 게임 루프 구축](https://oneshotgems.ai/ko/topics/browser-game-loop): 시뮬레이션 속도를 플레이어의 디스플레이 새로 고침 빈도에 연결하지 않고 브라우저 게임 업데이트를 구조화하고 애니메이션 프레임을 중심으로 그림을 그립니다. ## 추가 읽을거리 - [MDN 요청애니메이션프레임](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) --- 대표 페이지: https://oneshotgems.ai/ko/topics/synchronizing-game-hud